手繪vs碼繪，你覺得呢

碼繪——顧名思義就是用代碼畫畫，第一次接觸到碼繪的時候還是在MFC上用MoveTo(),LineTo()艱辛地繪畫，十分地心酸。
這次幸運地遇上了P5.js, 繪畫起來較之之前方便很多

說到P5.js,官網上有十分詳細的介紹P5.js官網，在這里不多說了。下載好相關的庫在html界面引用就好

當然，你也可以直接在網上進行編輯
網址1
網址2
在這里,我用的代碼編輯器是vscode
首先建一個js文件 并在網頁中進行引用
那我們開始第一幅碼繪作品吧 GO!!!
1.創建你想要的畫布大小
function setup() { createCanvas(850, 800); }
2.在function draw(){}函數中進行繪畫

設置背景顏色

background(129,193,252);

設置線寬strokeWeight(3);

//臉fill(210,145,14);rect(350, 150, 200, 180); fill(0);//耳朵drawEar();//上臉ellipse(450,230,130,70);fill(255);//眼睛drawEye1(420);fill(0);drawEye2(430);fill(255);drawEye3(435);

//身體fill(210,145,14);quad(450,330,370,410,450,490,530,410);//鼻子fill(0);drawNose(56);fill(255);drawNose(20);//腳fill(117,111,108);drawFoot();

//尾巴fill(210,145,14);triangle(370,410,270,430,300,480);arc(285,455,58,58,HALF_PI/3*2,HALF_PI/3*8);//花紋fill(255);line(420,494,424,488);line(426,494,430,488);line(480,488,484,494);line(474,488,478,494);strokeWeight(10);line(266,434,296,480);line(296,428,314,460);line(326,422,334,440);strokeWeight(0);fill(0,255,0);for(var i=0;i<=75;i++)grass(i*10+30);fill(255);for(var i=0;i<=6;i++)cloud(i*150);

咳咳，畫出來的大致樣子就是這樣，小老鼠加小浣熊的結合體，手繪。。見笑了。。。

一些畫小部件的具體函數代碼如下

function drawEar(){arc(350, 150, 100, 100, HALF_PI,HALF_PI*4);arc(550, 150, 100, 100, -PI, HALF_PI);}function drawEye1(x){ellipse(x,230,56,56);ellipse(x+60,230,56,56);}function drawEye2(x) {ellipse(x,230,24,24);ellipse(x+40,230,24,24);}function drawEye3(x){ellipse(x,230,10,10);ellipse(x+30,230,10,10);}function drawNose(x){ellipse(450,330,x,x);}function drawFoot(){ellipse(430,490,42,15);ellipse(470,490,42,15);}function grass(x){triangle(25+x,510,x,580,50+x,580);}function cloud(x){ellipse(50+x,50,50,30);ellipse(75+x,50,50,30);}

碼繪出來的樣子是這樣滴，我不管我覺得就是很可愛

碼繪和手繪根源還是一樣的，代碼畫其實也是在紙上想好所要畫什么圖形，在技術層面上講，碼繪需要將紙上的畫的點轉換為坐標，用各種形狀函數進行繪制，而手繪除了靈感之外，比較隨心所欲。代碼理性占的比重較大，更加嚴謹
本人沒有什么對兩者其一的偏好，認為各有各的好處，完成后的成就感也是不同的，代碼給我的成就感更大。

總結

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

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