達yo - week03

今天要做出會動的點線面(processing書本的封面) 

1.1

做出一個圓點

再來做出會改變座標的原點

讓圓點隨機跑到任何一個位置(將dx,dy設成亂數)

雖然可以隨便跑，但碰到邊邊會直接消失，為了解決這問題

加了兩行程式碼

  if(x<0 || x>500) dx = -dx;
  if(y<0 || y>500) dy = -dy;

在執行畫面中增加很多個圓點

所以使用了for迴圈

設一個變數i，使畫面出現的圓點最多20個(位置都隨機)

畫出線

*dist是指距離

要讓每個圓點彼此有線的連接

並會消失和出現

2.1

將點的數量增加，所以設一個新的變數N

讓線的顏色有亮暗的變化

設一個變數d，控制出現的線

d如果大於100，線就消失

(stroke是顏色的部分，255表示很亮，0就是黑色)

讓點跟點之間多一點吸引力

程式碼

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=45;
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];
  }
}

3.1色彩

改用HSB來設定顏色

選好一個顏色後，讓顏色依360度的範圍跑一次
S和B不改變

background(frameCount%360,60,85);

colorMode HSB stroke point的結合

橘色框框框起來的是代表顏色的飽和度

3.2
做出有一堆圈圈但其中一個顏色長得跟別人不一樣的程式

先做出圈圈出來
填上顏色
增加滑鼠按下去顏色就改變的程式碼

為了讓顏色看起來不要太暗沉，修改s跟b的數值

最終執行畫面

程式碼
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(210,28,88);//背景顏色
  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);
   }
  }
}