✒ ✒ ✒
今天的第一個程式是想模擬這本課本的封面
想做出會動的畫面
任務一
點 線 面
設置視窗大小 > 繪製一個圓圈(點)
💾 程式碼存檔區void setup(){ size(500,500); } float x=250,y=250; void draw(){ ellipse(x,y,5,5); }
做牛頓力學的變化
💾 程式碼存檔區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++){ //總共20個點 x[i] = random(500); //x位置隨機到500 y[i] = random(500); //y位置隨機到500 dx[i] = random(-1,+1); //dx = random(-1,+1); dy[i] = random(-1,+1); //dy = random(-1,+1); } } float [] x = new float[20]; //float x=250,y=250; float [] y = new float[20]; float [] dx = new float[20]; //float dx=1,dy=1; float [] dy = new float[20]; void draw(){ background(0); for(int i=0;i<20;i++){ //總共20個點 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]; } }隨機的產生並可以移動和邊界反彈
靠近的想連線！if(...)line(x[i],y[i],x[k],y[k]);if(這兩條線夠近)line(兩個點連線！)💾 程式碼存檔區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 x=250,y=250; float [] y = new float[20]; float [] dx = new float[20];//float dx=1,dy=1; 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) //如果距離小於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]; } }只要兩個點的距離小於100連紅色線
想要可以方便改變點的數目int 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);//dx = random(-1,+1); //亂數決定往哪裡跑 dy[i] = random(-1,+1);//dy = random(-1,+1); //亂數決定往哪裡跑 } } int N=40; float [] x = new float[N];//float x=250,y=250; float [] y = new float[N]; float [] dx = new float[N];//float dx=1,dy=1; 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++){ 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]; } }然後我們讓連線有點變化依照距離有不一樣的線段顏色💾 程式碼存檔區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);//dx = random(-1,+1); //亂數決定往哪裡跑 dy[i] = random(-1,+1);//dy = random(-1,+1); //亂數決定往哪裡跑 } } int N=40; float [] x = new float[N];//float x=250,y=250; float [] y = new float[N]; float [] dx = new float[N];//float dx=1,dy=1; 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]; } }什麼意思呢？float d = dist(x[i],y[i],x[k],y[k]); d 來記錄兩點的距離if(d<100) line(x[i],y[i],x[k],y[k]); 如果距離小於100 兩點就連線但連線的線條長怎樣呢？stroke(2.55*(100-d));之前說過 stroke(顏色) 是筆觸顏色計算： 2.55(255/100為了讓數值合理) * 100-d 如果兩點的距離是 1002.55*(100-100) = 0 線是黑的2.55*(100-0) = 255 線最白以此類推其他距離會呈現之間的顏色
不夠活潑，加點"吸引力"💾 程式碼存檔區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);//dx = random(-1,+1); //亂數決定往哪裡跑 dy[i] = random(-1,+1);//dy = random(-1,+1); //亂數決定往哪裡跑 } } int N=40; float [] x = new float[N];//float x=250,y=250; float [] y = new float[N]; float [] dx = new float[N];//float dx=1,dy=1; 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]; } }原先兩點間的線段比較生硬加一點"吸引力"讓彼此有個力互相靠近一些為什麼*0.00001？純粹是嘗試出來的結果，效果更好工具 > 色彩選擇器
好輕鬆就可以找到喜歡的顏色！
但是我們觀察一下 色彩選擇器裡的HSB
改變我們的寫法💾 程式碼存檔區void setup(){ size(500,500); colorMode(HSB,360,100,100); //H:0-360',S:0-100%,B:0-100% } void draw(){ background(frameCount%360,83,95); }H 色調 S 色彩飽和度 B 色彩亮度我們將色彩飽和度和色彩亮度固定使用 frameCount%360因為色調是0-359 這樣顏色就會變化輪播！
彩虹色彩呈現💾 程式碼存檔區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); } }因為 size 開 400,400所以 colorMode(HSB,400);不然呈現會出問題一直畫點 然後連線
模仿老師之前做的小遊戲運用HSB色彩模式💾 程式碼存檔區void setup(){ size(300,300); colorMode(HSB,360,100,100); chooseColor(); } float h,s,b; void chooseColor(){ h = random(360); s = random(100); b = random(100); } void draw(){ background(203,63,65); for(int i=0;i<5;i++){ for(int j=0;j<5;j++){ fill(h,s,b); ellipse(30+j*60,30+i*60,60,60); } } }每次按下去就會變顏色
因為色彩有時出現太暗
給亮度和飽和度限定值💾 程式碼存檔區void setup(){ size(300,300); colorMode(HSB,360,100,100); chooseColor(); } void mousePressed(){ chooseColor(); } float h,s,b; void chooseColor(){ h = random(360); s = random(50,100); b = random(50,100); } void draw(){ background(203,63,65); for(int i=0;i<5;i++){ for(int j=0;j<5;j++){ fill(h,s,b); ellipse(30+j*60,30+i*60,60,60); } } }滑鼠按下就會變色
有一個顏色和別人不一樣，點下去會變新的一組顏色💾 程式碼存檔區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(203,63,65); 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); } } }
沒有留言:
張貼留言