思索 p5.js 的最佳实践

zoukankan html css js c++ java

思索 p5.js 的最佳实践
思索 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 的初学者较多，还是说一下如何搭建一个前端项目吧。

完整版本会写在最后一节，这里只提供可运行的步骤。
1. 官网下载 Node.js，一路默认选项安装；
2. 下载 VSCode，他为我们提供了完善的代码提示支持；
3. 新建项目文件夹，命名；
4. 将文件夹拖入 VSCode；
5. 点击 VSCode 菜单栏的“终端”或是“Terminal”选项，选择新建终端；
6. 终端内输入：npm config set registry https://registry.npm.taobao.org && npm init -y && npm i ts-p5 && npm i -D parcel-bundler；
7. 此时文件夹内出现了 package.json 与 package-lock.json 文件，打开前者；
8. 在第一行大括号的末尾回车，输入：
  
  { // 在这里回车 "scripts": { "start": "./node_modules/.bin/parcel ./src/index.html --no-cache", "build": "./node_modules/.bin/parcel build ./src/index.html --no-cache -d build" }, // ......
9. 新建 src 文件夹，让你的目录看起来是这样：
  
  - 你的文件夹名称 - node_modules - package.json - package-lock.json - src - index.html - style.css - main.js
10. 只需要在 index.html 中引入 main.js 和 style.css；
11. 在 index.html 中写入以下代码：
  
  <body> <div id="sketch"></div> <script src="./main.js"></script> </body>
12. 在 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')); 来挂载画布了。

（完）
查看全文

相关阅读:
OTA JAR和JAD的mime不同
 document.getElementById('selCatalog').remove(i)突然无效？？？！
判断WAP1.1和WAP2.0并解析为wml或xhtml
IE和firefox下显示html内容
 unixrisk tip
unixftp windows
unixstdin/stdout/stderr
峰鸟摄影
 linuxgrep commond
unixtutorial(recommended)

原文地址：https://www.cnblogs.com/xhyccc/p/14157653.html

思索 p5.js 的最佳实践

思索 p5.js 的最佳实践

官网推荐用法

关于最佳实践的思考

运用 OOP 与 SOA 解耦项目

step1 创建 Star 类

step2 创建 Service

step3 写入 p5

ts-p5 以及环境搭建

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

step1 初始化项目

step2 创建启动脚本

step3 创建 HTML 文件

step4 启动项目

step5 创建 TypeScript 文件

step6 书写 p5