RH week1

(一) 基礎設定

 1.先點開processing

2.新手教學點x

3.改偏好設定的字型大小

(二)顏色選擇

1.工具/顏色選擇器

size(500,500); 是視窗大小

2.選擇一個喜歡的顏色後按複製

3.新增一個長方形並插入顏色

rect(100,100,100,150);

前面兩個數值是座標

後面兩個數值是長和寬

fill(插入的顏色);

(三)兩種模式:直接跑v.s互動(static v.s active)

1.寫一個互動模式的程式

active程式碼

```c

void setup(){

  size(500,500);

}

void draw(){

  background(#DEE898);

  fill(#BA11EA);

  rect(100,100,100,150);

  rect(mouseX,mouseY,100,150);    ///滑鼠移動方塊

}

```

2.點擊右上角的按鈕Manage Modes，下載p5.js

3.把互動的程式碼貼到processing to p5.js的網頁；貼到左邊，翻譯到右邊

執行後會跳出網頁

網址:https://pde2js.herokuapp.com/

(四)第一個互動程式-小畫家

1.程式碼

```c

void setup(){

  size(500,500);

}

void draw(){

  if(mousePressed){

    line(mouseX,mouseY,pmouseX,pmouseY);    ///畫線

  }

}

```

2.進階版小畫家，調整顏色

```c

void setup(){

  size(500,500);

  background(#CAD677);    ///背景顏色

  stroke(255,0,0);      ///筆觸

}

void draw(){    ///每秒60次

  if(mousePressed){

    line(mouseX,mouseY,pmouseX,pmouseY);

  }

}

void keyPressed(){    ///如果按下顏色

  if(key== '1')  stroke(#484B38);

  if(key== '2')  stroke(#471A6C);

  if(key== '3')  stroke(#129FE3);

}

```

3.利用Processing to p5 轉換成網站