思索 p5.js 的最佳实践

本文写于 2020 年 12 月 18 日

p5.js 是一个 JavaScript 库，用于为艺术家、设计师提供更容易上手的创意编程。

它有着完整的一套基于 Canvas 的作画功能，并且你可以把整个浏览器都当成你的“画布”——利用 p5.dom.js 可以很方便地与其他 HTML 元素进行交互；利用 p5.sound.js 可以很简单的对声音进行分析与处理。

官网推荐用法

在官网的例子中，推荐使用 <script> 标签引入的方法：

<html>

  <head>

    <!-- ...... -->

    <script src="path/to/your/p5.js"></script>

  </head>

  <body>

    <script>

      function setup() {

        createCanvas(300, 500);

      }

      function draw() {}

    </script>

  </body>

</html>

这样是让所有的变量、函数都暴露在全局之下，所以我们可以直接使用 setup, draw 函数进行操作。

但这对于新手来说，这样的做法存在一个致命问题：没有代码提示。并且也不符合我们现代 Web 开发的习惯——模块化。

在动画复杂的情况下，代码会越来越多、越来越邋遢，直到成为一座“屎山”！！！

所以这让我不由得思考起了 p5.js 的最佳实践究竟该如何。

关于最佳实践的思考

p5.js 拥有多个生命周期函数：

用于预加载数据的 preload 函数；
在最开始执行，并且只执行一次的 setup 函数；
一秒执行大概 20 多次的 draw 函数；
鼠标左键点击时触发的 mousePressed 函数；
……

p5 画图的根本其实就是在不同生命周期里对数据进行操作，然后将数据具体转化为图像。

所以按照 MVC 的思想：view = render(data)，我们应该拒绝在这些钩子函数中「直接」操作数据——将动画抽象成为独立的 Service（服务），操作数据交给 Service 自己的方法，我们只需要在 draw 函数中对 Service 内的数据进行绘制即可。

这样讲可能大家还不太明白，那么 talk is cheap, show me the code 吧！

运用 OOP 与 SOA 解耦项目

接下来我们通过一个例子看看如何对项目进行解耦。

要求：了解面向对象的编程。

目标：制作一个漫天繁星。

step1 创建 Star 类

第一步我们需要一个 Star 类。

class 星星 {

  x坐标 = 0;

  y坐标 = 0;

  透明度 = 0;

  随机放置星星() {

    // 随机 x y 坐标值

  }

  闪烁() {

    // 操作透明度

  }

}

step2 创建 Service

然后再为所有的星星闪烁制作一个服务，这个服务用来管理所有的星星（服务其实就是一个 class）。

class 星星服务 {

  星星们 = [];

  get 星星的位置() {

    this.星星们.处理一下((星星) => {

      返回 {

        x: 星星的x坐标,

        y: y坐标,

        opacity: 透明度,

      }

    })

  }

  创建星星们() {

    重复 100 次：this.星星们.增加(new 星星());

  }

}

step3 写入 p5

let 星星服务实例;

function preload() {

  星星服务实例 = new 星星服务class();

}

function setup() {

  星星服务实例.创建星星们();

}

function draw() {

  background(0);

  if (星星服务实例.星星们 的 长度 > 0) {

    星星服务实例.星星的位置.遍历((星星) => {

      fill(255, 星星.透明度);

      ellipse(星星.x, 星星.y, 半径, 半径);

    })

  }

}

目前动画比较简单，还看不出来该方案有什么优势。但是一旦动画更加复杂，该方案对原来写法的解耦的优越性将会是毋庸置疑的。

我们仅仅需要的是在不同的生命周期函数中调用服务的方法，然后在 draw 函数中拿到数据后进行绘图！

ts-p5 以及环境搭建

我封装了一个库，可以提供比较好的 p5 代码补全：https://github.com/AerospaceXu/ts-p5。

考虑到使用 p5 的初学者较多，还是说一下如何搭建一个前端项目吧。

完整版本会写在最后一节，这里只提供可运行的步骤。

官网下载 Node.js，一路默认选项安装；
下载 VSCode，他为我们提供了完善的代码提示支持；
新建项目文件夹，命名；
将文件夹拖入 VSCode；
点击 VSCode 菜单栏的“终端”或是“Terminal”选项，选择新建终端；
终端内输入：npm config set registry https://registry.npm.taobao.org && npm init -y && npm i ts-p5 && npm i -D parcel-bundler；
此时文件夹内出现了 package.json 与 package-lock.json 文件，打开前者；

在第一行大括号的末尾回车，输入：

