橘貓(互動技術筆記_week01)

 熟悉Processing環境

首先先下載課用軟體(軟體至moodle下載)

1. Processing 3.5.4 windows64 版 (解壓縮後, 再使用)

2. Git for Windows (安裝後就可以使用。在Chrome 裡先登入GitHub網站,才能用git上傳)

3. Arduino (開發 Arduino 軟體介面)

4. CH341SER.EXE (MakerUNO 需要的 USB Serial 驅動程式)

今日的基本程式碼

size(600,600);//視窗大小(寬,高)
background(#f08080);//背景顏色(16進位顏色)
line(x,y,x1,y1);//畫線(座標,座標1)

筆觸填色

stroke(R,G,B);//筆觸色彩(R,G,B)
strokeWeight(n);//筆觸粗細(粗細數字)
noStroke();//去除邊線(放在rect或ellipseg上可以畫出沒邊框的圖)
fill(R,G,B);//填滿顏色(R,G,B)

形狀

rect(100,100,400,400);//正方形(4個點)
ellipse(x,y,Wx,Hy);//圓型(圈圈座標x,y,寬x,高y)

開始實作

1.呆呆企鵝_框線板

程式碼:

size(600,600);

background(#f08080);

strokeWeight(5);

stroke(0,0,0);//筆觸色彩(RGB)

rect(100,100,400,400);//正方形

stroke(0,0,0);//筆觸色彩(RGB)

ellipse(200,200,60,60);//圓型

stroke(0,0,0);//筆觸色彩(RGB)

ellipse(400,200,60,60);

stroke(204,102,0);//筆觸色彩(RGB)

ellipse(300,300,300,100);

line(150,300,450,300);

2.呆呆企鵝_實心無線版

程式碼:

size(600,600);

background(#f08080);

fill(255);//填滿的

noStroke();//沒框線

rect(100,100,400,400);//正方形

//臉

stroke(128);

strokeWeight(5);//線寬度為5

ellipse(200,300,30,30);//左眼

ellipse(400,300,30,30);//右眼

noStroke();//沒框線

fill(#CC6600);

ellipse(300,400,200,100);//右眼

stroke(255);

line(200,400,400,400);//嘴巴

3.呆呆企鵝_眼睛跳動版

程式碼:

void setup(){

size(600,600);

}

void draw(){

background(#f08080);

fill(255);//填滿的

noStroke();//沒框線

rect(100,100,400,400);//正方形

//臉

stroke(128);

strokeWeight(5);//線寬度為5

ellipse(200,300,30,30);//左眼

ellipse(mouseX,mouseY,30,30);//右眼

noStroke();//沒框線

fill(#CC6600);

ellipse(300,400,200,100);//右眼

stroke(255);

line(200,400,400,400);//嘴巴

}

✨實作2跟3的差別✨

1.實作2沒有使用函數，直接畫圖的話background(#f08080);不會每次畫一個影格就更新一次，這裡需要格外注意，所以background(#f08080);需要被放在void draw(){}裡面。

2.特別的變數右眼的ellipse(mouseX,mouseY,30,30);裡面的mouseX與mouseY分別代表滑鼠的X與Y軸，所以移動滑鼠就可以動眼睛瞜~

存檔file->Safe As

🎃注意用英文和底線取名檔案較不會出問題厚厚厚🎅