1. 程式人生 > >手繪與碼繪的對比(靜態)

手繪與碼繪的對比(靜態)

在這次對比用程式碼和用手繪創作靜態繪畫的實驗中,選擇的程式設計工具是p5.js,p5.js語法和使用上較為簡單,入門很快,繪製的作品為一個簡單的卡通小黃人。下面按要求從思路、技術、創作體驗、創作偏好等方面比較一下二者,以及它們的異同。
這裡插入圖片描述碼繪程式碼如下:

function setup() { 
  createCanvas(340, 500);
} 
function draw() { 
	background(200);//繪製背景
	//頭部,半圓
	stroke(0);
	strokeWeight(4);
	fill(249,217,70);
	arc(170,150,200,200,PI,0,OPEN);
	//身體,矩形
	rect(70,150,200,180);
	fill(0);
	rect(70,150,200,15);
	//下半身,半圓+矩形
	fill(32,116,160);
	arc(170,330,200,200,0,PI,PIE);
	rect(100,270,140,60);
	//眼睛
	noFill();
	fill(255);
	ellipse(135, 150, 70, 70);
	ellipse(205, 150, 70, 70);
	fill(0);
	ellipse(135, 150, 20, 20);
	ellipse(205, 150, 20, 20);
	//手臂
	strokeWeight(8);
	fill(249,217,70);
	triangle(30, 295, 70, 260, 70, 330);
	triangle(310, 295, 270, 260, 270, 330);
	//揹帶
	stroke(32,116,160);
	strokeWeight(20);
	line(70, 260,100,270);
	line(270, 260,240,270);
	//釦子
	stroke(0);
	point(100, 270);
	point(240, 270);
	//嘴巴
	strokeWeight(8);
  line(150,230,190,230);
	//去掉多餘的線
	stroke(32,116,160);
	strokeWeight(10);
	line(100, 330,240,330);
	//腿腳
	stroke(0);
	strokeWeight(30);
	line(150, 430,150,470);
	line(180, 430,180,470);
	line(120, 470,150,470);
	line(180, 470,210,470);
	//口袋
	fill(32,116,160);
	strokeWeight(8);
	rect(150,290,50,60);
}

思路:
由於繪製的小黃人整體線條較為簡單,所以程式設計時每一個線條,每一個幾何圖案都直接呼叫p5.js裡最基本的2D形狀函式,並沒有自己去寫可重用的函式,程式碼結構上也全部是順序結構。在這一點上和手繪沒有太大差異,手繪也是一筆一筆按順序畫的。
技術:
程式設計p5.js繪製圖畫比較精準,線條幹淨流暢,筆頭大小、顏色等的設定也非常方便,,最後出來的效果很棒,乾淨整潔,色彩鮮明。
手繪由於本人沒有繪畫功底,導致畫圓不圓,畫線不直,最後畫出來的圖畫醜醜的,不忍直視。
創作體驗:
雖然程式設計畫出來的挺好看的·,但還是不得不說程式設計體驗非常差,主要在於座標點的計算,座標的設定和調整實在是一件費心費力又很無聊的工作。耗時長,消耗精力多。
手繪就隨意多了,簡單幾筆輕鬆完成。
創作偏好:
如果不用算座標的話,也可以說,程式設計中函式沒有那麼多需要計算和調整的引數的話,還是很喜歡程式設計作畫的。但事實不是,所以偏好還是手繪吧。
其他:
其實最初想畫一副較為複雜的圖畫,但是線條多必然用到曲線,而程式設計曲線調整感覺很困難,又因為時間原因,最後放棄。
感覺程式設計在靜態圖畫中優勢不大,倒是看到很多p5做出來的動態效果,顯得有趣多了。