雪⛄互動技術概論筆記-W1

2022/09/05 Week01

用成github --> git gist

---> 靜態模式

1. 建立一個視窗

    size(500,500);   ///建立一個500*500的視窗

2. 視窗顏色

    background(#FAB428);   ///黃色

3. 填充顏色 + 在視窗顯示一個方形

    fill(#28E85F);   ///填充顏色: 綠色

    rect(100,100, 100,150);   ///在位置100,100的地方 畫出一個100*150的方形

---> 動態模式

4. 動態模式 + 滑鼠

    void setup(){

        size(500,500);

    }

    void draw(){

        background(#FAB428);

        fill(#28E85F);

        rect(100,100, 100,150);

        rect(mouseX,mouseY, 100,150);

    }

5. 用網頁開啟

5-1. 先將右上角Java 改成p5.js

5-2. 去 https://pde2js.herokuapp.com/ 將java程式碼改成p5.js

5-3. 貼到右上p5.js的那個視窗，按左上三角形，即可成功~

6. 做一個小畫家-1

    void setup(){

        size(500,500);

    }

    void draw(){

        if( mousePressed ){

            line(mouseX,mouseY, pmouseX,pmouseY);  ///pmouseX--> 畫滑鼠之前的座標

        }

    }

7. 做一個小畫家-2 加上畫筆可以改顏色

    void setup(){    ///只會執行一次

        size(500,500);

        background(#F0DAA5);

        stroke(255,0,0); ///筆觸->紅色

    }

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

        if( mousePressed ){

            line(mouseX,mouseY, pmouseX,pmouseY);

        }

    }

    void keyPressed(){///需切成英文輸入法

        if(key == '1') stroke(#FA0F0F);

        if(key == '2') stroke(#FAAC0F);

        if(key == '3') stroke(#F5FA0F);

        if(key == '4') stroke(#45FA0F);

        if(key == '5') stroke(#0FF4FA);

        if(key == '5') stroke(#B70FFA);

    }