Week1_栗子的程式日記_我還想放暑假

 

Week01

1.1到moodle下載軟體是一定要的:)))

1.2  解壓縮後開啟，就會找回記憶了

1.3 調整偏好設定，不調等著眼睛瞎掉吧!

2.1可以開始寫程式，首先就是最簡單的淡黃色背景 以及 視窗(500*500)

    程式碼：

            size(500,500);

            background(#FAFC94);

2.2畫出一個小長方形

    程式碼：

            size(500,500);

            background(#FAFC94);

            fill(#94D0FC);

            rect(100,100, 100,150);    #(X,Y位置 , 長寬)

3.1第二堂課，讓靜態的變成動態的

        程式碼：

            void setup(){

                  size(500,500);

            }

            void draw(){

                  background(#FAFC94);

                  fill(#94D0FC);

                  rect(100,100,100,150);

                  rect(mouseX,mouseY,100,150);     #滑鼠到哪，方塊到哪

            }

3.2下載p5.js版本並使用

3.3因為原本是用類似C語言，必須轉換成另一種版本，網址：https://pde2js.herokuapp.com/

把上面的程式碼放入後，就可以轉換成js版本

3.4執行後，就會在網頁跑出來了

        程式碼：

            function setup() {

                initializeFields();

                createCanvas(500, 500);

            }

            function draw() {

                background(color(0xFA, 0xFC, 0x94));

                fill(color(0x94, 0xD0, 0xFC));

                rect(100, 100, 100, 150);

                rect(mouseX, mouseY, 100, 150);

            }

            function initializeFields() {

            }

3.5做出小畫家：

    程式碼：

        void setup(){

          size(500,500);

        }

        void draw(){

          if(mousePressed){

               line(mouseX,mouseY,pmouseX,pmouseY); 

         }

        }

3.6  進階:))

程式碼：

    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(#FA0834);

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

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

    }