processing.js vs p5.js-有什么区别？-js教程-PHP中文网

>使艺术家，设计师，教育工作者和初学者都可以访问编码，并将其重新诠释为当今的网络

demos

分析

结论

>编写您可能已经熟悉

我可以将processing.js或p5.js用于商业项目吗？但是，最好检查您在商业项目中使用的任何库或工具的特定许可条款，以确保您处于合规性。我项目的JS？

processing.js和p5.js？

我可以将processing.js或p5.js与其他JavaScript库或框架一起使用？

首页

web前端

js教程

processing.js vs p5.js-有什么区别？

Lisa Kudrow

Feb 21, 2025 am 08:57 AM

processing.js vs p5.js-有什么区别？

几天前，P5.JS被释放到野外。这是一个遵循处理学说的视觉编程的JavaScript库。根据这篇文章的

处理是一种环境/编程语言，旨在使视觉，交互式应用程序非常易于编写。它可以用于从教孩子如何编码到可视化科学数据的所有事物。>

这是这样的语言，部分落后于这样的巫术：

>

和此：

，当然，您可以在这里找到的所有东西。

但是，如果我们之前有processing.js，那是什么p5.js？钥匙要点

p5.js是处理语言的直接JavaScript端口，旨在使艺术家，设计师，教育工作者和初学者可以访问编码，而processing.js是一个转换器，将纯处理代码解释为即时的JavaScript。

p5.js可以使用添加库来扩展，例如p5.dom.js，它添加了使用P5创建和操纵HTML元素的选项，将滑块，按钮，表单元素添加到您的草图中。 > 在性能方面，processing.js似乎具有稳定的帧速率，并且在文本中尝试的两个演示中的性能都更好，保持稳定的帧速率约为58至60，而P5在绘制时，P5的稳定帧速率低至50闲置时最多可备份60

> P5.js正式得到处理基金会的正式支持，并配备了用于处理用户的过渡手册，但是Processing.js允许您学习处理和在其更快，更便携式到非WEB环境的环境中使用它。

什么是p5.js？

p5.js是一个javaScript库

>使艺术家，设计师，教育工作者和初学者都可以访问编码，并将其重新诠释为当今的网络

processing.js vs p5.js-有什么区别？ >所以，听起来像是在处理自己。但是它是什么

真正的

？

放松，困惑的读者，我们会做到的！首先，在这里观看他们惊人的热情介绍，然后回来。

>单击了吗？现在得到吗？不？好的。让我们分解。

processing.js和p5.js 之间的差异 tl; dr：p5是处理语言的直接JS端口。 processing.js是一个转换器，将纯处理代码解释为即时的JS。后者要求您学习处理，但不学习JS，反之亦然。

实时编译与语言翻译：processing.js是一个库，它采用原始处理代码（类似于Java，带有类型和所有类型），并将其转换为JavaScript。实际上，您在processing.js网站上在浏览器中看到的示例实际上是纯处理代码现场直播为JS。例如，这种转换类似于使用DART2JS在没有内置DART VM的浏览器中运行DART代码时获得的收益。另一方面，P5是处理为JS代码的完整转换 - 所有功能最终都将被翻译，并且您将在JavaScript中写作。

在processing.js中，您需要使用带有数据源的帆布区域，该数据源导致PDE文件（带有处理源代码的文件）。也有其他方法，但简而言之，仅此而已。在P5中，您直接编写JS代码，并且它像您在网站上包含的任何其他JS文件一样被执行。

扩展：另一个区别是可以使用插件库扩展P5。例如，p5.dom.js库添加添加了使用P5创建和操纵HTML元素的选项，将滑块，按钮，表单元素添加到您的草图中，就像我们在链接到In的Hello视频中所做的那样上一节。

请注意，在两者中，只有P5正式得到处理基金会的正式支持，甚至还有用于处理用户的过渡手册。

demos

>让我们看看演示比较，以获得完整的要点。我制作了一个github存储库，其中包含每种方法中编写的相同演示的存储库。

1	`<span>git` `clone` `https://github.com/Swader/processing</span>`

登录后复制

