對不起，我是你看不懂的點線面

夏洛：馬冬梅上課老嗑瓜子，影響我成績。

老師：就你這成績還能受影響？你的成績還有下降空間嗎？

——《夏洛特煩惱》

一幅繪畫作品能夠透射出畫者的內心世界,展示畫者的心情、心緒、心意、心跡、心性。

作　　者：傑克遜·波洛克 - Jackson Pollock

作品名稱：Convergence

繪畫的本身就是畫者傾訴情感的一種方式。好的作品通過線條、色彩等形象，傳達出畫者的情感,同時感染他人。

點、線、面是平面藝術造型中的三種基本形態，這三種形態各有不同的視覺效果和藝術表現力。記得這樣一句話，我喜歡畫點，因為我想孤獨；我喜歡畫線，因為我想纏綿；我喜歡畫面，因為我想寬容。

Processing提供了簡單易學的繪畫函數，你只需要敲擊幾行簡單的代碼就能創造出令人驚艷的作品。

4.1 基本圖形

4.1.1 Point

語法：

point(x, y) //平面坐標系point(x, y, z) //空間坐標系

That』s the point!

4.1.2 Line

語法：

line(x1, y1, x2, y2) //x1,y1確定起點，x2,y2確定終點line(x1, y1, z1, x2, y2, z2)

line(x1, y1, z1, x2, y2, z2)

康定斯基指出：「在幾何學上，線是一個看不見的實體，它是點在移動中留下的軌跡。因而它是由運動產生的，的確它是破壞點最終的靜止狀態而產生的，線因此是與基本的繪畫元素一點相對的結果，嚴格地說，它可以稱作第二元素。」

即使看似雜亂的線條也能給我們帶來視覺和心靈的感受。

We were part of a long line of artists!

4.1.3 Rectangle

模式：

rectMode(CORNER); //矩形單角模式，指定左上角坐標rectMode(CENTER); //矩形中心模式rectMode(CORNERS); //矩形雙角模式，指定左上角和右下角坐標

語法：

rect(a, b, c, d) //普通矩形rect(a, b, c, d, r) //圓角矩形rect(a, b, c, d, tl, tr, br, bl) //不規則圓角矩形

參數：

a float: x-coordinate of the rectangle by defaultb float: y-coordinate of the rectangle by defaultc float: width of the rectangle by defaultd float: height of the rectangle by defaultr float: radii for all four cornerstl float: radius for top-left cornertr float: radius for top-right cornerbr float: radius for bottom-right cornerbl float: radius for bottom-left corner

He handed me a little rectangle of white paper.

4.1.4 Ellipse

語法：

ellipse(a, b, c, d) //a,b確定圓心坐標；c,d決定橢圓寬、高

The Earth orbits in an ellipse.

4.1.5 Quadrangle

語法：

quad(x1, y1, x2, y2, x3, y3, x4, y4) //四個點的坐標

1

Pythagoras tree：

4.1.6 Triangle

語法：

triangle(x1, y1, x2, y2, x3, y3) //三個頂點的坐標

The classic triangle of husband, wife and mistress.

4.1.7 Arc

語法：

arc(a, b, c, d, start, stop) //start, stop：起始弧度和終止弧度

A rainbow arced gracefully over the town.

4.1.8 Bezier

語法：

bezier(x1, y1, x2, y2, x3, y3, x4, y4)bezier(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)

A single two-dimensional Bezier spline is defined by four points-two end points and two control points.

4.2 自定義圖形

① 繪製直線邊框：

beginShape(); //開始繪製自定義圖形vertex(x,y); //連接圖形的節點endShape(); //繪製自定義圖形結束，另：endShape(CLOSE)表示閉合圖形

② 繪製曲線邊框：

beginShape(); //圖形起始端點vertex(x,y); /cx1,cy1,cx2,cy2是曲線的兩個控制點的坐標。x,y是起始端點坐標bezierVertex(cx1,cy1,cx2,cy2,x,y);endShape();

4.3 Do It Yourself

「為什麼我們花了那麼多時間長大，卻只是為了分離？」

深林人不知，明月來相照。完整代碼：

/** * 卡通人物的繪製 * 歡迎關注Hewes的專欄 *///畫布大小size(300,300);//人物的繪製strokeWeight(3);ellipse(180,120,120,100);//包子line(100,100,125,140);ellipse(100,100,60,50);//眼睛的繪製fill(0,0,0);ellipse(158,105,15,15);ellipse(210,115,15,15);//繪製紅暈fill(255,193,193);stroke(255,193,193);ellipse(140,108,17,17);ellipse(210,135,17,17);//嘴巴fill(250,250,250);stroke(0,0,0);ellipse(175,120,15,20);ellipse(188,122,15,20);stroke(250,250,250);ellipse(185,112,30,20);//一些線條的繪製stroke(0,0,0);line(150,90,165,88);line(215,98,222,108);line(90,85,85,90);line(95,85,95,90);line(105,85,110,90);line(60,93,50,90);line(60,99,45,105);line(60,108,53,115);//桌台的繪製fill(250,250,250);stroke(0,0,0);rect(20,140,260,40);

最後，安利一下視覺設計大牛——郭銳文 Raven Kwok，本文部分圖片即來自其作品集。