p5.js 光速入门中文教程

本文简介

点赞 + 关注 + 收藏 = 学会了

本文的目标是和各位工友一起有序的快速上手 p5.js ，会讲解 p5.js 的基础用法。

本文会涉及到的内容包括：

• 项目搭建
• p5.js 基础2D图形
• 文字
• 图形样式设置
• 图片
• 事件（交互相关的）
• 基础动画

其中还会讲解部分 p5.js 全局方法。

本文不涉及3d部分（放到下一篇吧）。

官方文档很重要，但对于初学者来说可能会有点懵。因为官方文档主要讲解api的用法，第一次接触p5.js的工友可能不是那么容易将各个知识点串联起来。

本文在基于官方案例的基础上，把我觉得入门必学的知识点过一遍，然后串起来搞一个小特效。

要快速学习一个库，尤其是可视化方面的库，最快速的方法是找到一个好教程，然后跟着敲代码，建立自己的 “demo仓库” 。

学习本文内容，你需要有 JavaScript 基础。

什么是p5.js

p5.js 简介

引用官网的话：

p5.js 是个 JavaScript 创意编程程式库，其专注在让编程更易于使用及更加广泛的包容艺术家、设计师、教育家、初学者以及任何人！p5.js 是个免费及开源的软件因为我们相信所有人都应该能自由使用软件及用于学习软件的工具。

p5.js 使用绘图的比喻并有一副完整的绘画功能。除此之外，您也不单限于您的绘图画布。您可以将您整个浏览器页面当作您的绘图，这包括了 HTML5 物件，如文字、输入框、视频、摄像头及音频。

简单来说，p5.js 能让“切图仔”更容易做出具有艺术感的作品（很能整活）。

举个例子，p5.js 很擅长实现下图效果。

p5.js 是 Processing 往浏览器延伸的一个 canvas库 。Processing 是使用 Java 编写的，而 Java 对于从事艺术工作的工友来说上手是有点难度的。

浏览器暂时只接受 HTML、CSS 和 JavaScript，如果能将 Processing 直接搬上浏览器运行的话，对于艺术家来说是大大的好事。于是，p5.js 应运而生！

p5.js 第一个测试版在 2014年8月 发布。

更多的故事可在 p5.js 官网 中寻找，本文的目标是光速入门 p5.js 。

找到 p5.js

• p5.js 官网
• p5.js github地址
• p5.js npm地址

快速上手

本文的目标是和各位工友快速上手 p5.js，所以 CDN 的方式引入 p5.js，因为这样非常快！

接下来我们试试在画布创建一个圆形吧~

环境搭建

CDN

<script src="https://cdn.jsdelivr.net/npm/p5@[p5_version]/lib/p5.js">script>

[p5_version] 改成指定版本号即可，本文使用的版本是 1.5.0 ，所以我是这样引入 1.5.0 版的 p5.js：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js">script>

查看其他版本可以浏览：https://cdn.jsdelivr.net/npm/[email protected]/

npm

安装

npm i p5 --save

引入

import p5 from 'p5'

在画布创建一个圆形

我使用的开发工具是 vs code，并装了 Live Server 插件。这个插件可以帮我们快速启动一个服务端运行当前页面，并具备热更新的能力。启动完服务，在浏览器运行指定页面后，你代码的每一次保存，浏览器都会自动刷新。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js">script>
<script>
  function setup() {
     
    createCanvas(200, 200) // 创建一个 200 * 200 像素的画布
    background(180, 180, 180) // 画布背景色 background(r, g, b)
  }

  function draw() {
     
    circle(60, 60, 100) // 画一个圆形
  }
script>

上面的代码用到几个“奇怪”的方法，逐一讲解一下。

• setup(): 可以理解为 p5.js 的一个生命周期，创建画布的方法通常写在 setup() 里。
• draw(): 同样可以理解为 p5.js 的一个生命周期，在这函数里的代码会以 60帧每秒 的速度执行。
• createCanvas(): 创建画布的方法，这个方法是 p5.js 在全局创建的，传入画布的宽高后，p5.js 会自动在页面的最后插入一个 canvas 元素。
• background(): 设置背景色，可以分别传入 r、g、b ，该方法也是 p5.js 在全局创建的。
• circle(): 创建圆形的方法，3个参数分别代表：圆心x坐标、圆心y坐标、直径。