在处理文件夹中，您有两个子文件夹：处理和P5。每个都包含Demo1和Demo2子目录，其中包含index.html文件。这是您可以在浏览器中运行的内容并进行测试。第一个示例来自P5网站 - 一个不断绘制的椭圆形，当鼠标单击时变黑。

请注意，processing.js使用AJAX请求（通过XHR）加载PDE文件，因此，如果您尝试通过运行index.html将其在浏览器中打开，则将获得交叉原始错误。为了使其正常运行，您可能应该设置一个虚拟服务器以访问样品。最好是通过在一个流浪盒中改进宅基地的实例 - 您将在五分钟内启动并运行。

p5.js

在这种情况下，我们需要包含我们的草图代码的Sketch.js文件以及它运行的index.html文件。 Sketch.js代码如下：

<span>function setup() {
</span><span>  createCanvas(640, 480);
</span><span>}
</span><span>
</span><span>function draw() {
</span><span>  if (mouseIsPressed) {
</span><span>    fill(0);
</span><span>  } else {
</span><span>    fill(255);
</span><span>  }
</span><span>  ellipse(mouseX, mouseY, 80, 80);
</span><span>}</span>

登录后复制

index.html文件仅包含以下内容：

<span><head>
</span><span>  <script language="javascript" src="../p5.js"></script>
</span><span>  <!-- uncomment lines below to include extra p5 libraries -->
</span><span>    <!--<script language="javascript" src="../addons/p5.dom.js"></script>-->
</span><span>  <!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
</span><span>  <script language="javascript" src="sketch.js"></script>
</span><span></head>
</span><span>
</span><span><body>
</span><span></body></span>

登录后复制

> processing.js

在此示例中，我们需要一个带有处理代码的PDE文件。在我们的情况下，这是sketch.pde，带有以下P5翻译代码：

然后，我们有我们的index.html文件：

1	`<span>git` `clone` `https://github.com/Swader/processing</span>`

登录后复制

分析

乍一看，没有明显的差异。两个样本以大致相同的速度运行，表现良好，并且具有相似的语法。但是，如果您使用的是Google Chrome，然后转到Chrome：//标志，然后激活帧速率计数器（请参见下图），您会注意到processing.js canvas中的绘图保持稳定的帧速率大约58至60，而绘画时P5的低至50，闲置时返回60。另一个有趣的事实是，即使您的光标在帆布区域外，处理始终都使用硬件加速度

。另一方面，P5如果没有更改画布正在待处理（您的光标不在图纸区域之外），则会停止渲染，因此在不绘制时减轻负载。

演示2 processing.js vs p5.js-有什么区别？

>让我们现在进行另一个演示 - 一种简单的粒子效果。该粒子发射极将在随机方向上产生重力敏感的颗粒，我们将再次查看帧速率。我们将使用（转换为P5）的示例是此。

>

> processing.js

sketch.pde的代码是上面链接的示例的一个：

>

> p5

<span>function setup() {
</span><span>  createCanvas(640, 480);
</span><span>}
</span><span>
</span><span>function draw() {
</span><span>  if (mouseIsPressed) {
</span><span>    fill(0);
</span><span>  } else {
</span><span>    fill(255);
</span><span>  }
</span><span>  ellipse(mouseX, mouseY, 80, 80);
</span><span>}</span>

登录后复制

从上述翻译时的P5代码如下：

分析

>再次，我们看到processing.js的帧速率稍好。 P5将其保持在56左右，而processing.js似乎处于58左右的地面。在这两种情况下，processing.js都证明了胜利，性能。

<span><head>
</span><span>  <script language="javascript" src="../p5.js"></script>
</span><span>  <!-- uncomment lines below to include extra p5 libraries -->
</span><span>    <!--<script language="javascript" src="../addons/p5.dom.js"></script>-->
</span><span>  <!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
</span><span>  <script language="javascript" src="sketch.js"></script>
</span><span></head>
</span><span>
</span><span><body>
</span><span></body></span>

登录后复制

结论

P5JS是一个年轻而雄心勃勃的项目，旨在以比处理更容易接近处理的方式将视觉编程带入大众。虽然目前正在被迫在某种程度上被愚弄，但该团队努力工作将其余的处理语言移植到此JS对应物中。>

