week10

畫了四個圓形整齊的排放在一起

程式碼:

size(300,500);
ellipse(75,200+75,150,150);
ellipse(75+150,200+75,150,150);
ellipse(75,200+75+150,150,150);
ellipse(75+150,200+75+150,150,150);

畫了3x3的圓，沒什麼好講的

程式碼:

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

用迴圈的方法來畫出3x3的圓，這樣能讓程式碼簡化許多

程式碼:

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);
  }
}
我們找到它的規律之後，就可以再將for迴圈簡化，只需要更改想要畫出來的圓的數量就可以了

程式碼:

size(300,500);
int n=6;
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=6;
int R=300/n, w=R/2,RR=0;
void draw(){
  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++;
}
修改程式碼，讓圓變大的速度能夠變得一樣快，而且讓程式能夠讓程式每畫完一次就能畫更多的圓

程式碼:
void setup(){
  size(300,500);
}
int n=2,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;
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);
    }
  }
  if(RR<R)RR+=R/30;
}
和遊戲一樣，當按到正確答案的時候就能夠讓他換位置，而這個位置是亂數決定的，為了增加遊戲的難度，把顏色弄得很接近。並且，只有當滑鼠按下去的時候才會有反應

程式碼:
void setup(){
  size(300,500);
}
int ansX=1,ansY=2;
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++){
      if(x==ansX&y==ansY)fill(240);
      else fill(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));
       }
      }
      ellipse(w+x*R,200+w+y*R,RR,RR);
    }
  }
  if(RR<R)RR+=R/30;
}
最後完成的結果，把球用colorMode給填充顏色之後就可以了

程式碼:
void setup() {
  size(300, 500);
  colorMode(HSB, 256);
}
int ansX=1, ansY=2;
int n=3, RR=0;
int H=220;
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;
}