20200501 簡易版Lyto Different Color
我們要畫出四個圓形(2*2)
所以一開始先畫出一個圓形(左上角)
size(300,500);
ellipse(75,200+75,150,150);//ellipse(x,y,寬,高)
--------------------------------------------------------------------------------------------------------------------------
再畫第二個圓形(右上角)
size(300,500);
ellipse(75,200+75,150,150);//ellipse(x,y,寬,高)
ellipse(75+150,200+75,150,150);//x座標向右移150
--------------------------------------------------------------------------------------------------------------------------
然後畫底下的兩個圓形(左下角&右下角)
size(300,500);
ellipse(75,200+75,150,150);//ellipse(x,y,寬,高)
ellipse(75+150,200+75,150,150);//x座標向右移150
ellipse(75,200+75+150,150,150);//y座標向下移150
ellipse(75+150,200+75+150,150,150);//y座標向下移150
--------------------------------------------------------------------------------------------------------------------------
再來要變成9個圓形(3*3)
size(300,500);
ellipse(50,200+50,100,100);//ellipse(x,y,寬,高)
ellipse(50+100,200+50,100,100);//x座標向右移100
ellipse(50+100+100,200+50,100,100);//x座標向右移100+100
ellipse(50,200+50+100,100,100);//y座標向下移100
ellipse(50+100,200+50+100,100,100);//y座標向下移100
ellipse(50+100+100,200+50+100,100,100);//y座標向下移100
ellipse(50,200+50+100+100,100,100);//y座標向下移100+100
ellipse(50+100,200+50+100+100,100,100);//y座標向下移100+100
ellipse(50+100+100,200+50+100+100,100,100);//y座標向下移100+100
--------------------------------------------------------------------------------------------------------------------------
因為畫圓形的步驟其實是一樣的道理
所以可以用for迴圈來簡化程式碼
size(300,500);
for(int y=0;y<3;y++)
{
for(int x=0;x<3;x++)
{
ellipse(50+x*100,200+50+y*100,100,100);//x座標要向右移x個100 y座標要向下移y個100
}
}
--------------------------------------------------------------------------------------------------------------------------
然後我們要讓圓形的數量可以改變
只要改變n的值 圓的數量就會跟著改變
size(300,500);
int n=3;
int R=300/n,w=R/2;//R=圓的直徑 w=圓的半徑
for(int y=0;y<n;y++)
{
for(int x=0;x<n;x++)
{
ellipse(w+x*R,200+w+y*R,R,R);//x座標要向右移x個R y座標要向下移y個R
}
}
--------------------------------------------------------------------------------------------------------------------------
再來要讓圓會自己變大
void setup()
{
size(300,500);
}
int n=5;
int R=300/n,w=R/2,RR=0;//R=圓的直徑 w=圓的半徑 RR=圓現在的大小
void draw()
{
for(int y=0;y<n;y++)
{
for(int x=0;x<n;x++)
{
ellipse(w+x*R,200+w+y*R,RR,RR);//x座標要向右移x個R y座標要向下移y個R
}
}
if(RR<R) RR++;//現在的圓如果比直徑小就變大
}
--------------------------------------------------------------------------------------------------------------------------
然後讓圓變大的速度固定
void setup()
{
size(300,500);
}
int n=5,RR=0;//RR=圓現在的大小
void draw()
{
int R=300/n,w=R/2;//R=圓的直徑 w=圓的半徑
background(0);//背景設為黑色
for(int y=0;y<n;y++)
{
for(int x=0;x<n;x++)
{
ellipse(w+x*R,200+w+y*R,RR,RR);//x座標要向右移x個R y座標要向下移y個R
}
}
if(RR<R) RR+=R/30;//現在的圓如果比直徑小就變大
}
--------------------------------------------------------------------------------------------------------------------------
再來要讓圓可以從2*2開始自己增加
void setup()
{
size(300,500);
}
int n=2,RR=0;//RR=圓現在的大小
void draw()
{
int R=300/n,w=R/2;//R=圓的直徑 w=圓的半徑
background(0);//背景設為黑色
for(int y=0;y<n;y++)
{
for(int x=0;x<n;x++)
{
ellipse(w+x*R,200+w+y*R,RR,RR);//x座標要向右移x個R y座標要向下移y個R
}
}
if(RR<R) RR+=R/30;//現在的圓如果比直徑小就變大
else
{
n++;//圓的數量增加
RR=0;//圓現在的大小從0開始
}
}
--------------------------------------------------------------------------------------------------------------------------
再來要讓滑鼠碰到的圓有顏色
void setup()
{
size(300,500);
}
int ansX=1,ansY=2;//把答案設在(1,2)的位置
int n=3,RR=0;//RR=圓現在的大小
void draw()
{
int R=300/n,w=R/2;//R=圓的直徑 w=圓的半徑
background(0);//背景設為黑色
for(int y=0;y<n;y++)
{
for(int x=0;x<n;x++)
{
if(x==ansX&&y==ansY) fill(128);//把答案的圓填滿灰色
else fill(255);//其他填滿白色
if(dist(mouseX,mouseY,w+x*R,200+w+y*R)<w) fill(255,0,0);//滑鼠碰到的圓填滿紅色
ellipse(w+x*R,200+w+y*R,RR,RR);//x座標要向右移x個R y座標要向下移y個R
}
}
if(RR<R) RR+=R/30;//現在的圓如果比直徑小就變大
}
--------------------------------------------------------------------------------------------------------------------------
然後讓答案可以隨機改變
void setup()
{
size(300,500);
}
int ansX=1,ansY=2;//把一開始的答案設在(1,2)的位置
int n=3,RR=0;//RR=圓現在的大小
void draw()
{
int R=300/n,w=R/2;//R=圓的直徑 w=圓的半徑
background(0);//背景設為黑色
for(int y=0;y<n;y++)
{
for(int x=0;x<n;x++)
{
if(x==ansX&&y==ansY) fill(200);//把答案的圓填滿淺灰色
else fill(255);//其他填滿白色
if(dist(mouseX,mouseY,w+x*R,200+w+y*R)<w)
{
if(mousePressed&&x==ansX&&y==ansY)//如果滑鼠按下且答案對
{
ansX=int(random(n));//隨機改變答案的x座標
ansY=int(random(n));//隨機改變答案的y座標
}
}
ellipse(w+x*R,200+w+y*R,RR,RR);//x座標要向右移x個R y座標要向下移y個R
}
}
if(RR<R) RR+=R/30;//現在的圓如果比直徑小就變大
}
--------------------------------------------------------------------------------------------------------------------------
再來要用HSB色彩系統來改變圓的顏色
我們先用背景來實驗看看
void setup()
{
size(256,256);
colorMode(HSB,256);//用HSB色彩系統(色相,飽和度,亮度)
}
void draw()
{
background(mouseX,mouseY,255);//背景顏色跟著滑鼠的位置改變
}
--------------------------------------------------------------------------------------------------------------------------
最後把色彩系統加到原本的程式裡
void setup()
{
size(300,500);
colorMode(HSB,256);//用HSB色彩系統(色相,飽和度,亮度)
}
int ansX=1,ansY=2;//把一開始的答案設在(1,2)的位置
int n=3,RR=0;//RR=圓現在的大小
int H=0;//一開始的色相H是0
void draw()
{
int R=300/n,w=R/2;//R=圓的直徑 w=圓的半徑
background(0);//背景設為黑色
for(int y=0;y<n;y++)
{
for(int x=0;x<n;x++)
{
if(x==ansX&&y==ansY) fill(H-10,243,234);//把答案的圓填滿H-10(跟其他圓的顏色有點不一樣)
else fill(H,255,255);//其他填滿色相H
if(dist(mouseX,mouseY,w+x*R,200+w+y*R)<w)
{
if(mousePressed&&x==ansX&&y==ansY)//如果滑鼠按下且答案對
{
ansX=int(random(n));//隨機改變答案的x座標
ansY=int(random(n));//隨機改變答案的y座標
H+=20;//改變顏色
if(H>256) H=0;//如果超過256的話 就從0開始
}
}
ellipse(w+x*R,200+w+y*R,RR,RR);//x座標要向右移x個R y座標要向下移y個R
}
}
if(RR<R) RR+=R/30;//現在的圓如果比直徑小就變大
}
--------------------------------------------------------------------------------------------------------------------------
心得
這次老師教我們做的遊戲叫做Lyto Different Color，最近好像滿多人在玩的，上課的時候本來覺得過程有點複雜，不太容易理解，但後來自己又想了一遍就比較懂了!本來以為這次上課會把之前的小精靈做完，但是改成做這個小遊戲，可以在三節課內完成一個小遊戲感覺超神奇的!但還是希望之後能把小精靈也做完!
沒有留言:
張貼留言