手绘VS码绘

手绘VS码绘（一）

由于大学课程要求，让我们每个人用p5.js画一幅图，并和自己手绘作品进行对比，这里就简单分享下个人经验。

工具

javascript编辑器和 p5.js库，配置和下载的问题这里就不介绍了。

画一张懵逼脸

由于我第一次使用p5.js作图，参考别的博主的文章后决定从最基础的懵逼脸开始画起。

function setup() {
    createCanvas(640,480);
    }
    
    function draw() {
      fill(200);//填充白色
      ellipse(320, 240,200, 200);
      ellipse(280, 240,50, 50);
      ellipse(360, 240,50, 50);
      ellipse(320, 300,80, 40);
      fill(0);//下面填充黑色
      ellipse(280, 240,20, 20);//左眼
      ellipse(360, 240,20, 20);//右眼
    
    line(260,180,260,100);
    
    line(280,180,280,100);
    
    line(300,180,300,100);
    
    line(320,180,320,100);
    
    line(340,180,340,100);
    
    line(360,180,360,100);
    
    line(380,180,380,100);
    }
           

效果如下：

简单说明一下代码，fill()函数内的参数是填充颜色RGB256格式,用来给紧跟着的下面一行的函数图形进行填充； ellipse(x, y,high, width);画圆函数，参数分别对应是横坐标，纵坐标，高和宽；同理，line()函数是画线,参数分别是两个端点的横纵坐标；

这样第一幅画就画好了，然后看下我手绘的惨不忍睹的懵逼脸：

好吧，第一场码绘完胜。我这糟糕的画技啊！（气哭）