Week_01 2022.09.05

 

1. 建置環境

    (1) 桌面 > 葉正聖老師上課軟體 > Processing > 7.zip解壓縮

    (2) 更改字體大小 > 試著開一次畫面

    (3) 設定背景色

2. 畫形狀

    (1) 靜態模式

            void setup()

            {

                size(500,500);

            }

    (2) 動態模式

            void draw()

            {

                  background(#73E68C);

                  fill(#F5FFFA);

                  rect(100,100,100,150);　　長方形（X位置 , Y位置 , 長 , 寬）

                  rect(mouseX,mouseY,100,150);

            }

3. 設定 p5.js 

    (1) 點右上角 Java > Manage...

    (2) 下載 p5 .... 

    (3) 完成後打開視窗 > 打上程式碼

            ！！！不可以直接複製！！！

            因為語言不同要透過網頁轉換

            （https://pde2js.herokuapp.com/）

    (4) 複製轉換後的程式碼

    (5) 執行！ > 會跳出網頁喔

4. 鼠圖（用滑鼠畫的圖）

    (1) 程式碼（含解說）

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

            {   

                size(500,500);   ///畫面大小

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

                stroke(255,0,0);   ///畫筆顏色

            }

            void draw()　　///每秒60次

            {   

                if(mousePressed)

                {

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

                }

            }

            void keyPressed()

            {

                if (key == '1' ) stroke(#4682B4);

                if (key == '2' ) stroke(#6A5ACD);

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

            }

            github

        -------------------------------------------------------------------------