码绘：使用p5.js进行简单的作画

使用工具
Visual Studio Code+p5.js
下载地址
Visual Studio Code：https://code.visualstudio.com/Download
p5.js:https://p5js.org/zh-Hans/download/
目标
在网页上用简单的线条画出一辆自行车
具体流程
首先我们建立一个index.html文件（主页）和一个sketch.js文件（码绘实现文件），并把sketch.js和p5.js链接到index.html上。
在sketch.js的draw()中通过使用简单的图形函数画出自行车。

// sketch.js
function setup() {
  createCanvas(1280, 1080);
}

function draw() {
  
  ellipse(200, 200, 80, 80);
  ellipse(350, 200, 80, 80);
  line(200,200,230,120);
  line(210,110,250,130);
  line(210,110,225,110);
  line(250,130,260,125);

  ellipse(290, 200, 30, 30);
  line(295,175,285,225);
  line(285,175,305,175);
  line(275,225,295,225);

  line(290,185,350,200);
  line(290,215,350,200);

  line(220,150,275,195);
  line(295,175,310,145);
  line(310,145,370,150);
  line(350,200,355,150);
   
  triangle(310,145,285,133,325,135);
}

效果图

码绘与手绘相比

从思路方面来考虑，编程和手绘的差距其实并不大，手绘一开始要做的事情就是构图，确定好画面的大致框架和分布，用p5来进行编程作画也是一样，确定好画布的大小和作图的关键点位，确定框架。从技术上来说，手绘的要求更高一点，因为使用p5作画是依靠调用现成画出的都是标准的图形，而手绘有诸多因素的影响，如画笔、纸张、绘画者的技术等，但正是如此，手绘才会显得多样化。创作体验上来说，使用p5编程作画比较适合重复性强的作画，手绘更适合创造性的作画，p5自带的曲线函数要确认点位才能够连出直线，没有手绘那样随心所欲。从创作偏好方面，我喜欢用p5画一些简单、重复性高的画面，手绘更适合创造性的作画。