wendy_week1

互動技術概論 學習日誌

week1

學習目標:

(一)圖形基本指令(線、矩形、橢圓形)

(二)Processing畫布座標

(三)小實作

語言 → Processing

下載網址  →  https://processing.org/download/

(一)圖形基本指令

線:

line(x1,y1,x2,y2);

矩形:

rect(x1,y1,h,w);

rect(x1,y1,h,w,圓半徑);

橢圓形:

ellipse(x,y,w,h);

畫布大小設定:

size(w,h);

背景顏色:

background(R,G,B);

background(H,S,B);

線框:

stroke(顏色);

填色:

fill(R,G,B);

fill(H,S,B);

(二)Processing畫布座標

(三)小實作

幾何圖形拼湊~~~

程式碼:

size(500,500);

background(#D1E9E9);

rectMode(CENTER);

fill(#81C0C0);

rect(250,250,200,200,18);

fill(#A3D1D1);

rect(350,80,100,100,18);

fill(#81C0C0);

rect(200,400,50,50,18);

fill(#81C0C0);

rect(280,420,30,30,18);

ellipseMode(CENTER);

fill(#84C1FF);

ellipse(250,250,80,80);

fill(#2894FF);

ellipse(280,280,50,50);

fill(#2894FF);

ellipse(180,410,20,20);

fill(#97CBFF);

ellipse(220,370,50,50);

fill(#BBFFFF);

ellipse(220,370,20,20);

fill(#97CBFF);

ellipse(310,130,50,50);

fill(#BBFFFF);

ellipse(310,130,20,20);

fill(#BBFFFF);

ellipse(50,250,50,50);

fill(#97CBFF);

ellipse(50,250,20,20);