p5 是一款使用 JavaScript 进行创意编程的库，它提供了许多绘图和动画的实现方式。使用 p5，你可以很方便地制作交互式图形或艺术作品。在本文中，我们将介绍如何使用 npm 包 p5，以及如何利用 p5 创造出一些有趣的效果。
安装 p5
首先，我们需要使用 npm 将 p5 添加到我们的项目中。在终端中，输入以下命令：
npm install p5
安装完成后，我们需要创建一个新的 JavaScript 文件，以开始使用 p5。
创建画布
为了使用 p5 来绘制图形，我们需要在 HTML 文件中添加画布元素，如下所示：
<canvas id="canvas"></canvas>
接下来，在 JavaScript 文件中，我们使用 p5 的 createCanvas() 方法来创建画布：
-- -------------------- ---- -------
----- ------ - ----------------------------------
----- ------- - ------------------------
----- ----- - ------------------
----- ------ - -------------------
----- -- - --- ------------------- -
------------ - -- -- -
-------------------------- --------
--
---在代码中，我们获取到画布并设置画布的宽度和高度。然后我们使用 p5 的 createCanvas() 方法，初始化画布的大小，这样我们就准备好了开始绘制图形。
绘制形状
p5 支持多种绘图方式，我们这里只介绍其中一些常用的方法。
绘制矩形
我们可以使用 rect() 方法绘制矩形，如下所示：
sketch.fill(255, 0, 0); sketch.rect(0, 0, 100, 100);
在代码中，我们使用 fill() 方法设置矩形填充颜色。然后，使用 rect() 方法，指定矩形的左上角 x 和 y 坐标，以及矩形的宽和高。
绘制圆形
我们可以使用 ellipse() 属性绘制圆形，如下所示：
sketch.fill(255, 0, 0); sketch.ellipse(200, 200, 50, 50);
在代码中，我们使用 fill() 方法设置圆形的填充颜色。然后，使用 ellipse() 方法指定圆心的 x 和 y 坐标，以及圆形的宽和高。
绘制线条
我们可以使用 line() 方法绘制线条，如下所示：
sketch.stroke(255); sketch.line(100, 100, 200, 200);
在代码中，我们使用 stroke() 方法设置线条的颜色。然后，使用 line() 方法指定起点和终点所对应的 x 和 y 坐标。
添加交互性
p5 提供了鼠标和键盘等多种交互方式，我们可以利用这些事件为图形添加交互特性。
鼠标事件
我们可以使用 mousePressed() 方法为鼠标点击添加事件，如下所示：
sketch.mousePressed = () => {
// 你的代码
};在代码中，我们使用 mousePressed() 方法，指定当鼠标被点击时要执行的代码。
键盘事件
我们可以使用 keyPressed() 方法为键盘点击添加事件，如下所示：
sketch.keyPressed = () => {
// 你的代码
};在代码中，我们使用 keyPressed() 方法，指定当键盘有按键被按下时要执行的代码。
示例代码
-- -------------------- ---- -------
------ -- ---- -----
----- ------ - ----------------------------------
----- ------- - ------------------------
----- ----- - ------------------
----- ------ - -------------------
----- -- - --- ------------------- -
------------ - -- -- -
-------------------------- --------
--
----------- - -- -- -
-----------------
-------------- -- ------ --------
-------------- -- -----
----------------------------- -------------- --- ----
--
------------------- - -- -- -
-------------- ---- ---
---------------- ---- ---- -----
--
----------------- - -- -- -
-- ----------- --- ---- -
---------------- -- ---
------------------- ---- --- ----
-
--
-- --------在代码中，我们导入了 p5，创建了一个带有交互功能的矩形和圆形图形的示例。当我们在画布上点击鼠标，会显示一个绿色的正方形，当我们按下 w 键时，会在画布上显示一个红色的圆形。
总结
在本文中，我们介绍了如何使用 npm 包 p5 的一些基本方法和事件，以及如何为我们的图形添加交互功能。通过这些方法，我们可以更加灵活地创作出各种形式的作品。在学习使用过程中，您还可以查阅 p5 官方文档，了解更多的细节和交互方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb5bcb5cbfe1ea061146b