Ru的互動技術筆記💨

Step01

    1.解壓縮 processing-4.0b8-windows-x64 (壓縮檔)

        -完成後打開 processing 檔案

    2.檔案👉偏好設定：設定字體大小

        -size(500,500); 調整執行視窗大小

        -background(#CEA0CD); 改變視窗背景顏色 (紫色)

Step02

    1.填充色彩 (fill)、四邊形 (rect)

        -fill(#F5F092); (黃色)

        -rect(100,100,100,150);

    2.建立新檔

 ```processing

void setup(){

     size(500,500);

}

void draw(){

    background(#CEA0CD);

    fill(#F5F092);

    rect(100,100, 100,150);

    rect(mouseX,mouseY, 100,150);

}

```

    3.

        -把互動的程式 copy 到 Processing to P5.js 的網頁

        -原程式貼到左邊，翻譯到右邊，就可以拿來 p5.js 用

        -執行會跳出網頁

Step03

    1.製作一個簡易版的小畫家，控制滑鼠，畫出想要的圖案！

    2.按數字鍵改變畫筆顏色！

        - key == '1' //紫色

        - key == '2' //淺藍色

        - key == '3' //橘色