week 10

Processing 變色圈圈

辦法一

size(300,500);

ellipse(50,200+50, 100,100);
ellipse(50+100,200+50,100,100);
ellipse(50+100+100,200+50,100,100);

ellipse(50,200+50+100, 100,100);
ellipse(50+100,200+50+100,100,100);
ellipse(50+100+100,200+50+100,100,100);

ellipse(50,200+50+100+100, 100,100);
ellipse(50+100,200+50+100+100,100,100);
ellipse(50+100+100,200+50+100+100,100,100);

辦法二 (使用 for 迴圈 )

size(300,500);
for(int y=0;y<3;y++){
  for(int x=0;x<3;x++){
    ellipse(50+x*100,200+50+y*100,100,100);
  }
}

當他變5*5

size(300,500);
int n=5;
int R=300/n, w=R/2;
for(int y=0;y<n;y++){
  for(int x=0;x<n;x++){
    ellipse(w+x*R,200+w+y*R,R,R);
  }
}

會變大的圈圈

void setup(){
size(300,500);
}
int n=3,RR=0;
void draw(){
  background(0);
  int R=300/n,w=R/2;
  for(int y=0;y<n;y++){
    for(int x=0;x<n;x++){
      ellipse(w+x*R,200+w+y*R,RR,RR);
  }
}
  if(RR<R) RR+=R/30;
  else{
    n++;
    RR=0;
  }
}

有變色且滑鼠滑入也變色的

void setup(){
size(300,500);
}
int ansX=1,ansY=2; 
int n=3,RR=0; 會變動的R直徑是RR
void draw(){
  background(0);
  int R=300/n,w=R/2;
  for(int y=0;y<n;y++){
    for(int x=0;x<n;x++){
      if(x==ansX && y==ansY) fill(128);答案要不同
      else fill(255);白色
      if( dist(mouseX,mouseY,w+x*R,200+w+y*R)<w)fill(255,0,0);
      ellipse(w+x*R,200+w+y*R,RR,RR); 從小變大
      因為寬度是300,有n個球去分,每個球分到直徑300/n 半徑300/n/2
  }
}
  if(RR<R) RR+=R/30;如果沒超過範圍, ++ 重小變到大

}

完成

點完會換色

void setup(){
  size(300,500);
  colorMode(HSB,256);改色彩系統
}
int ansX=1,ansY=2;
int n=3,RR=0;
int H=50; Hue色調 色相
void draw(){
  background(0);
  int R=300/n,w=R/2;
  for(int y=0;y<n;y++){
    for(int x=0;x<n;x++){
      if(x==ansX && y==ansY) fill(H-10, 243,234);
      else fill(H,255,255);
      if( dist(mouseX,mouseY,w+x*R,200+w+y*R)<w){
        if(mousePressed && x==ansX && y==ansY){
          ansX=int(random(n));
          ansY=int(random(n));
          H+=20;
          if(H>256)H=0;
        }
      }
      ellipse(w+x*R,200+w+y*R,RR,RR);
  }
}
  if(RR<R) RR+=R/30;

}