ʕ •ᴥ•ʔ week01

2022互動技術筆記

Week01 2022-09-05
1. GitHub + Git for Windows
2. Processing 介面
3. 第一個程式: 點、線、面、色彩
4. 兩種模式: 直接跑 vs. 互動 (static vs. active)
5. 第一個互動程式: 小畫家
6. 將程式匯出到網頁

主題: 第一個程式: 點、線、面、色彩

1.預設視窗迷你小小的

2.如果想要調整字型大小: 檔案 > 偏好設定

3.調整視窗大小: size(500,500);

4.調整視窗顏色: background(#2286C6);
*工具>顏色選擇器，找到喜歡的顏色複製起來!!

5.畫一個矩形: rect(100,100, 100,150);

  在 100,100 的地方畫寬100，長150的矩形

6.幫小矩形填顏色: fill(#FFADE1);

  記得寫在rect之前

主題: 兩種模式: 直接跑 vs.互動 (static vs. active)

1.ctrl+N 開一個新的檔案

  第一個檔案做的是直接跑static，現在換作互動active

  加上 void setup(){} 和 void draw(){}

主題: 將程式匯出到網頁

1.裝好下載好這個p5.js，點他

2.會跳一個新的檔案出來，按執行會開啟一個空白的網頁

3.用電腦來翻譯java轉換成javascript: https://pde2js.herokuapp.com/

  將寫好的//active程式碼貼上左邊按藍色按鈕翻譯，右邊會出現翻譯好的

4.再將右邊的複製下來貼到新跳出來的p5.js，再按執行，

  跳出的網頁就有剛剛程式碼寫的內容了

主題: 第一個互動程式: 小畫家

1.這個低配小畫家太爛了，滑鼠到哪線就畫到哪

2.改良: 加上 if( mousePressed ){} 當按下滑鼠左鍵時才畫出來

3.可以對看不懂意思的保留字案右鍵>在參考文件裡找選取的字

4.開啟新的檔案，並複製剛剛的程式碼做修改

  加上背景色，筆觸顏色，用數字鍵來做互動