手繪vs碼繪

使用P5.js畫一幅圖

程式設計師的世界可不僅僅只有一串串的程式碼，有時候程式碼也可以繪製出一幅幅美麗的作品。這篇文章就用來記錄我的第一篇碼繪作品。

準備工作

相信大多數程式設計師像我一樣，在動手寫程式碼碼繪之前不知道該畫些什麼。於是我在一些網站上找了一些素材。在尋找素材過程中，我更偏向於線條簡單、圖形規整的圖片。這樣繪製起來可能更容易上手。最後，我決定試試用程式碼實現下圖。

開始繪畫

1、不管是手繪還是碼繪，我們首先需要的是一張畫布。手繪時找到一張紙即可，而碼繪則需要幾行程式碼建立一個畫布。

function setup() {  
createCanvas(640,480);  }
 

2、畫布找好了我們就要開始繪製了。這一步是在draw中進行。
首先要把背景填充好。

background('rgb(0,123,255)');

在我們手繪時，一般是先畫好線條然後進行上色。而P5.js有所不同，它允許我們提前設定好顏色，在形狀確定後直接將顏色填充進去。

fill('rgb(255,255,255)');//填充白色  
quad(213,70,426,70,426,410,213,410)

在整個繪製過程中，涉及到p5.js中一些圖形繪製函式的呼叫。大都很簡單，可以通過官方案例很快上手。具體的繪製部位我就不詳細說明了，直接貼程式碼。

fill('rgb(0,123,255)');// 填充藍色  
arc(319, 410, 210, 210, PI , TWO_PI, OPEN);  
fill('rgb(255,255,255)');//白色臉頰及眼白  
arc(319, 410, 160, 110, PI , TWO_PI, OPEN);  
ellipse(300,370,45,50);  
ellipse(345,370,45,50);  
fill('rgb(0,0,0)');//黑色眼珠  
ellipse(305,370,15,15);  
ellipse(340,370,15,15);  
fill('rgb(255,255,255)');//區域性白色眼睛  
ellipse(303,367,10,5);  
ellipse(339,367,10,5);  
strokeWeight(2); 
line(323,401,323,410);//鬍鬚  
line(363,400,415,390);  
line(283,400,231,390);  
fill('rgb(255,0,5)');//紅色鼻子  
ellipse(323,390,25,25);  
fill('rgb(223,223,0)');//黃色竹蜻蜓 
arc(323, 308, 30,30, PI , TWO_PI, OPEN);  
rect(320,240,6,60,20);
ellipse(324,245,20,10);  
ellipse(324,245,10,3);  
noFill();  
ellipse(324,245,120,60);  
arc(323, 245, 40,20, PI, PI + QUARTER_PI);  
arc(323, 245, 60,30, PI, PI + QUARTER_PI);  
arc(323, 245, 80,40, PI, PI + QUARTER_PI);  
arc(323, 245, 100,50, PI, PI + QUARTER_PI);
arc(323, 245, 40,20, TWO_PI, TWO_PI + QUARTER_PI); 
arc(323, 245, 60,30, TWO_PI, TWO_PI + QUARTER_PI);  
arc(323, 245, 80,40, TWO_PI, TWO_PI + QUARTER_PI);  
arc(323, 245, 100,50, TWO_PI, TWO_PI + QUARTER_PI);
 

在繪製過程中，一定要考慮到圖層覆蓋的問題。我們手繪時可以將多餘的部分擦去，而碼繪卻只能一層層覆蓋。所以不能被遮擋的部位最後繪製。
3、自由發揮階段。在將臨摹圖中大致復刻好後，我想加一點別的東西進去。
文字

fill(0,123,255)  
textSize(24);  
textStyle(BOLD); 
text('Doraemon',265,160)

哆啦A夢的小鈴鐺

translate(200,50);  
ling();
function ling(){    
fill('rgb(195,195,0)');    
ellipse(123,390,45,45);    
bezier(100, 385, 117, 375, 127, 375, 143, 385);    
bezier(99, 390, 117, 380, 127, 380, 145, 390);    
fill(0,0,0)    
ellipse(123,395,10,10);    
line(123,400,123,410);  }
 

大功告成

好啦，這樣一個簡單可愛的哆啦A夢就在螢幕上顯示出來了。
我們的題目是手繪VS碼繪，按道理是應該也有手繪作品的。但由於博主的手繪功底實在太差就不放出來讓大家看笑話了。

總而言之，雖然繪製過程中尋找合適的引數非常痛苦，但在最後看到圖片繪製出來的時候成就感還是有的。我們可以看到，碼繪作品的線條更規範。但規範到底好不好呢？這個就看個人想法啦。像博主這種手殘黨能夠碼繪出規整不難看的圖片已經心滿意足。而博主的大佬室友肯定會嫌棄線條太過於生硬死板，不如自己手繪來得痛快美觀。

好啦，不多說了，繼續搬磚去了！下篇部落格見~