前言
在前端开发中，常常需要使用到画图、动画等功能，而 p5.js 是一个非常好用的 JavaScript 库。p5.js 提供了绘制图形、创建动画等现代化的功能，可以用于开发游戏、艺术品、数据可视化等各种场景。然而，使用 p5.js 开发项目时，我们需要做很多初始化工作，比如创建一个 canvas 和加载一些工具库。因此，安装和使用 p5.js 不是那么容易。为了解决这个问题，p5-setup 这个 npm 包应运而生。
p5-setup 是什么
p5-setup 是一个可以帮助你快速初始化 p5.js 项目的 npm 包。当你使用 p5-setup，他会自动创建一个 HTML 文件，包含一个 canvas 和导入 p5.js 库和其他工具库的代码。让你可以直接开始编写 p5.js 代码而不用再做工程初始化的繁琐工作。
安装 p5-setup
如果要使用 p5-setup，首先要安装 npm 包管理工具。安装完毕后，在终端中运行以下命令进行安装：
npm install -g p5-setup
接下来，我们就可以使用 p5-setup 命令了。
使用 p5-setup
使用 p5-setup 很简单，只需在终端运行命令：
p5-setup myProject
其中 myProject 是你想要创建的项目名，p5-setup 会在当前目录下创建一个名为 myProject 的文件夹，包含以下文件：
- index.html
- sketch.js
- p5.js
- p5.sound.js
- p5.dom.js
其中 index.html 包含了一个 canvas 元素和对 p5.js 库和其他资源的引用，sketch.js 是我们要编写 p5.js 代码的地方。
现在你可以使用你喜欢的编辑器打开 sketch.js 文件，编写你的 p5.js 代码。例如，我们想要在画布中画一个长方形，代码如下：
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
rect(50, 50, 100, 100);
}然后，在终端中进入 myProject 目录并运行：
npm start
这将启动一个本地服务器，打开浏览器并输入地址 http://localhost:3000，即可查看你的 p5.js 画布。
总结
使用 p5-setup 可以帮助你快速初始化一个 p5.js 项目，让你可以省去繁琐的初始化工作，直接开始编写 p5.js 代码。p5-setup 的使用也非常简单，你只需通过一个命令就可以创建项目并开始编写代码。希望这篇文章能够对你更好地使用 p5.js 有所帮助。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------------- ---------------
------- ------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------
-------
------ -
-------- ------
-
--------
-------
------
------- -------------------------
-------
-------function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
rect(50, 50, 100, 100);
}来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e9d81e8991b448e75d6