码绘与手绘比较——静态篇

手绘比较——静态篇"/>

码绘与手绘比较——静态篇

码绘图

p5.js绘制

手绘图

代码实现过程

以下仅代表性留下了码绘作画流程的部分代码，省略掉了很多取点线的代码。其实使用的东西都很简单，主要就是通过取点连线画规则图形和填色。

function setup() {createCanvas(400, 710);
}
function draw() {background(139,26,26,200); fill(0);beginShape();vertex(21,634);vertex(47, 609);vertex(74, 589);vertex(103, 570);vertex(85, 505);vertex(50, 517);vertex(44, 526);vertex(45, 515);vertex(49, 509);vertex(80, 482);vertex(65, 417);vertex(42, 363);endShape();strokeWeight(4);line(50,517,60,561);line(60,561,71,597);line(100,559,41,574);line(41,574,53,608););strokeWeight(8);line(341,576,388,601);line(381,562,342,632);strokeWeight(6);line(385,618,370,665);line(368,625,392,635);noStroke();fill(255,165,0,255);ellipse(206,552,64,93);fill(0,0,0,255);rect(149,587,124,50);strokeWeight(5);stroke(0) ;line(65,360,80,400);line(55,387,93,376);strokeWeight(4);line(302,510,338,511);line(256,516,256,436);line(276,476,236,476);line(133,528,133,428);line(153,488,113,488);noStroke();fill(	139, 137 ,137,45);
beginShape();vertex(33,248);vertex(0,251);endShape();beginShape();vertex(373,364);vertex(400,377);endShape();beginShape();vertex(400,99);vertex(400,0);endShape();}

手绘与码绘异同比较

绘画思路

同：都要思考下笔的先后次序，要考虑画面的覆盖问题
异：码绘是通过规则图形和取的点线构成边界后填色完成的，但手绘是流畅的充满质感的，即使填色也可能是不均匀有笔触的。

技术方面

同：都需要进行画面的构思，在创意阶段基本是一样的。
异：码绘用代码实现画面，需要对编程语言的熟练使用，它更多的是数学与图形的结合。手绘则使用笔纸，对灵感和经验要求更高，它不一定能像码绘一样精准，但是相对更自由。

创作体验

同：能够完成直观的画面还是很开心的。
异：手绘带来的质感更让人有创作感，码绘相对来说比起创作更像是制作。

创作偏好

手绘。码绘在有的方面的确能够产生很多灵动有玄妙的效果，但是我永远喜欢手绘的质感，握笔的感觉是用鼠标和键盘无法替代的。（而且这种不规则图形用打点的方法码绘真的又没有效率又没有效果！！！！！）

参考文献
开始第一幅“码绘”——以编程作画的基本方法

p5.js简介&基本形状绘制