p5 js

引言

JavaScript 是一种功能强大且用途广泛的编程语言，用于各种事物。P5.js 是 JavaScript 中的一个此类库，主要用于创意编程。p5 中的 **p** 代表 **Processing。** 它是一个依赖于 Processing 的库，专为初学者设计，易于适应、学习和掌握。该库的另一个应用是在交互式和图形应用程序的设计中。P5.js 使编程变得有趣，因为用户觉得它富有创意，并且可以轻松地可视化他们用几行代码创建的小组件。

此外，使用 JavaScript 的另一个优势是可以使用它通过各种媒介提供的广泛可用性和普遍支持。我们已经知道，当今大多数 Web 浏览器都内置了 **JavaScript。** 因此，p5.js 库也可以在浏览器本身中运行程序。

广义上讲，Processing 是一种脚本语言，主要关注程序员在快速创建软件原型方面的可行性。它也可以称为一种快速试验和实现的方法，用于检查特定功能是否正常工作。因此，名称 Processing (p5) 通常被称作 sketches。

p5.js 没有首选编辑器。开发人员可以选择各种可用选项，如 **VS Code、Sublime Text** 或 Bracket，但处理 p5.js 的最佳选择是在线提供的官方 p5.js **Web Editor**。它是一个高度基于 Web 的编程环境构建的。

pj.5 和 JavaScript 有区别吗？

如前所述，JavaScript 是一种广泛的核心编程语言，提供所有类似的编程概念的功能，如函数、循环、DOM 操作、数组和条件语句。它具有庞大的浏览器支持，核心 JavaScript 的功能可以与任何支持它的框架或库一起使用。另一方面，p5.js 是一个用 JavaScript 编码的库，因此核心 JavaScript 的所有功能以及强大的浏览器支持都可用。

让我们通过一些编码示例更深入地讨论 p5.js。

输出

在上面的示例中，我们定义了一个 setup() 函数，其中包含一个内置方法，用于定义具有尺寸作为参数的画布比例。下一个函数 draw() 是一个类似的内置函数，它在控制台上显示内容，就像核心 JavaScript 中的输出选项一样。我们还可以指定颜色代码或颜色名称，该函数将显示具有预定义尺寸和颜色的画布。

注意：setup() 函数仅在程序开始时执行一次，并且 creatCanvas 必须始终是第一条语句。同样，draw() 函数在程序执行停止时执行。每条语句按顺序执行，在读取最后一行后，第一行会再次执行。

p5.js 的 Web 编辑器结构

为支持 p5.js 而提供的 Web 编辑器是一个出色的工具，可以让您立即开始编程。要使用此编辑器，建议您注册或登录以有效使用它。它是一个实时编辑器，在创建和运行不同的函数时可以进行可视化。请参考下图并观察控制流是如何实现的。

Web 编辑器提供了一个易于使用的界面，在使用功能时混乱较少。您可以无缝地调试、重新编程，因此它是一个提供基于 p5.js 编程范例的各种设计方法的绝佳工具。

让我们通过更多示例来了解如何使用 p5.js 图形化设计各种事物。

输出

在上面的代码片段中，我们定义了一个函数()，以便在程序执行时开始一次。在下一个 draw() 函数中，我们有一个预定义的 eclipse() 函数，它接受要绘制的圆的尺寸。我们使用了较小的尺寸来显示圆的半径或直径，这可以从代码本身轻松理解。

P5.js 提供了各种设计方法。例如，有用于创建 **rectangle、eclipse、** 获取 **coordinates、fill 和 stroke** 的预定义函数。因此，在下面的示例中，我们将使用其中一些内置函数来理解它们是如何协同工作的。请参考下面的代码以更好地理解。

输出

很容易理解，如果我们能理解设计模式及其尺寸，那么上面的函数就可以动态工作。在上面的代码中，我们考虑了各种设计方法，包括 rect() 和 stroke() 方法，它们为上面代码片段中定义的形状添加了一些有趣的设计。

同样，p5.js 拥有出色的设计模块，可以帮助我们按照自己想要的方式进行设计。

总结

P5.js 是 JavaScript 中的一个库，它提供了出色的设计机制，并且具有导入设计模式到您的源代码中的丰富功能，而对 CSS 的要求很少。它还有一个庞大的开发者社区，可以提供与我们可能包含在我们设计中的方法相关的技术支持。尽管 p5.js 并非独立于设计。它可以与事件、循环和其他功能的纯 JavaScript 概念一起使用。使用 p5.js 的主要目的是利用构造设计模式的便捷性，然后将其导入到您的项目或初学者友好的语言中。