第三章

1. week03_1_PImage_loadImage_image

1-1. 從網路上下載一張圖片，並改檔名(ex: Holo.jpg)

Ps. 要把副檔名打開才會顯示.jpg

1-2. 寫程式碼

```
PImage img = loadImage("Holo.jpg");
size(474, 670); //因圖片大小是474 * 670，所以開474 * 600
image(img, 0, 0);
```

1-3. 將圖片拉到程式內，執行時才能找到圖片

2. week03_2_void_setup_void_draw_fill_rect

2-1. 將 week03_1 的程式另存新檔

2-2. 新增程式碼

```
PImage img;
void setup(){
    size(474, 670);
    img = loadImage("Holo.jpg");
}
void draw(){
    image(img, 0, 0);
    noStroke(); //不要有框線

    fill(255, 0, 0, 100);
    rect(mouseX, mouseY, 70, 50);
}

```

3.week03_3_arufa_rect_rect_rect

3-1. 將 week03_2 的程式另存新檔

3-2. 新增程式碼

```

void draw(){

  noCursor(); //不要有鼠標

  fill(255, 0, 0, 100); 

  rect(mouseX, mouseY, 20, 20);

  rect(mouseX-10, mouseY-10, 20, 20);

  rect(mouseX-20, mouseY, 20, 20);

  rect(mouseX-10, mouseY+10, 20, 20);

}

```

4. week03_4_arufa_for_for_rect

4-1. 將 week03_3 的程式另存新檔

4-2. 修改程式碼

```

void draw(){

  rect(mouseX, mouseY, 20, 20);

  rect(mouseX-10, mouseY-10, 20, 20);

  rect(mouseX-20, mouseY, 20, 20);

  rect(mouseX-10, mouseY+10, 20, 20);

}

```

⬇

```

void draw(){

    for (int i = 1; i <= 4; i++) {
        for (int j = 0; j < i; j++) {
            float y = i*40, x = -i/2*60 + j*60 + ((i%2 == 0)?30:0);
            rect(mouseX + x, mouseY - 80 + y, 70, 50);
        }

    }
    for (int i = 3; i >= 1; i++) {
        for (int j = 0; j < i; j++) {
            float y = (4 - i)*40 + 160, x = -i/2*60 + ((i%2 == 0)?30:0);
            rect(mouseX + x, mouseY - 80 + y, 70, 50);
        }
    }

}

```

5-1. week03_5_go_for_line_line & week03_5_go_for_rect

5-1-1. 利用線條來畫棋盤

```

size(450, 450);

background(220, 179, 92);

strokeWeight(2);

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

    line(25, 25 + i*50, 425,  25 + i*50);

    line(25 + i*50, 25, 25 + i*50, 425);

}

```

5-2-1. 利用方格來畫棋盤 (for 迴圈)

5-2-2. 複製剛剛的程式碼並修改

```

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

    line(25, 25 + i*50, 425,  25 + i*50);

    line(25 + i*50, 25, 25 + i*50, 425);

}

```

⬇

```

noFill();

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

    for (int j = 0; j < 8; j++) {

        rect(25 + j*50, 25 + i*50, 50, 50);

    }

}

```

6. week03_6_go_void_setup_void_draw_ellipse_mouseX_mouseY

6-1. 複製 week03_5_1 的程式碼

6-2. 新增程式碼

```

void draw(){

    ellipse(mouseX, mouseY, 45, 45);

}

```

7.week03_7_go_board_2d_array_void_mousePressed_board_i_j

7-1. 複製 week03_6 的程式碼

7-2. 新增程式碼

```

int [][] board = new int[9][9];

void setup() {

  size(450, 450);

}

void draw() {

  background(220, 179, 92);

  strokeWeight(2);

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

    line(25, 25 + i*50, 425, 25 + i*50);

    line(25 + i*50, 25, 25 + i*50, 425);

  }

  

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

    for (int j = 0; j < 9; j++) {

      if (board[i][j] == 1) ellipse(25 + j*50, 25 + i*50, 45, 45);

    }

  }

  ellipse(mouseX, mouseY, 45, 45);

}

void mousePressed() {

  int i = mouseY/50, j = mouseX/50;

  board[i][j] = 1;

}

8. week03_8_go_goColor_black_white

8-1. 複製 week03_7 的程式碼並新增程式碼

int goColor = -1; //-1:黑 +1:白 0:沒有棋

int [][] board = new int[9][9]; //Jave 2D陣列，預設為0

void setup() {

  size(450, 450);

}

void draw() {

  background(220, 179, 92);

  strokeWeight(2);

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

    line(25, 25 + i*50, 425, 25 + i*50);

    line(25 + i*50, 25, 25 + i*50, 425);

  }

  

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

    for(int j = 0; j < 9; j++) {

      if(board[i][j] ==0 ) continue; //不要畫

      if(board[i][j] == 1) fill(255);

      if(board[i][j] == -1) fill(0);

      ellipse(25 + j*50, 25 + i*50, 45, 45);

    }

  }

  if(goColor == -1) fill(0);

  else fill(255);

  ellipse(mouseX, mouseY, 45, 45);

}

void mousePressed() {

  int i = mouseY/50, j = mouseX/50;

  board[i][j] = goColor; //-1:黑 +1:白色

  goColor = goColor*-1;

}

9. week03_9_arufa_array_for

9-1. 複製 week03_3 的程式碼並修改

新增

```

int []boardX = {0, -30, +30, +60, 0, -60, -90, -30, +30, +90, +60, 0, -60, -30, +30, 0};

int []boardY = {-80, -40, -40, 0, 0, 0, +40, +40, +40, +40, +80, +80, +80, +120, +120, +160};

```

修改

```

void draw(){

  rect(mouseX, mouseY, 20, 20);

  rect(mouseX-10, mouseY-10, 20, 20);

  rect(mouseX-20, mouseY, 20, 20);

  rect(mouseX-10, mouseY+10, 20, 20);

}

```

⬇

```

void draw(){

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

    rect(mouseX + boardX[i], mouseY + boardY[i], 70, 50);

}

```