XX - Week03

=========================================================================

 THIRD

今天要做出點線面組成的小動畫、顏色的小遊戲

1.先設出點線面(此時的點會自己移動)

//點線面
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;
}

2.執行結果是由很多的點組成的線

3.加上random讓點自己亂跑

4.點會自行移動且會碰撞反彈

5.將陣列跟迴圈用上，就會有非常多的點

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

6.執行結果會是非常多的點在移動並且會碰撞反彈牆壁

7.多加stroke並且使用if來判斷點跟點之間距離近的話就連線

    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]);
    }

8.執行結果就是點跟點之間會用紅線連結

9.將數字20改成N，只要調整N的數值就可以增加點的數量。要將線條變成白色，stroke值做改變，並且將dist距離值換成簡單的變數名稱

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

10.執行結果，點線會變多

11.加一點點吸引力，讓點跟點之間的線會有種被牽引住的感覺

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]);
        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];
  }
}

12.執行結果

13.從工具選項叫出色彩選擇器選擇想要的背景顏色

14.變成綠色了!

15.將色彩改為HSB，並且用frameCount讓背景能夠變換顏色

void setup(){
  size(500,500);
  colorMode(HSB, 360, 100, 100); 
  //H:0-360,  S:0-100%,  B:0-100%
}

void draw(){
  background(frameCount%360,63,99);
}

16.執行出來就會是彩色的，是動畫，慢慢漸變的顏色

17.現在要直接呈現出漸變顏色，stroke的飽和度、亮度調成最大(可以自行調整數值)

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);
  }
}

18.執行結果就會是飽和度、亮度最大的樣子

19.現在要做出一個簡易的顏色小遊戲，先畫出幾個簡單的小圓圈

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(50,21,99);
  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);
    }
  }
}

20.加上滑鼠控制，就能夠改變顏色

void mousePressed(){
  chooseColor();
}

21.加上一些變數讓其中一個圓圈的顏色能夠不一樣

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(50,21,99);
  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);
    }
  }
}