Week 02

1. Processing 啟動

2. 試 for迴圈

    void setup(){
     size(600,400);
    }

    void draw(){
        for(int x=0;x<600;x+=100){
           for(int y=0;y<400;y+=100){
               rect(x,y,100,100);
           }
        }
    }

3. 試用 Processing-Help-Reference
3.1. 找 rect() 函式
3.2. 看看 rect() 樓上樓下的相關函式, 並嘗試畫出和老師不同的圖  [課堂作業1]

    void setup(){
         size(600,400);
    }

    void draw(){
        for(int x=0;x<600;x+=100){
            for(int y=0;y<400;y+=100){
                rect(x,y,100,100);
                triangle(15+x, 75+y, 50+x, 15+y, 86+x, 75+y);
                triangle(15+x, 30+y, 50+x, 90+y, 86+x, 30+y);
            }
        }
    }

4. 那想要改變顏色呢?

4.1. fill() 是填充的顏色, stroke()是筆的顏色
4.2. 透明的顏色(alpha),其實也是顏色(color) [課堂作業2]把你獨一無二的圖,加點不同的色彩吧

    void setup(){
         size(600,400);
    }

    void draw(){
        for(int x=0;x<600;x+=100){
            for(int y=0;y<400;y+=100){
                fill(255,100,0);
                rect(x,y,100,100);
                fill(255,200,0);
                triangle(15+x, 75+y, 50+x, 15+y, 86+x, 75+y);
                fill(255,255,0,125);
                triangle(15+x, 30+y, 50+x, 90+y, 86+x, 30+y);
            }
        }
    }

5. 加一點點滑鼠的互動吧! 可以使用 mouseX 及 mouseY 的值,來進行色彩繽紛的運算

    void setup(){
         size(600,400);
    }

    void draw(){
        for(int x=0;x<600;x+=100){
            for(int y=0;y<400;y+=100){  
                fill(190,247,189);         
                rect(x,y,100,100);
                //臉
                fill(255,60,60,dist(x,y,mouseX,mouseY)*2);
                ellipse(50+x, 60+y, 70, 70);
                //頭髮
                fill(50,50,50);
                ellipse(50+x, 15+y, 6, 22);
                ellipse(43+x, 18+y, 6, 18);
                ellipse(57+x, 18+y, 6, 18);
                //眉毛
                fill(0,0,0);
                triangle(25+x, 40+y, 20+x, 30+y, 50+x, 45+y);
                triangle(75+x, 40+y, 80+x, 30+y, 50+x, 45+y);
                //眼睛
                fill(255,255,255);
                ellipse(37+x, 55+y, 25, 25);
                ellipse(63+x, 55+y, 25, 25);
                fill(0,0,0);
                ellipse(40+x, 55+y, 10, 10);          
                ellipse(60+x, 55+y, 10, 10);
               //嘴
               fill(255,200,0);
               triangle(30+x, 80+y, 50+x, 70+y, 70+x, 80+y);
               triangle(40+x, 80+y, 50+x, 85+y, 60+x, 80+y);
            }
        }
    }

6. 亂數 random(數字上界) 來設定初始的亂數值 [課堂作業3] 利用mouseX,mouseY,random()做設計

    color [][] myColor = new color[6][4];
    void setup(){
         size(600,400);
         for(int x=0;x<600;x+=100){
             for(int y=0;y<400;y+=100){
                 myColor[x/100][y/100]=color(random(256),random(256),random(256));
             }
         }
    }
    void draw(){
        for(int x=0;x<600;x+=100){
            for(int y=0;y<400;y+=100){  
                fill(190,247,189);         
                rect(x,y,100,100);
                //臉
                fill(255,60,60,dist(x,y,mouseX,mouseY)*2);
                ellipse(50+x, 60+y, 70, 70);
                //頭髮
                fill(myColor[x/100][y/100]);
                ellipse(50+x, 15+y, 6, 22);
                ellipse(43+x, 18+y, 6, 18);
                ellipse(57+x, 18+y, 6, 18);
                //眉毛
                fill(0,0,0);
                triangle(25+x, 40+y, 20+x, 30+y, 50+x, 45+y);
                triangle(75+x, 40+y, 80+x, 30+y, 50+x, 45+y);
                //眼睛
                fill(255,255,255);
                ellipse(37+x, 55+y, 25, 25);
                ellipse(63+x, 55+y, 25, 25);
                fill(0,0,0);
                ellipse(40+x, 55+y, 10, 10);          
                ellipse(60+x, 55+y, 10, 10);
                //嘴
                fill(255,200,0);
                triangle(30+x, 80+y, 50+x, 70+y, 70+x, 80+y);
                triangle(40+x, 80+y, 50+x, 85+y, 60+x, 80+y);
            }
        }
    }
 [課堂作業4] 請大家寫一下到現在的心得 (ex. 速度, 內容, 想學的東西, 期待、希望、夢想..)