手繪與碼繪的對比(靜態)
阿新 • • 發佈:2018-11-24
在這次對比用程式碼和用手繪創作靜態繪畫的實驗中,選擇的程式設計工具是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做出來的動態效果,顯得有趣多了。