手繪與碼繪靜態對比

前言

在互動媒體的課程上，我了解了P5.js這項技術，并且學會了運用它進行簡單的網頁繪圖。可能有很多人認為，繪畫是一種藝術形式，必須要拿起畫筆才能產生好的作品，而代碼聽起來和繪畫毫無關系，代碼寫出來的圖案又怎么能吸引人呢？所以現在我想對手繪和碼繪產生的靜態圖片來進行對比，分析兩者的優劣之處。

流程目錄

1.手繪內容
2.碼繪內容
2.1.編寫過程
2.2.最終結果
3.手繪與碼繪對比
4.完整代碼

手繪內容

因為接觸P5也沒有多久，第一次不打算嘗試太復雜的圖案，于是相應的手繪也比較簡單，我就用水筆簡單畫了一個Q版小人。為了方便用代碼畫出她，我手繪時用的也只是一些多邊形，橢圓等基本圖形。

碼繪內容

編寫過程

首先我們來介紹P5.js的基本構架：setup和draw函數，setup函數用來生成畫布，而draw函數則用來在畫布上繪畫。來看一段基礎代碼：

function setup() {// put setup code herecreateCanvas(640,480); } function draw() {background(221,160,221);}

效果：

這樣我們就生成了一個長640，寬480的畫布并給它賦予了顏色。
P5.js中可以根據RGB數值來給背景，線條，圖形指定不同顏色，接下來對這一類代碼的解釋會放在碼繪過程中。

在碼繪最開始，我們要找到手繪小人身上比較直觀的基本圖形，即各種各樣的多邊形和不同的圓形，P5并沒有直接生成多邊形的代碼，所以我們先來畫圓，小人的身體由圓形（包括橢圓）組成的部分有臉部，衣服的袖子和雙手。
P5自帶的畫圓函數是ellipse(x,y,r1,r2)，x和y指定圓心坐標，r1和r2指定橢圓的長寬，繪制時注意先后順序，后寫的代碼會覆蓋前面的代碼。

完成臉部和手之后，我們來考慮要如何畫出頭發和衣服那樣的多邊形，我在搜索一番之后發現P5可以繪制“自定義圖形”，即根據指定點連接線段，代碼如下：

fill(90,10,90);beginShape();vertex(270, 110);vertex(290, 140);vertex(315, 135);vertex(310, 100);endShape(CLOSE);

endShape(CLOSE)意味著它會幫你自動連接第一個和最后一個點，fill則指定了圖形的填充顏色。
多次重復運用這個方法，我們就可以構造出小人的基本形狀：

雖然有些圖形鋸齒看起來非常違和，也有自定義圖形覆蓋不到位的問題，但是基本上已經畫出了小人的頭發，腿部和衣物。

剩下的部分就是光環，眼睛和紅暈等點綴部分，運用上面講的橢圓畫法和自定義圖形就可以輕松實現啦。
順帶一提，光環部分可以用線條來代替圖形：

stroke(255,250,165); strokeWeight(3); noFill();

這三行代碼就可以指定一個沒有填充，寬度為3且有顏色的線條樣式。

最終結果

最終實現的小人已經成功還原了手繪圖像， 相比黑白手繪還增添了很多色彩：

這里給出踏得網的代碼鏈接，可以自己嘗試修改：
http://wow.techbrood.com/fiddle/42530

手繪與碼繪對比

經過這次嘗試，我總結出了手繪和碼繪的一些不同：
一.思路
編程作圖時，首先要考慮圖像能否用幾個固定的形狀和一些自定義圖形表現出來，再決定是否畫某樣東西，繪制幾何形狀較多的圖畫比較容易。手繪作圖時，可以完全按照自己的想法繪畫而不用擔心形狀難以控制。
二.技術
手繪作圖需要基本的繪畫天賦和一些后天的練習，才能畫出自己想要的東西，包括形體的描繪和上色方法；而編程繪圖上手比較簡單，不需要太多藝術方面的技術，代碼可以創造出各種各樣的形狀和顏色，但代碼的前后關系和圖形的運用也有一定的技術需求。
三.創作體驗
編程作圖在顏色使用方面非常便利，直線和圓的繪制比手繪要簡單很多，但是畫圖時很難一次性估算出合適的坐標，需要反復嘗試，比較繁瑣，繪制復雜圖像時，代碼過多，如果不好好利用注釋很容易找不到后來所需要的坐標，圖形的前后覆蓋也會無法實現。手繪作圖需要控制線條，但是繪制的形狀不受限制，總體來說效率要比編程高，但是上色又需要額外考慮。
四.創作偏好
接觸繪畫比較早且經過練習的人會喜歡手繪多過編程，但對沒有繪畫基礎的人來說，編程作畫會成為很有趣的體驗。創作手繪時想象力會得到充分展示，圖像大多豐富多彩且有個性，而編程繪畫更有幾何感，所有繪畫使用的基本圖形大多相似。

完整代碼

這里給出Q版小人的完整js代碼：

function setup() {// put setup code herecreateCanvas(640,480);angleMode(DEGREES);} function draw() {background(221,160,221);strokeWeight(0);//呆毛fill(208,32,144);beginShape();vertex(280, 100);vertex(240, 120);vertex(270, 130);endShape(CLOSE);//腿fill(255,245,238);beginShape();vertex(340, 200);vertex(230, 320);vertex(265, 325);vertex(350, 220);endShape(CLOSE);beginShape();vertex(320, 210);vertex(310, 340);vertex(340, 335);vertex(350, 210);endShape(CLOSE);//裙子fill(139,80,80);beginShape();vertex(270, 250);vertex(250, 275);vertex(280, 280);vertex(280, 283);vertex(320, 288);vertex(335, 280);vertex(355, 290);vertex(380, 280);vertex(365, 255);endShape(CLOSE);//衣服 fill(54,54,54); triangle(330,120,270,250,365,255);//頭發fill(90,10,90);ellipse(300, 150, 110, 110);fill(255,245,238);ellipse(300, 150, 80, 85);fill(90,10,90);beginShape();vertex(270, 110);vertex(290, 140);vertex(315, 135);vertex(310, 100);endShape(CLOSE);beginShape();vertex(300, 120);vertex(340, 140);vertex(330, 110);vertex(300, 100);endShape(CLOSE);beginShape();vertex(280, 110);vertex(280, 140);vertex(260, 120);endShape(CLOSE);beginShape();vertex(260, 115);vertex(240, 190);vertex(260, 210);vertex(270, 120);endShape(CLOSE);beginShape();vertex(246, 140);vertex(235, 190);vertex(260, 160);endShape(CLOSE);beginShape();vertex(354, 140);vertex(360, 190);vertex(350, 175);vertex(348, 185);vertex(330, 160);endShape(CLOSE);beginShape();vertex(260, 190);vertex(270, 210);vertex(275, 180);endShape(CLOSE);//挑染 fill(208,32,144); beginShape(); vertex(265, 140); vertex(255, 200); vertex(260, 210); vertex(270, 120); endShape(CLOSE);fill(139,10,80);beginShape();vertex(270, 180);vertex(345, 170);vertex(350, 200);vertex(285, 220);vertex(280, 215);vertex(285, 200);vertex(275, 190);endShape(CLOSE);fill(90,10,90);beginShape();vertex(340, 130);vertex(310, 190);vertex(335, 190);vertex(350, 130);endShape(CLOSE);//挑染fill(208,32,144);beginShape(); vertex(347, 140); vertex(330, 190); vertex(335, 190); vertex(350, 130); endShape(CLOSE);beginShape(); vertex(280, 125); vertex(290, 140); vertex(295, 139); endShape(CLOSE);fill(54,54,54);ellipse(317, 150, 5, 18);ellipse(285, 150, 5, 18);//紅暈fill(255,195,103);beginShape(); vertex(280, 160); vertex(275, 168); vertex(276, 168); vertex(281, 160); endShape(CLOSE); beginShape(); vertex(278, 160); vertex(273, 168); vertex(274, 168); vertex(279, 160); endShape(CLOSE); beginShape(); vertex(276, 160); vertex(271, 168); vertex(272, 168); vertex(277, 160); endShape(CLOSE); beginShape(); vertex(282, 160); vertex(277, 168); vertex(278, 168); vertex(283, 160); endShape(CLOSE); beginShape(); vertex(284, 160); vertex(279, 168); vertex(280, 168); vertex(285, 160); endShape(CLOSE); beginShape(); vertex(324, 160); vertex(319, 168); vertex(320, 168); vertex(325, 160); endShape(CLOSE); beginShape(); vertex(322, 160); vertex(317, 168); vertex(318, 168); vertex(323, 160); endShape(CLOSE); beginShape(); vertex(320, 160); vertex(315, 168); vertex(316, 168); vertex(321, 160); endShape(CLOSE); beginShape(); vertex(318, 160); vertex(313, 168); vertex(314, 168); vertex(319, 160); endShape(CLOSE); beginShape(); vertex(316, 160); vertex(311, 168); vertex(312, 168); vertex(317, 160); endShape(CLOSE);//手 fill(255,245,238); ellipse(278, 205, 8, 20); ellipse(345, 203, 8, 20); ellipse(285, 215, 30, 30); ellipse(335, 210, 35, 30); //袖子 fill(219,112,147); ellipse(280, 220, 35, 35); ellipse(340, 215, 35, 35);//光環 stroke(255,250,165); strokeWeight(3); noFill(); ellipse(300, 100, 80, 40); }

---

參考

1.P5官網：https://p5js.org/
2.各種自定義圖形：https://www.bilibili.com/video/av14864713/

總結

以上是生活随笔為你收集整理的手绘vs码绘1——Q版小人的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。