p5.js:手繪與碼繪，靜態
阿新 • • 發佈：2018-11-26
手繪和碼繪———靜態繪圖
碼繪圖：
手繪：
程式碼：
function setup() { createCanvas(600, 1200); } function draw() { background(255,255,0)； stroke(0,0,0); fill(255,255,0); bezier(140,110,250,50,350,50,450,100); bezier(150,100,100,30,70,10,0,-30); bezier(450,100,500,60,530,10,750,0); bezier(100,190,40,180,0,100,-30,20); bezier(100,160,100,240,20,420,170,480); bezier(500,190,560,180,600,100,630,20); bezier(500,160,500,240,580,420,430,480); bezier(80,300,50,260,10,250,-40,180); bezier(90,600,60,560,10,550,-100,300); bezier(110,550,90,600,20,920,120,930); bezier(500,420,550,440,590,460,640,490); bezier(510,630,550,630,590,620,640,620); bezier(490,550,510,600,580,920,480,930); bezier(120,930,30,1030,100,1070,190,930); line(120,960,80,1000); line(130,970,85,1015); bezier(480,930,570,1030,500,1070,410,930); line(480,960,520,1000); line(470,970,515,1015); line(190,930,410,930); ellipseMode(CENTER); strokeWeight(0); fill(0); ellipse(200,250,70,70); fill(255); ellipse(185,235,20,20); fill(0); ellipse(400,250,70,70); fill(255); ellipse(385,235,20,20); fill(255,80,80); ellipse(150,330,60,60); ellipse(450,330,60,60); stroke(0,0,0); strokeWeight(7); strokeCap(ROUND); fill(0); line(300,350,290,342); line(300,350,310,342); line(290,342,310,342); strokeWeight(7); strokeCap(ROUND); bezier(260,400,260,440,340,440,340,400); stroke(255,0,80); beginShape(); fill(255,0,80); bezier(270,404,260,435,340,435,330,404); line(270,404,330,404); endShape(); }
主要也就是利用貝塞爾曲線來繪製邊線，用圓形，半圓來繪製面部。
手繪和碼繪的區別
畫圖的方式
第一次使用程式碼繪圖，畫圖方式還是使用類似手繪的方式，一步步繪製每一個線條。而且用程式碼繪製和手繪一樣，後畫的影象會擋住之前的圖。兩種畫圖方式在某些方面會有共同點。
優缺點
用程式碼畫圖時，想畫出一個符合形狀的曲線需要除錯很多次，而用手畫圖就比較簡單，能隨意畫出想要的形狀。
但是手繪會受到畫圖材料的限制，比如我身邊沒有顏料就不能給圖案上色，碼繪卻能隨意改變顏色。手繪的成就感更強烈一些，碼繪更有精確的感受。
體會
可能是剛剛使用程式碼畫圖，覺得比較繁瑣。相比之下我更喜歡手繪的方式，畢竟繪製這種不規則的圖案，手繪更加方便於修改和繪製自己想要的形狀，而碼繪則更耗費時間。
參考連結：
1.《用程式碼畫畫》：
0.1 用程式碼畫畫——搞藝術的學程式設計有啥用？
https://blog.csdn.net/magicbrushlv/article/details/77922119
1.1 開始第一幅“碼繪”——以程式設計作畫的基本方法
https://blog.csdn.net/magicbrushlv/article/details/77840565