程式設計與手繪的對比

阿新 • • 發佈：2018-11-21

程式設計與手繪的對比

數媒1604 劉妍 1030516402

一、思路

1、首先選定用P5.JS創造一幅二維靜態繪畫作品

2、以前未接觸過P5.JS，所以參考https://p5js.org/ 瞭解到P5.JS能提供一下二維形狀及其屬性

3、接下來思考畫什麼，先在紙上畫個草圖，

並決定好各部分的顏色。

4、因為作品是根據座標來畫到螢幕上的，所以大致推導一下座標和比例。

5、直接在P5.JS安裝包裡的empty_example的基礎上做，先完成基本形狀的繪製，再上色就可以了。

二、技術實現：

1、原始碼：

function setup() {    //準備階段

  // put setup code here

  createCanvas(700,700);   //畫布大小

}


function draw() {       //作畫階段

  strokeWeight(5);  //線寬 5px


fill(220,182,102);

rect(300,150,250,150);  //頭


fill(182,150,120);

rect(280,180,20,90);   //左耳朵


fill(182,150,120);

rect(550,180,20,90);   //右耳朵


line(280,210,300,210);   //耳朵的線條

line(280,240,300,240);

line(550,210,570,210);

line(550,240,570,240);


line(350,300,350,330);   //脖子

line(500,300,500,330);


fill(220,182,102);

quad(300,330,420,330,400,400,300,400);  //身子 前面

quad(420,330,530,330,515,400,400,400);

quad(300,400,515,400,500,450,300,450);

quad(300,450,500,450,530,500,300,500);


fill(171,90,57);

quad(530,330,560,342,530,500,500,450);  //身子 側面   四角形


rect(320,500,200,80);  //腿

rect(300,580,240,20);  //腳


fill(255,255,255);     //褲襠

arc(420, 602, 80, 110, 3.12,0, OPEN);


fill(182,150,120);

quad(170,420,300,330,300,400,200,460);  //左胳膊

quad(558,351,674,400,658,445,540,400)  //yougebo


fill(0,0,0);

ellipse(375,220,15,15);   //眼睛

ellipse(465,220,15,15);


fill(220,182,102);     //嘴巴

arc(420, 250, 80, 60, 0,3.12, OPEN);


fill(226,0,66);

arc(420, 150, 70, 70, 3.12,0, OPEN);   //頭頂的包


line(386,140,300,100);     //倆犄角

line(458,140,550,100);


}

2、程式碼實現效果：

3、手繪效果

三、創作體驗

因為不太瞭解P5.JS，所以我的思路和實際操作有很大的差別。

繪畫過程和程式設計過程的聯絡只有”過程”吧，這兩個過程都遵循一定的順序，但是具體的操作過程不同，比如說，手繪是先畫輪廓再上色，但是程式設計過程中是這樣的：

fill(182,150,120);

rect(550,180,20,90);   //右耳朵

先設定顏色，再畫。並且，顏色的設定比較麻煩，也很難實現真實情況下顏料的暈染、層次等效果。

還有一個非常大的差別在於，手繪是一個很直接的過程，“看到哪畫到哪”，但是程式設計過程中，是間接操作“畫筆”在“畫布”上繪畫，找座標好難，尤其是找線的交叉點，只能改一點->看看效果->改一點->看看效果，好累。

個人感覺用程式設計畫畫的思路根本不是畫畫的思路，程式設計更傾向於“拼湊”“調整”。
程式設計繪畫解決了手繪過程的很多問題，比如說，修改痕跡重、標準圖形不好把控、上色不均勻、不易儲存等，而且程式設計繪畫能自由操作畫布大小、更改圖形位置等，更靈活。
其實我之所以感覺這次程式設計繪畫很煩，很大程度上是因為工具操作不熟練、或者P5.JS本身存在的弊端，如果選用更好的技術，比如說直接用一個畫圖板程式，或者更直接的：用手繪板操作，就完全是另一種感受了。
即使，計算機能達到普通手繪達不到的效率和效果，但是，我覺得程式設計實現的作品缺少靈氣，沒有質感，也缺少了手繪過程獨特的心思沉澱、實時創作的樂趣所在。