Week02第二週課堂作業

1. Processing 啟動, 有問題的同學請再下載download
http://processing.org

2. 試 for迴圈

3. 試用 Processing-Help-Reference
3.1. 找 rect() 函式
3.2. 看看 rect() 樓上樓下的相關函式, 並嘗試畫出和老師不同的圖  [課堂作業1]

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);
      ellipse(x+50, y+50, 50, 50); //圓形
    }
  }

}

4. 那想要改變顏色呢?
4.1. fill() 是填充的顏色, stroke()是筆的顏色
4.2. 透明的顏色(alpha),其實也是顏色(color) [課堂作業2]把你獨一無二的圖,加點不同的色彩吧


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

void draw(){
  for(int x=0;x<600;x+=100){
    for(int y=0;y<400;y+=100){
      fill(0, 0, 255); //顏色
      rect(x,y,100,100); //方形
      fill(255, 0, 0, 128 //透明);
      ellipse(x+50, y+50, 50, 50); //圓形
      fill(0, 255, 0);
      triangle(x+50, y, x+50, y+50, x, y+50); //三角
    }
  }

}

5. 加一點點滑鼠的互動吧! 可以使用 mouseX 及 mouseY 的值,來進行色彩繽紛的運算


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

void draw(){
  for(int x=0;x<600;x+=100){
    for(int y=0;y<400;y+=100){
      fill(0, 0, 255);
      rect(x,y,100,100);
      fill(255, 0, 0, dist(x,y,mouseX, mouseY)*2); //dist
      ellipse(x+50, y+50, 50, 50);
      fill(0, 255, 0);
      triangle(x+50, y, x+50, y+50, x, y+50);
    }
  }

}

6. 亂數 random(數字上界) 來設定初始的亂數值 [課堂作業3] 利用mouseX,mouseY,random()做設計


color [][] myColor = new color[6][4]; //random
void setup(){
  size(600,400);
   for(int x=0;x<600;x+=100){
    for(int y=0;y<400;y+=100){
      myColor[x/100][y/100] = color(random(256), random(256), random(256)); //random
    }
   }
}

void draw(){
  for(int x=0;x<600;x+=100){
    for(int y=0;y<400;y+=100){
      fill(myColor[x/100][y/100]);
      rect(x,y,100,100);
      fill(255, 0, 0, dist(x,y,mouseX, mouseY)*2);
      ellipse(x+50, y+50, 50, 50);
      fill(0, 255, 0);
      triangle(x+50, y, x+50, y+50, x, y+50);
    }
  }

}

[課堂作業4] 請大家寫一下到現在的心得 (ex. 速度, 內容, 想學的東西, 期待、希望、夢想..)

上課的速度還OK，內容也不會太難導致跟不上。