XX - Week02

=========================================================================

SECOND

這堂課因應921大地震所以要使用地震的數值來做波形圖、利用圖檔跟移動做出有趣的效果

1.先用size、background、rect將基礎用好，並將波型資料放到HLE之中

2.會畫出一個小方格

3.加上能夠做移動的程式碼

float [] HLE={-1042, -3479.7, 1003.7, -1669, -1639.6, -14219, -3655.1, -4917, 9363.2, -4271.8, -24, 681};
int N=12;
void setup(){
  size(500,500);
}
void draw(){
  background(#FFFFF2);
  float dx = HLE[frameCount%N]/100;
  rect(200+dx, 200, 100, 100);
}

4.在執行過後就會看到晃動的樣子了(模擬地震的晃動)

5.再加上另一筆資料，並再加一個dy來去做不同方向的移動

6.這次執行結果移動的幅度跟位子就會變得更大

7.開一個新檔案，要將圖片讀進去，記得要將圖片直接拉進去程式碼裡面

如果圖片太大太小，可以再加上兩個數值去固定圖片的大小

image(img, 0, 0, 300, 300);

8.按下執行之後就會顯示圖片

9.用另一個讀圖檔的方式，並且讓他能夠移動

PImage img;
void setup(){
  size(600,600);
  img = loadImage("chair.jpg");
}

void draw(){
  image(img , mouseX, mouseY, 300, 300);
}

10.執行畫面

11.將程式碼改為圖中的程式碼就可以讀入兩個圖檔，並讓其中一個圖能夠移動

PImage img,imgBox;
void setup(){
  size(600,600);
  img = loadImage("princess.png");
  imgBox = loadImage("box.png");
}

void draw(){
  imageMode(CENTER);
  if(mousePressed){
    image(imgBox, mouseX, mouseY);
  }else{
    image(img , 300, 300, 200, 300);
  }
}

12.執行出來的結果就會像是仙杜瑞拉走下樓梯的感覺