第 3 章 【 基礎繪製與色彩 】從點線面到塗鴉

Date：2022/12/07

課前討論

作品分享
Frank
Coco
Peggy
Sandy

待研究：pmouseX, pmouseY, dist 等

補充

pmouseX
其他同學互動藝術筆記

課程概念

圖形的組成：幾何抽象主義
用簡單的幾何形狀，以設定的規律重複，就會很有藝術感

常見表現手法與組成元素：

• 韻律感
• 材質：光影、深度
• 軌跡
• 位置

IG 帳號推薦：
Generative Hut

填色

不填色

noFill();

顏色漸變

fill(frameCount);
fill(frameCount * 3);

方形定位點 rectMode(定位點)

因為圓形定位點是對圓心，方形是對左上角，藉由 rectMode(CENTER) 來把方形定位點改為「中心」

在製作筆刷時，定位點調成 CENTER 更像筆刷

框線粗度 strokeWeight(數值)

strokeWeight(5);

// 奇數偶數粗度變化
strokeWeight(frameCount % 2 == 0 ?5:1);

文字

應用：顯示滑鼠距離數值

text(int(mouseX) + " , " + int(mouseY), 50, 50);

textSize(50);

三角形 triangle()

triangle(30, 75, 58, 20, 86, 75)

多角形

vertex 尖尖的連線
curveVertex 圓圓的連線

beginShape()
	vertex(440+mouseX/5, 160+mouseY/5);
	vertex(360, 360);
	vertex(160, 400);
	vertex(350, 500);
	vertex(320, 700);
	vertex(width/2, 500);
	vertex(570, 700);
	vertex(500, 460);	
	vertex(670, 400);
	vertex(480, 360);	
endShape(CLOSE)

隨機 random(最小值, 最大值)

random(-10, 10);

範例

圓形增長軌跡

方形漸變 1

方形漸變 2

三角形

ㄎㄧㄤ海星