2023互動技術: SangMo 互動技術 Week03

互動圖片

完成圖

Step 1 生成一個點
開啟Processing並打入下方程式

void setup(){
  size(500,500);
}
float x=250, y=250;
void draw(){
  ellipse(x, y, 5 , 5);
}

執行圖:

Step 2 讓點移動(dx+dy)並產生直線
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;
}
執行圖:

Step 2-1改背景顏色並把點直線去除
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;
}
執行圖:
Step 3-1 For迴圈+陣列
利用For迴圈和陣列特性把第二步的一個點複製出一堆
程式碼:
void setup(){
  size(500,500);
  for(int i=0;i<20;i++){ //設定for迴圈，20為點的最大值
  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];
  }
}
執行圖:


Step 4 點與點連接
for+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[]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];
  }
}
執行圖:
Step 5 增加更多點並改顏色
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;//用N控制點的數量
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];
  }
}
執行圖:

Step 5-1 增加attraction吸引力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.00003;///增加吸引力
      dy[i] += (y[k]-y[i])*0.00003;
    }
  }
  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];
  }
}
執行圖:

色彩系統
認識colorMode
void setup(){
  size(500,500);
  colorMode(HSB,360,100,100);
}

void draw(){
  background(frameCount%360,83,95);
} 利用frameCount執行後圖片會呈現各種顏色
加入stroke和point製造出彩虹圖
程式碼:
size(400,400);
noStroke();
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();
}
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);
    }
  }
}
執行圖:

加上mousePressed 就能用左鍵出現各種顏色
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(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);
    }
  }
}
///加上dh,ds,db 來控制有一個顏色跟其他不一樣
void setup(){
  size(300,300);
  colorMode(HSB,360,100,100);
  chooseColor();
}
void mousePressed(){
  chooseColor();
}
float 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);
    }
  }
}
執行圖: