week 05

今天目標: 
(1) 會轉動的漂亮的花花, 
(2) 思考決定期中作品

1.首先先畫出簡易的花瓣~~

程式碼:


size(640,480); //建一個視窗

translate(300,200);

fill(255,0,232);
rotate(PI/18*1);//以畫面左上角為中心 開始旋轉
ellipse(0,0,40,200);//畫橢圓

rotate(PI/18*1);
ellipse(0,0,40,200);

rotate(PI/18*1);
ellipse(0,0,40,200);

2.將FOR迴圈加入之後 花瓣的繪製變得更簡單了

程式碼:
void setup() {
  size(640, 480); //建一個視窗
}

void draw() {
  translate(300, 200);//移動位置

  for (int i=0;i<18;i++) {
    fill(255, 0, 232);
    rotate(PI/18*1);//以畫面左上角為中心 開始旋轉
    ellipse(0, 0, 40, 200);//畫橢圓
  }

}

3.將MOUSEX MOUSEY的原理帶入 再利用MOUSECLICKED 點擊的功能

使程式可以做更多的事情 現在只要在螢幕上晃動 顏色會隨著滑鼠座標而改變

變得更淡還是更鮮豔 點擊則是會增加花瓣個數 點擊一下 就會增加一片

程式碼:

void setup() {

  size(640, 480); //建一個視窗

  colorMode(HSB, 480);

}

int flowerBan=8;

void draw() {

  translate(mouseX, mouseY);//移動位置

  fill(mouseX, mouseY, 480);

  for (int i=0;i<flowerBan;i++) {

    rotate(PI/flowerBan);//以畫面左上角為中心 開始旋轉

    ellipse(0, 0, 40, 200);//畫橢圓

  }

}

void mouseClicked(){

  flowerBan++;

}

4.繪製出真的花一朵~~然後把它跟憤怒鳥放在一起
這樣比較可愛
畫面會隨著你滑鼠的移動 而變色~~

程式碼:
PImage imgBird;
void setup() {
  size(640, 480); //建一個視窗
  colorMode(HSB, 480);
  imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
}
int flowerBan=8;
float r=0.01;
void draw() {
  background(125,mouseX*1/2,mouseY*1/3);
  image(imgBird, mouseX-50, mouseY-20, 200 ,200);
  translate(mouseX, mouseY);//移動位置
  rotate(r);
  r+=0.1;
  fill(mouseX, mouseY, 480);
  for (int i=0;i<flowerBan;i++) {
    rotate(PI/flowerBan);//以畫面左上角為中心 開始旋轉
    ellipse(0, 0, 40, 200);//畫橢圓
  }
  fill(mouseX,mouseY/3*1,480);
  ellipse(0,0,40,40);
}

5.可以用滑鼠按一下 就能做一朵花~~ 滑鼠移動會變色~
這裡利用了陣列~~
PImage imgBird;
int [] X=new int[100];
int [] Y=new int[100];
int N=0;
void setup() {
  size(640, 480); //建一個視窗
 // colorMode(HSB, 480);
  imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
}
float r=0;
void draw() {
  r+=0.01;
  background(0);
  image(imgBird, mouseX-50, mouseY-20, 200, 200);
  for(int i=0;i<N;i++)
  myFlower(X[i],Y[i]);
 
  myFlower(mouseX,mouseY);
}
void myFlower(int x, int y) {
  pushMatrix();
  translate(x, y);//移動位置
  rotate(r);
  for (int i=0;i<5;i++) {
    fill(mouseX, mouseY, 480);
    rotate(PI/20);//以畫面左上角為中心 開始旋轉
    ellipse(0, 0, 40, 200);//畫橢圓
  }
  fill(mouseX, mouseY/3*1, 480);
  ellipse(0, 0, 40, 40);
  popMatrix();
}
void mousePressed() {
  X[N]=mouseX;
  Y[N]=mouseY;
  N++;
  if (N>=100) N=0;
}

6.期中遊戲:破壞桌面~

利用課堂上製作小畫家的概念
繪製一張背景圖
可以選擇工具 來破壞那張背景圖
這個遊戲可以用來發洩情緒~~~

7.心得:
今天利用了很多FOR還有滑鼠控制
讓我越來越熟練這兩個的用途
利用滑鼠移動變顏色..等等
還學了旋轉 剛開始的時候還不太會用
現在有比較會了 調整速度 調整 旋轉角度
希望還可以再複習一次最後一次的動態陣列~~