第五章：

1. week05_1_cwa_typhoon_images

1-1. 到老師的網站：https://github.com/jsyeh/cwa 下載壓縮檔

1-2. 打開後將 299 張圖片放到藍色框框內

1-3. 存檔後，按 Ctrl + K 開啟檔案總管，到 data 目錄確認檔案是否存在

1-4. 寫程式，並確認單張圖片是否能呈現

```
PImage img = loadImage("TWI_IR1_CR_800-2024-10-02-08-00.jpg"); //檔案名稱直接複製
size(800, 800);
background(img);
```

2. week05_2_cwa_typhoon_array_loadStrings

2-1. 將week05_1 另存新的檔案為 week05_2

2-2. 將老師給的 list.txt 檔案放到藍色框框內

2-3. 新增 + 修改程式碼：

```

int N = 299;

PImage [] imgs = new PImage[299];

void setup(){

    size(800, 800);

    //把 list.txt 的299行，放入 filenames 裡

    String [] filenams = loadStrings("list.txt");

  for(int i=0; i < N; i++){ //把每一張圖都讀近來

    imgs[i] = loadImage(filenames[i]);

  } //迴圈執行較久，因為圖檔多

}

void draw(){

  int i = frameCount % N; //照時間輪 % N 去取餘數，避免超過陣列

  background(img[i]); //現在要顯示第i張圖

}

```

⬆一開始的位置⬆

⬇隨著時間移動後的位置⬇

3. week05_3_cwa_typhoo_2750

3-1. 將老師給的新圖檔放進藍色框框內

3-2. 打開 Github 複製上週 week04_6 的部分程式碼

3-3. 新增 + 修改程式碼

```

PImage img;

void setup(){

  size(500, 500);

  img = loadImage("LCC_VIS_TRGB_2750-2024-10-02-07-40.jpg");

}

float s = 1.0, x = 0, y = 0;

float realX = 0, realY = 0;

void draw(){

  background(255); //白色背景

  translate(x, y);

  scale(s);

  image(img, 0, 0);

}

//借用上週 week04_6 的程式碼

void mouseDragged(){

  x += mouseX - pmouseX;

  y += mouseY - pmouseY;

}

void mouseWheel(MouseEvent e){

  realX = (mouseX - x)/s; //真實座標(mouseX) - 中心)/s

  realY = (mouseY - y)/s; //真實座標(mouseY) - 中心)/s

  float oldS = s;

  if(e.getCount() > 0) s *= 1.1;

  else s *= 0.9;

  x = x + realX*oldS - realX*s;

  y = y + realY*oldS - realY*s;

}

```

4. week05_4_pendulum_mouseDragged_x_y

4-1. 寫程式碼，畫出一個鐘擺

```

void setup(){

    size(400, 600);

}

float x = 200, y = 300;

void draw(){

    background(255);

    line(200, 100, x, y);

    ellipse(x, y, 30, 30);

}

```

5. week05_5_pendulum_cos_sin_draw_line

5-1. 複製 week 05_4 的程式碼

5-2. 新增 + 修改程式碼

```

void setup() {

  size(400, 600);

}

float x = 200, y = 300;

void draw() {

  background(255);

  stroke(0); //原來是黑色的線

  line(200, 100, x, y);

  ellipse(x, y, 30, 30);

  stroke(255, 0, 0); //紅色往左下的線

  line(x, y, x, y + 200);

  PVector d = new PVector(x - 200, y - 100).normalize();

  PVector d2 = new PVector(0, 1);

  float g = PVector.dot(d, d2);

  d.mult(100*g);

  stroke(0, 255, 0); //綠色往左下的線

  line(x, y, x + d.x, y + d.y);

}

void mouseDragged() {

  x = mouseX;

  y = mouseY;

}

```

6. week05_6_PVector_new_PVector_x_y

6-1. 新增 + 修改程式碼

```

void setup(){

  size(400, 600);

  c = new PVector(200, 100); //NEW出新的物件

  p = new PVector(200, 130); //NEW出新的物件

}

PVector c, p;

void draw(){

  background(255);

  ellipse(c.x, c.y, 10, 10); //使用物件的 c.x

  ellipse(p.x, p.y, 10, 10);

}

```

7. week05_7_pendulum_PVector_normalize_dot_mult

7-1. 新增 + 修改程式碼

```

void setup() {

    size(400, 600);

}

float x = 200, y = 300;

void draw() {

    background(255);

    stroke(0); //原本是黑色的線

    line(200, 100, x, y);

    ellipse(x, y, 30, 30);

    stroke(255, 0, 0); //紅色往左下的線

    line(x, y, x, y + 100);

      

    PVector d = new PVector(x - 200, y - 100).normalize(); //長度1

    PVector d2 = new PVector(0, 1);

    float g = PVector.dot(d, d2); //cos(a)

    d.mult(100*g);

    stroke(0, 255, 0); //綠色往左下的線

    line(x, y, x + d.x, y + d.y);

    PVector N = new PVector(d.y, -d.x).normalize(); //長度1

    N.mult(100*sin(acos(g))); //g 是 cos(a), acos(g) 就是角度 a

    stroke(0, 0, 255); //藍色線往右下

    line(x, y, x + N.x, y + N.y);

}

void mouseDragged() {

    x = mouseX;

    y = mouseY;

}

```

week05_8_pendulum_not_OK_PVector_sub_velocity

8-1. 新增 + 修改程式碼

```

void setup() {

    size(400, 600);

}

float x = 200, y = 300;

void draw() {

    background(255);

    stroke(0); //原本是黑色的線

    line(200, 100, x, y);

    ellipse(x, y, 30, 30);

    stroke(255, 0, 0); //紅色往左下的線

    line(x, y, x, y + 100);

  

    PVector d = new PVector(x - 200, y - 100).normalize(); //長度1

    PVector d2 = new PVector(0, 1);

    float g = PVector.dot(d, d2); //cos(a)

    d.mult(100*g);

    stroke(0, 255, 0); //綠色往左下的線

    line(x, y, x + d.x, y + d.y);

  //錯誤的：PVector N = new PVector(d.y, -d.x).normalize(); //長度1

    PVector N = PVector.sub(d2.mult(100), d);

  //錯誤的：N.mult(100*sin(acos(g))); //g 是 cos(a), acos(g) 就是角度 a

    stroke(0, 0, 255); //藍色線往右下

    line(x, y, x + N.x, y + N.y);

  

    v.x += N.x/1000;

    v.y += N.y/1000;

    x += v.x;

    y += v.y;

}

PVector v = new PVector(); //球的速度值，一開始為0

void mouseDragged() {

    x = mouseX;

    y = mouseY;

}

```