p5.js 中的函数简介
p5.js 是一个用于创意编程的 JavaScript 库，其重点是让艺术家、设计师、教育工作者、初学者、研究人员以及所有想要享受艺术创作乐趣的人都能轻松、包容地进行编程。
本文将讨论 p5js 中的两个主要功能：
- 设置功能和
- 绘制函数
接下来我们会做一个简单的练习，浅尝辄止地了解一下接下来要讨论的内容。看起来好像很多，对吧？其实很简单，也很短。那么，开始吧！
先决条件
要完成本教程，您只需要具备 JavaScript 的基础知识以及文本编辑器。那么，让我们开始吧！
注意：如果您是 JavaScript 新手，请查看freecodecamp上的这篇免费且全面的教程。
入门
p5js 可以通过多种方式使用，其中最简单的方法之一是使用在线 p5.js 编辑器，点击此处即可访问。以下是编辑器界面的示例：
另一种方法是下载所需文件并将其链接到您的标记中，或者直接将其 CDN 包含在您的标记中，如下所示：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
</head>
<body>
</body>
</html>
提示：如果您使用的是 VSCode，强烈建议您下载 P5.js扩展。
设置功能
在 p5.js 中，该setup()函数会在程序启动后立即运行。我们使用此函数设置初始环境属性，例如文本颜色、屏幕尺寸和背景颜色，以及加载图像和字体等资源。此外，请注意，您的 p5.js 程序应该只包含一个setup()函数。
绘制功能
该draw()函数在上一个函数之后调用setup()。该draw()函数用于执行代码块内的代码，直到程序停止。
让我们来做一些实际操作：
function setup() {
createCanvas(400, 300);
}
function draw() {
background(0);
noStroke();
fill(255);
ellipse(200, 150, 75, 75);
}
深入解释
设置函数只会执行一次，也就是草图开始绘制的那一刻。这就是为什么我们要输入参数，createCanvas()因为我们只想做一次这样的操作。你不想多次创建画布，也不想在最后再创建一个画布，那样没有意义。所以，程序开始时的设置过程会创建画布。
绘制操作会一直持续下去，换句话说，就是在一个“循环”中，绘制操作中的代码会一直循环执行。
那么，为什么会这样呢？为什么我们只执行一次，而其他代码却会一直执行呢？当然，这并非软件的固有工作方式。所有软件都有其自身的操作流程，但这种流程对于动画程序和图形程序来说比较常见。让我们来看看代码的输出结果：
我们只有一个简单的草图，中间画着一个圆。我们可以看到程序的运行流程，但看不到任何变化。然而，我们需要一些能够改变绘制函数内部某些变量的东西。让我们思考一下，如果我们能够用鼠标移动这个圆，会是什么样子？因此，我们可以引入一个变量。变量是一个命名实体，一个用于存储数据的关键字。在这个例子中，我们想要存储一个具有特定值的数据。在 p5 中，我们可以免费获得一些变量，其中一个是 mouseX，另一个是 mouseY。这意味着，当我们在代码中写入 mouseX 时：
function setup() {
createCanvas(400, 300);
}
function draw() {
background(0);
noStroke();
fill(255);
ellipse(mouseX, 150, 75, 75);
}
然后我们重新运行：
我们看到圆圈相对于鼠标方向移动。实际上，绘制循环不断重复执行，持续获取 mouseX 的动态当前值。这只是我们的起点，你可以用系统变量 mouseX 和 mouseY 做什么呢？你可以创建一个简单的绘图程序。我们可以通过编写以下代码来实现：
function setup() {
createCanvas(400, 300);
background(0);
}
function draw() {
noStroke();
fill(255);
Circle(mouseX, mouseY, 24);
}
以下是我们的输出结果：
结论：
我们讨论了两个函数：setup 函数和 draw 函数，它们定义了草图的绘制流程。这些函数本质上都是事件。setup 函数在开始时执行，draw 函数则持续执行。我们还可以定义许多其他事件，例如 mousepressed 函数。这是一个等待事件，
它只会在鼠标点击时触发。更多示例，您可以访问 YouTube 上的 coding train 频道（链接在此）。如果您觉得本文有用，请分享。