使用P5而不是处理的优点。

>编写您可能已经熟悉

的JS代码

由加工基金会正式支持

使用DOM库插件进行

HTML DOM操纵 - 将常见的HTML元素添加到您的P5草图和更多

时的资源上的较轻
使用processing.js：
>似乎具有稳定的帧速率，并且在两个演示中都表现更好

>我们将密切关注这个图书馆并定期进行游戏。你会？让我们知道，如果您提出一些有趣的例子，我们很想写关于它们的！

经常询问的问题（常见问题解答）

> processing.js和p5.js？

procesing.js和p5.js之间的主要区别是什么JavaScript库，用于创建网络上的可视化，动画和交互式内容。但是，它们有一些关键差异。 processing.js是用Java编写的原始处理语言的端口，用于JavaScript。它旨在与现有的处理代码兼容，这意味着它可以运行未修改的处理草图。另一方面，P5.JS是对处理原理的新解释，从头开始为网络设计。它具有更简单，更类似JavaScript的语法，并且具有更现代的，更现代的网络友好方法来处理媒体和互动性。

p5.js比processing.js更容易学习。，通常认为P5.js比processing.js更容易学习，尤其是对于初学者而言。这是因为P5.js具有更简单，更直观的语法，更接近标准JavaScript。它还具有更具用户友好的方法来处理媒体和互动性，并具有鼠标和键盘输入，图像和声音加载以及画布绘图之类的内置功能。此外，P5.js拥有一个非常活跃的社区和可用的大量学习资源，包括教程，示例和一个友好的论坛。

我可以在同一项目中使用processing.js和p5.js吗？在技术上可以同时使用processing.js和p5.js

，但通常不建议使用。这是因为两个库具有不同的语法和方法来处理媒体和互动性，这可能导致混乱和兼容性问题。相反，通常最好选择一个库并在项目期间坚持下去。 processing.js是其与现有处理代码的兼容性。如果您有要在网络上运行的处理草图，则可以使用processing.js进行最小修改。此外，processing.js具有更传统的类似Java的语法，某些程序员可能更熟悉。

>

>使用p5.js？与processing.js相比，有几个优点。首先，它具有更简单，更直观的语法，它更接近标准的JavaScript，使学习和使用更容易。其次，它具有更现代的，更现代的网络友好方法来处理媒体和交互性，并具有鼠标和键盘输入，图像和声音加载以及画布绘图之类的内置功能。最后，P5.JS拥有一个非常活跃的社区和大量的学习资源，使其成为初学者和经验丰富的程序员的绝佳选择。

我可以将processing.js或p5.js用于商业项目吗？但是，最好检查您在商业项目中使用的任何库或工具的特定许可条款，以确保您处于合规性。我项目的JS？

processing.js和p5.js之间的选择在很大程度上取决于您的特定需求和偏好。如果您有要在网络上运行的现有处理代码，或者您喜欢更传统的类似Java的语法，则Processing.js可能是更好的选择。另一方面，如果您从头开始一个新项目，或者您喜欢更简单，更像JavaScript的语法以及更现代，更现代的，对处理媒体和互动性的方法，那么P5.js可能是更好的选择。

processing.js和p5.js？

processing.js和p5.js之间是否有任何性能差异动画顺利。但是，任何JavaScript库的性能都可以受到多种因素的影响，包括代码的复杂性，运行代码的设备的功能以及Web浏览器中JavaScript引擎的效率。因此，在各种设备和浏览器上测试您的代码总是一个好主意，以确保最佳性能。

我可以将processing.js或p5.js与其他JavaScript库或框架一起使用？

是的，processing.js和p5.js均可与其他JavaScript库或框架一起使用。但是，重要的是要了解潜在的兼容性问题并彻底测试您的代码，以确保一切正常。 > processing.js和p5.js都有大量可用的学习资源。对于processing.js，您可以从具有教程，示例和参考指南的官方处理网站开始。对于P5.js，您可以从官方P5.JS网站开始，该网站上有教程，示例，参考指南和友好的论坛。此外，有许多在线教程，视频和课程可用于两个图书馆。

以上是processing.js vs p5.js-有什么区别？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn