Week01 阿噗神奇小筆記-分流Bad!

口愛小藍方企鵝🐧

(  rect(),ellipse(),stroke(),noStrok(),strokeWeight(),fill(),mouseX,mouseY  )

第一堂見到久違的小葉~💓

熟悉的聲音最對味~💓

今日課程大綱:

1.下載processing-3.5.4-windows64.zi  (moodle裡)

    1.1 Processing的一些小功能

2.做出企鵝

    1.1 視窗大小及背景顏色🌒

     1.2 方塊與圓型與橢圓🌓

     1.3 填滿顏色與筆觸顏色及大小🌔

     1.4 做出口愛小藍方企鵝🌕

3.使用滑鼠來互動

     1.1 使用mouseX，mouseY

    

=========================筆記開始=========================

💛先至moodle互動技術概論的上課用軟體下載檔案

💛下載完後會有此軟體，就是它!!

💛首先先來介紹Processing的一些小功能

    (1)只要按Ctrl+N就可以開新檔(但大家應該都知道💩)

    (2)色票功能(我好喜歡這個功能，很方便!!)

    (3)調字體大小及字型，還有可以寫中文的功能(在偏好設定)

💚以下開始做一些小視窗

(🌝月亮進度顯示圖)

🌒(1)視窗大小及背景顏色

size(600,600);//(1) 大小

background(#95CBE3);

🌒(2)加入裡面的方塊，及一隻眼睛

rect(100,100 ,400,400); //方塊

ellipse(200,300, 30,30); //圓(位置，大小) 

🌓(3)開始做出像企鵝的樣子了!(改成藍色企鵝)

ellipse(300,400, 200,100);//橢圓

line(200,400, 400,400);//線條

🌔(4)開始圖色做美觀

以下附程式碼:

//第一個視窗

size(600,600);//(1) 大小

background(#95CBE3);

//身體

noStroke();//不要筆觸色

rect(100,100 ,400,400); //(3)方塊

//雙眼

stroke(#95CBE3);//筆觸顏色

strokeWeight(4);//筆觸大小

ellipse(200,300, 30,30); //(4)圓(位置，大小) 

ellipse(400,300, 30,30); //(4)圓(位置，大小)

//嘴巴

noStroke();//不要筆觸色

fill(#FA7A3F);//填充色

ellipse(300,400, 200,100);//橢圓

//嘴巴中間線條

stroke(255);//筆觸顏色

line(200,400, 400,400);

======================================================================

🌕第一個課堂作業完成

口愛小藍方企鵝🐧

======================================================================

💜接下來做互動小畫面

1.使用滑鼠控制一隻眼睛

使用函式:

void setup(){}

void draw(){}

變數:mouseX,mouseY

下面有完整程式碼

void setup(){
    size(600,600);//(1) 大小
}
void draw(){
    background(#95CBE3);
    
    //身體
    fill(255);noStroke();//不要筆觸色
    rect(100,100 ,400,400); //(3)方塊
    
    //雙眼
    stroke(#95CBE3);//筆觸顏色
    strokeWeight(4);//筆觸大小
    ellipse(mouseX,mouseY, 30,30); //(4)圓(位置，大小) 變數:滑鼠控制
    ellipse(400,300, 30,30); //(4)圓(位置，大小)
    
    //嘴巴
    noStroke();//不要筆觸色
    fill(#FA7A3F);//填充色
    ellipse(300,400, 200,100);//橢圓
    
    //嘴巴中間線條
    stroke(255);//筆觸顏色
    line(200,400, 400,400);
}

完成!!

p.s

學校的分流制度超級爛呦~

害我這個通勤生要來回奔波😊