UU_week02

 

2023/09/21

九二一大地震特別題目

1. 到中央氣象署得到地震波數值

[官網網址](https://gdms.cwa.gov.tw/index.php)

2. 開始記錄震動點座標

3. 開啟Processing

設一個陣列存放剛剛紀錄的座標, 接著設定視窗大小與背景, 畫出一個白色小方塊

float[] HLE = {-1.042, -3.4979, 1.0037, -1.6694, -1.6396, -14.219, -3.6551, -4.917, 9.3632, -4.2718, -0.02445};
void setup()
{
  size(500, 500);
}
void draw()
{
  background(#FFFFF2);
  rect(200, 200, 100, 100); // 在200, 200的地方畫出一個100x100的正方形
}

4. 改變x座標使方塊跟著陣列內的數字移動(震動)

float[] HLE = {-1.042, -3.4979, 1.0037, -1.6694, -1.6396, -14.219, -3.6551, -4.917, 9.3632, -4.2718, -0.02445};
int N = 11; // 有11個數字
void setup()
{
  size(500, 500);
  frameRate(10);
}
void draw()
{
  background(#FFFFF2);
  float dx = HLE[frameCount%N];
  rect(200+dx, 200, 100, 100); 
}

實際動得比較快>:)

5. 增加y軸座標(HLN(紅色的那張))

float[] HLE = {-1.042, -3.4979, 1.0037, -1.6694, -1.6396, -14.219, -3.6551, -4.917, 9.3632, -4.2718, -0.02445};
float[] HLN = {-17.09, -13.711, -22.888, -19.631, -23.818, -18.573, -19.636, -15,648, -18.256, -15.721, -17.776};
int N = 11; // 有11個數字
void setup()
{
  size(500, 500);
  frameRate(10);
}
void draw()
{
  background(#FFFFF2);
  float dx = HLE[frameCount%N];
  float dy = HLN[frameCount%N]/10; // 數字才不會太大, 不然方塊會飛走
  rect(200+dx, 200+dy, 100, 100); 
}

實際動得比較快>:)

顯示圖片

PImage img = loadImage("chair.jpg");
size(500, 500);
image(img, 0, 0);

要先把照片丟進程式中, 確定照片大小與設定視窗大小

互動圖片
> 圖片會依照 mouseX, mouseY 移動, 但目前會有殘影
PImage img;
void setup()
{
  size(600, 600);
  img = loadImage("chair.jpg");
}
void draw()
{
  image(img, mouseX, mouseY, 300, 300);
}

重疊圖片
> 準備兩張圖, 一張放中心, 一張根據滑鼠移動
PImage img, imgBox; // 定義兩張圖
void setup()
{
  size(600, 600); // 視窗大小為600x600
  img = loadImage("cookie.png");
  imgBox = loadImage("box.png");
}
void draw()
{
  imageMode(CENTER); // 放在滑鼠中心
  if (mousePressed){ // 當滑鼠按下時
    image(imgBox, mouseX, mouseY); // 圖片box會跟著滑鼠座標移動
  }else{ // 放開滑鼠時
    image(img, 300, 300, 220, 300); // 餅乾會以220x300出現在300x300處
  }
}