{ // 在这里回车

  "scripts": {

    "start": "./node_modules/.bin/parcel ./src/index.html --no-cache",

    "build": "./node_modules/.bin/parcel build ./src/index.html --no-cache -d build"

  },

  // ......

新建 src 文件夹，让你的目录看起来是这样：

 - 你的文件夹名称

   - node_modules

   - package.json

   - package-lock.json

   - src

     - index.html

     - style.css

     - main.js

只需要在 index.html 中引入 main.js 和 style.css；

在 index.html 中写入以下代码：

<body>

  <div id="sketch"></div>

  <script src="./main.js"></script>

</body>

在 main.js 中写入以下代码：

import { sketchCreator } from 'ts-p5';

import { getWindowSize } from 'ts-p5/utils';

sketchCreator(

  {

    preload: function () {},

    setup: function (p) {

      const { width, height } = getWindowSize();

      p.createCanvas(width, height);

      p.background(0);

    },

    draw: function (p) {

      p.background(0);

      p.noStroke();

    },

    mousePressed: function (p) {

      console.log(p.mouseX);

      console.log(p.mouseY);

    },

  },

  document.querySelector('#sketch')

);

然后在终端输入 npm run start，待显示

Server running at http://localhost:1234

  Built in xxxx.

之后，方可打开浏览器输入刚刚输出的网址。

观察到一片漆黑，就完成了。

之后如果需要使用到 p5 的函数或者是变量，输入 p. 就会自动弹出代码提示了（不要忘记在函数参数传入 p 哦）。

为代码添加提示完整版（初学者向）

为了给 p5 增加代码提示，我们不可以使用官网推荐的方式。需要利用 TypeScript 进行模块化的项目构建（会的同学，或者不需要代码提示的同学可以直接跳过这一节）。

这里需要安装一下 Node.js，直接官网下载即可。

以下步骤仅限 Linux 与 MacOS 平台，Windows 不保证可以这么操作！！！

step1 初始化项目

新建一个文件夹，将文件夹拖入 VSCode 打开，切换至英文输入法，同时按下 control + ~ 就可以开启终端。

在终端输入 npm config set registry https://registry.npm.taobao.org && npm init -y && npm i p5 && npm i -D typescript @types/p5 parcel-bundler && ./node_modules/.bin/tsc --init 请初学者直接复制粘贴并且回车，不要尝试自己输入。

这时候可以发现我们的文件夹里出现了几个文件，并且他们全都不需要你去关心。

- 你的文件夹名称

  - node_modules

  - tsconfig.json

  - package.json

  - package-lock.json

打开 package.json 文件，应该长这样：

{

  "name": "你的文件夹名称",

  .....

}

step2 创建启动脚本

我们在第二行插入一些东西（一样请直接复制，不要尝试自己打）：

{

  "scripts": {

    "start": "./node_modules/.bin/parcel ./src/index.html --no-cache",

    "build": "./node_modules/.bin/parcel build ./src/index.html --no-cache -d build"

  },

  "name": "你的文件夹名称",

  .....

}

step3 创建 HTML 文件

接着我们建立 src 文件夹，并在其中新建我们的 HTML / CSS 文件：

- 你的文件夹名称

  - node_modules

  - tsconfig.json

  - package.json

  - package-lock.json

  - src

    - index.html

    - style.css

src 是之后我们唯一需要关注的文件夹。

step4 启动项目

照常的写你的代码，和之前没有任何区别。然后随便在 HTML 中输入一些标签和字符，在终端中输入：npm run start 并等待一会儿，待显示出

Server running at http://localhost:1234

  Built in xxxx.

之后，方可打开浏览器，输入他输出的网址。

此时显示了你刚刚在 HTML 中写的文字即是成功了。

step5 创建 TypeScript 文件

首先在 src 中创建 main.ts 文件，并在 html 中引入。

- src

  - index.html

  - style.css

  - main.ts

因为 p5 的特殊性质，所以无法在 js 文件中提供完整的代码提示，必须使用 typescript。

step6 书写 p5

翻看 p5 的源代码我们发现，p5 本身是一个构造函数，接受两个参数，第一个是一个函数，函数接受一个参数，我们可以通过这个参数实现代码提示：

// main.ts

import P5 from 'p5';

const sketch = (p: P5) => {

  p.setup = () => {

    p.background(0);

  };

  p.draw = () => {

    p.background(0);

    p.fill(255);

    p.ellipse(0, 0, 25, 25);

  };

};

p5 的第二个参数是一个 HTML 元素，意思是我们可以将画布放到这个元素中去。

// index.html

<body>

  <div id="app"></div>

  <script src="./main.ts"></script>

</body>

这时候我们就可以使用 new P5(sketch, document.querySelector('#app')); 来挂载画布了。

（完）