用p5.js实现的码绘与手绘的比较（静态）

用p5.js实现的码绘与手绘的比较（静态）

一、编程实现的静态效果

1. 效果图
   
2. 主要代码

以人物主体为例

//绘制人物主体
function people(){
    head();
    hair();
    redf();
    cloth();
    scarf();
    leg();
    shoes();
}


function hair(){
  hairColor=color(150);
    fill(hairColor);
    bezier(40, 55, 41, 25, 79, 20, 80,55);
    quad(60,55, 55, 80, 78, 70, 80, 55);
    fill(130);
    triangle(60, 80, 78, 70, 80, 55);
    fill(255);
    triangle(48, 55, 50, 48, 52, 55);
}

......

光是头发的绘制就可以看出过程相当的繁琐了

二、手绘实现的效果

三、手绘与码绘的比较

在通过编程完成一副静态作品的过程中，需要对每个图形的坐标和大小有较为精确的概念，而手绘时则经常通过肉眼目测出一个大概的位置。手绘的时候每条线的产生都是即时可见的，编程则需要先运行再显示。手绘时可以绘制非常复杂不规则的图案，通过函数完成的绘图图案则相对简单，主要由规则的几何形构成。两者的相同点在于，手绘和编程都需要先构建一个大致的框架，再进行细化。