手繪VS碼繪-1

這系列文章主要是記錄博主在互動媒體課程中的收穫和體會

這篇我們先來看看，用代碼和手繪在創作靜態繪畫作品時的異同。

這裏我們要嘗試用繪圖函數畫一幅靜態作品，然後用手繪方式來畫相近的內容，儘量將繪圖的圖形基元限定於自己程序中用到的類型。最後我會從從思路、技術、創作體驗、創作偏好等方面來比較二者的異同。

使用的工具爲VSCode編輯器和 p5.js庫，關於此語言的一些具體信息和使用說明可以到文後附上的鏈接中學習。

首先 這是我們在紙上手繪的初步想法
接下來使用代碼來畫出相同的作品

先建立一張畫布

function setup() {
    createCanvas(550, 550);      
}

然後寫具體的繪畫函數

function draw() {
  background(220);
  //translate(p5.Vector.fromAngle(millis()/ 1000, 80));//可以讓它動起來
  noStroke();
  fill('#CD0000');
  ellipse(275,255,230,210); 
  
  //身體
  fill('#EEC900');
  ellipse(275,275,210,160); 
  fill('#A52A2A');
  ellipse(275,300,190,100); 
  fill('#8B0000');
  ellipse(275,225,20,30);
  ellipse(235,235,15,20);
  ellipse(315,235,15,20);
  
 //腿
  fill('#8B0A50');
  beginShape();//左上
  vertex(225,200)
  vertex(175,155);
  vertex(120,225);
  vertex(175,175);
  vertex(225,200);
  endShape();
  beginShape();//左中上
  vertex(200,250)
  vertex(150,205);
  vertex(95,275);
  vertex(150,225);
  vertex(200,250);
  endShape();
  beginShape();//左中下
  vertex(200,280）；
  vertex(150,235);
  vertex(95,305);
  vertex(150,255);
  vertex(200,280);
  endShape();
  beginShape();//左下
  vertex(220,330)
  vertex(170,285);
  vertex(115,355);
  vertex(170,305);
  vertex(220,330);
  endShape();
  beginShape();//右上
  vertex(325,200)
  vertex(375,155);
  vertex(430,225);
  vertex(375,175);
  vertex(325,200);
  endShape();
  beginShape();//右中上
  vertex(350,250)
  vertex(400,205);
  vertex(455,275);
  vertex(400,225);
  vertex(350,250);
  endShape();
  beginShape();//右中下
  vertex(350,280)
  vertex(400,235);
  vertex(455,305);
  vertex(400,255);
  vertex(350,280);
  endShape();
  beginShape();//右下
  vertex(330,330)
  vertex(380,285);
  vertex(435,355);
  vertex(380,305);
  vertex(330,330);
  endShape()；

  //眼睛
  fill(255);
  ellipse(245,320,85,100);
  ellipse(310,320,85,100);
  noStroke();
  ellipse(280,320,55,55);
  stroke(0);
  
  //眼珠
  fill(0);
  ellipse(260,320,23,23);
  ellipse(295,320,30,30);
  fill(255);
  ellipse(256,315,10,10);
  ellipse(290,315,15,15);
}

可以看出 我們在碼繪中的主要方法是吧畫分解成基本圖形，例如圓、橢圓和多邊形，然後再計算出座標和設置好顏色、樣式之後用自帶的函數庫“繪畫”。

繪畫的效果如下

不難看出，手繪更加自由、方便快捷，且有創造力和無限可能；編程則更加規範，對稱和圓形等操作都很標準，填色比較好填；
思路上手繪會比較靈活，畢竟腦中所想可以直接在紙上繪製出來；編程則會更加程序化，需要寫完整段代碼之後才能看到效果；
技術上雙方都有自己的獨特之處，沒有可比性；
體驗上手繪會感覺更加的愜意換了，編程則需要不斷地調試參數，稍顯枯燥乏味；

就我個人而言，我覺得手繪的體驗會比碼繪要更加討人喜歡，碼繪偶爾作爲開拓思路是一個不錯的選擇，但是日常繪圖我還是會選擇手繪。

參考鏈接:

1.p5.js的在線主頁，包括下載和各方面基礎教程.

2.使用p5.js進行碼繪的基礎教程.