點、線
- 先打程式碼，做出小圓點
- 打程式碼畫出線（自動往右下畫）
- 程式碼
void setup(){size(500,500);}float x=250,y=250;float dx=1,dy=1;void draw(){ellipse(x,y,5,5);x+=dx;y+=dy;}
亂數點線
- 將背景改成黑色
- 加入程式碼讓線亂跑&碰到邊界就反彈
- 程式碼
void setup(){size(500,500);dx=random(-1,+1);dy=random(-1,+1);}float x=250,y=250;float dx=1,dy=1;void draw(){background(0);ellipse(x,y,5,5);x+=dx;y+=dy;if(x<0||x>500)dx=-dx;if(y<0||y>500)dy=-dy;}
多個亂數點線
- 加上迴圈程式碼，讓畫面充滿白點
- 程式碼
void setup(){size(500,500);for(int i=0;i<20;i++){x[i]=random(500);y[i]=random(500);dx[i]=random(-1,+1);dy[i]=random(-1,+1);}}float []x=new float[20];float []y=new float[20];float []dx=new float[20];float []dy=new float[20];void draw(){background(0);for(int i=0;i<20;i++){ellipse(x[i],y[i],5,5);x[i]+=dx[i];y[i]+=dy[i];if(x[i]<0||x[i]>500)dx[i]=-dx[i];if(y[i]<0||y[i]>500)dy[i]=-dy[i];}}
多個亂數點線連起來
- 加上程式碼讓點跟點之間連起來
- 加上程式碼將線改成紅色
- 程式碼
void setup(){size(500,500);for(int i=0;i<20;i++){x[i]=random(500);y[i]=random(500);dx[i]=random(-1,+1);dy[i]=random(-1,+1);}}float []x=new float[20];float []y=new float[20];float []dx=new float[20];float []dy=new float[20];void draw(){background(0);for(int i=0;i<20;i++){ellipse(x[i],y[i],5,5);for(int k=0;k<20;k++){stroke(255,0,0); //線改紅色if(dist(x[i],y[i],x[k],y[k])<100)line(x[i],y[i],x[k],y[k]);}x[i]+=dx[i];y[i]+=dy[i];if(x[i]<0||x[i]>500)dx[i]=-dx[i];if(y[i]<0||y[i]>500)dy[i]=-dy[i];}}
線增加且改顏色
- 將原本的上限20改為N
- 更改程式碼讓線變白色且有透明之分
- 程式碼
void setup(){size(500,500);for(int i=0;i<N;i++){x[i]=random(500);y[i]=random(500);dx[i]=random(-1,+1);dy[i]=random(-1,+1);}}int N=40;float []x=new float[N];float []y=new float[N];float []dx=new float[N];float []dy=new float[N];void draw(){background(0);for(int i=0;i<N;i++){ellipse(x[i],y[i],5,5);for(int k=0;k<N;k++){float d=dist(x[i],y[i],x[k],y[k]);stroke(2.55*(100-d));if(d<100)line(x[i],y[i],x[k],y[k]);}x[i]+=dx[i];y[i]+=dy[i];if(x[i]<0||x[i]>500)dx[i]=-dx[i];if(y[i]<0||y[i]>500)dy[i]=-dy[i];}}
吸引力
- 增加一點點吸引力
- 程式碼
void setup(){size(500,500);for(int i=0;i<N;i++){x[i]=random(500);y[i]=random(500);dx[i]=random(-1,+1);dy[i]=random(-1,+1);}}int N=50;float []x=new float[N];float []y=new float[N];float []dx=new float[N];float []dy=new float[N];void draw(){background(0);for(int i=0;i<N;i++){ellipse(x[i],y[i],5,5);for(int k=0;k<N;k++){float d=dist(x[i],y[i],x[k],y[k]);stroke(2.55*(100-d));if(d<100){line(x[i],y[i],x[k],y[k]);dx[i]+=(x[k]-x[i])*0.00001;dy[i]+=(y[k]-y[i])*0.00001;}}x[i]+=dx[i];y[i]+=dy[i];if(x[i]<0||x[i]>500)dx[i]=-dx[i];if(y[i]<0||y[i]>500)dy[i]=-dy[i];}}
老師介紹新版processing功能
- 老師介紹工具（*我現在用的是舊版）
- 老師介紹課本
- 開啟顏色選擇器
- 挑選一個顏色，複製顏色碼
- 打上程式碼，讓程式寫出剛剛複製的顏色背景
- 修改程式碼
- 修改程式碼，讓程式可以360°變換顏色
- 程式碼
void setup(){size(500,500);colorMode(HSB,360,100,100);}void draw(){background(frameCount%360,49,86);}
彩虹
- 打程式碼，做出彩虹圖
- 程式碼
size(400,400);colorMode(HSB,400);for(int i=0;i<400;i++){for(int j=0;j<400;j++){stroke(i,400,400);point(i,j);}}
小遊戲：找不同的顏色
- 做出白色圈圈
- 加上程式碼讓圈圈跑隨機顏色
- 更改程式碼讓圈圈跑隨機明亮一點的顏色
- 加上滑鼠點擊事件，點按滑鼠會換圈圈顏色
- 更改程式碼讓其中一個圈圈跑不同的顏色
- 答錯也沒關係，還是會跳下一個顏色
- 程式碼
void setup(){size(300,300);colorMode(HSB,360,100,100);chooseColor();}void mousePressed(){chooseColor();}int I,J;float h,s,b,dh,ds,db;void chooseColor(){h=random(360);s=random(50,100);b=random(50,100);I=int(random(5));J=int(random(5));dh=random(-10,+10);ds=random(-10,+10);db=random(-10,+10);}void draw(){background(213,49,86);for(int i=0;i<5;i++){for(int j=0;j<5;j++){if(i==I&&j==J)fill(h+dh,s+ds,b+db);else fill(h,s,b);ellipse(30+j*60,30+i*60,60,60);}}}
上傳程式碼
- 上傳至GitHub
沒有留言:
張貼留言