暂时只需大概了解一下怎么画一个圆就行，详细的后面会讲到。

项目代码结构

使用 p5.js ，你可以理解为用这个工具创造一个“有生命”的世界。

• 创造世界的工作是放在 setup() 函数里的。

• “有声明” 的意思是这个世界有生物，生物无时无刻都在活动。而活动的过程是放在 draw() 函数里。

setup() 和 draw() 这两个函数非常重要，在前端的世界里，你可以把 setup() 和 draw() 理解为生命周期函数。

启动函数 setup

使用 CDN 的方式开发时，引入 p5.js 后就会在全局创建一些函数和常量。

setup() 是 p5.js 里一个很重要的方法，你可以简单的理解为 setup 是 p5.js 里的一个生命周期函数。在该函数里可以做很多初始化工作，比如创建画布并设置大小、画布背景色等。

setup() 在每个页面都只能出现一次，并且它不能在一开始执行后再次被调用。

更多说明可查看 setup()说明文档

绘图 draw

draw() 是 p5.js 里另一个很重要的函数。

draw() 会在 setup() 之后执行，并且会重复的执行。如果想打断 draw() 可以试用 noLoop() 方法。

draw() 每秒执行次数受到 frameRate() 影响，frameRate() 默认每秒60帧。如果需要修改帧率，可以直接传入指定数值，比如 frameRate(20)。

如果要做动画，代码可以写在 draw() 里。

更多说明可查看 draw()说明文档

2D基础图形

p5.js 可以绘制 2D 和 3D 图形，但在光速入门阶段只会讲解 2D 图形的基础用法。

先从最简单的点线面开始学起~

点 point

点是 p5.js 的基础元素之一，语法如下：

point(x, y, [z])

point() 接收3个参数，其中 x 和 y 是必传参；如果是在 2D 画布里，z 不需要传。

• x 表示点在 x 轴的坐标
• y 表示点在 y轴的坐标

点出现在画布的中间

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js">script>
<script>
  function setup() {
     
    createCanvas(200, 200)
    background(220, 220, 220)
  }

  function draw() {
     
    point(100, 100)
  }
script>

上面的例子中，画布的宽高是200像素，点在 100, 100 的位置，仔细看可以发现点出现在画布的中心。

如果需要画一个更大的点，可以通过 strokeWeight() 方法设置

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js">script>
<script>
  function setup() {
     
    createCanvas(200, 200)
    background(220, 220, 220)
  }

  function draw() {
     
    point(100, 100)
    strokeWeight(10) // 更大的点
  }
script>

其实 strokeWeight() 方法是用来设置描边粗细的，用在 point 里也完全没问题。

更多说明可查看 point()说明文档

线段 line

要画一根线段的语法：

line(x1, y1, [z1], x2, y2, [z2])

注意上面的参数顺序，一定不能写错的。

其中 z1 和 z2 在 2D 情况下是不需要传的，所以语法变成这样：

line(x1, y1, x2, y2)

• x1 和 y1 代表起点坐标
• x2 和 y2 代表终点坐标

使用 line() 方法会自动将起点和终点连接起来，形成一根线段。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js">script>
<script>
  function setup() {
     
    createCanvas(200, 200)
    background(220, 220, 220)
  }

  function draw() {
     
    line(60, 30, 130, 140)
  }
script>

更多说明可查看 line()说明文档

三角形 triangle

三角形的语法是：

triangle(x1, y1, x2, y2, x3, y3)

和前面的 点(point) 和 线段(line) 不同，三角形(triangle) 的所有参数都是必传的。

三角形有3个点，每个点需要用2个坐标(x和y)来描述，所以 triangle() 一共要传入6个参数。

经过前面的 点(point) 和 线段(line) 练习，相信你看到三角形的参数名称就已经知道什么意思了。

确定了3个点的坐标后，triangle() 会使用直线连接这3个点，形成一个三角形。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js">script>
<script>
  function setup() {
     
    createCanvas(200, 200)
    background(220, 220, 220)
  }

  function draw() {
     
    triangle(100, 30, 40, 140, 160, 140)
  }
script>

更多说明可查看 triangle()说明文档

正方形 square

正方形是特殊的四边形，也可以说是特殊的矩形。

所以先从正方形讲起。

创建正方形用到的方法是 square()，语法如下所示：

square(x, y, s, [tl], [tr], [br], [bl])

• x 和