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

> Date：2022/12/07

## 課前討論
作品分享
[Frank](https://openprocessing.org/sketch/1758067)
[Coco](https://openprocessing.org/sketch/929812)
[Peggy](https://openprocessing.org/sketch/1758029)
[Sandy](https://openprocessing.org/sketch/1171750)

待研究：pmouseX, pmouseY, dist 等

### 補充
[pmouseX](https://p5js.org/zh-Hans/reference/#/p5/pmouseX)
[其他同學互動藝術筆記](https://hackmd.io/@xuanming/ry_XyiJvK)

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

常見表現手法與組成元素：
- 韻律感
- 材質：光影、深度
- 軌跡
- 位置

IG 帳號推薦：
[Generative Hut](https://www.instagram.com/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);

## 範例
[圓形增長軌跡](https://openprocessing.org/sketch/1768318)

[方形漸變 1](https://openprocessing.org/sketch/1768322)

[方形漸變 2](https://openprocessing.org/sketch/1768332)

[三角形](https://openprocessing.org/sketch/1773822)

[ㄎㄧㄤ海星](https://openprocessing.org/sketch/1753917)