第二週 課堂作業

1. 用雙層 for迴圈畫正方形

void setup(){
  size(600,400);
}

void draw(){
  for(int x = 0 ; x < 600 ; x += 100){
    for(int y = 0 ; y < 400 ; y += 100){
      rect(x,y,100,100);
    }
  }

}

2. 用 Processing-Help-Reference 找 rect() 函式

 看看 rect() 樓上樓下的相關函式, 並嘗試畫出和老師不同的圖

  fill() 是填充的顏色, stroke()是筆的顏色

3.使用dist()涵式 
    離滑鼠越近，圓形越小，反之則否。
      fill(0, 255, 0,50);
      ellipse(x+51,y+51,dist(x,y,mouseX,mouseY)/10+90,dist(x,y,mouseX,mouseY)/10+90);

      離滑鼠越近，越透明

      fill(0, 255, 0,dist(x,y,mouseX,mouseY)*2);

      ellipse(x+51,y+51,90,90);

4.使用 random涵式
     宣告陣列,把顏色先存起來到陣列，固定顏色。

color [][] myColor = new color[6][4];//宣告24個陣列
//int [] array = new int [5]//Java-styel
//int array[5];//C-styel  

void setup(){
  size(600,400);
  for(int x = 0 ; x < 600 ; x += 100){
    for(int y = 0 ; y < 400 ; y += 100){
      //定義好陣列中24個位置的顏色
      myColor[x/100][y/100] = color(random(256), random(256), random(256) ); //用256不用255,是因為256以下的不包含256
    }
  }
}

void draw(){
  for(int x = 0 ; x < 600 ; x += 100){
    for(int y = 0 ; y < 400 ; y += 100){
      fill(255, 0, 0,50);// (r , g , b , alpha透明度) 

      rect(x,y,100,100);
   
      fill(myColor[x/100][y/100]); // 帶入陣列設好的顏色
      triangle(x, y+100,x+50, y, x+100, y+100);
   
      fill(0, 255, 0,dist(x,y,mouseX,mouseY)*2);
      ellipse(x+51,y+51,90,90); //畫圓形
   
    }
  }
}

5.課堂練習
上層綠色的圓形類似遮罩，移動滑鼠增加透明度後，就顯出下層的圖案

void setup() {
  size(600, 400);
}

void draw() {
  for (int x = 0 ; x < 600 ; x += 100) {
    for (int y = 0 ; y < 400 ; y += 100) {
      fill(183, 231, 240);// (r , g , b , alpha透明度) 
      rect(x, y, 100, 100);

      fill(0, 0, 255);
      ellipse(x+31, y+41, 20, 20); //畫圓形
     
      fill(0, 0, 255);
      ellipse(x+71, y+41, 20, 20); //畫圓形
     
      fill(255, 0, 0);
      rect(x+35, y+55, 30, 30 ,0 ,0 ,20 ,20); //rect(a, b, c, d, tl, tr, br, bl) 後四個是圓滑度
     
      fill(0, 255, 0, dist(x, y, mouseX, mouseY));
      ellipse(x+51, y+51, 90, 90); //畫圓形
    }
  }
}

6.課堂心得
老師上課的速度剛剛好，一步一步跟老師做都可以跟的上，也越來越了解processing的使用，希望之後能有更多應用，期末能有更多創新的想法。