Processing.js vs P5.js –有什么区别？

最新推荐文章于 2023-01-18 20:00:38 发布

dingshi7798

最新推荐文章于 2023-01-18 20:00:38 发布

阅读量1.2k

点赞数

文章标签： javascript sketch git ViewUI

几天前， P5.js被释放了。这是一个遵循处理原则的用于可视化编程的JavaScript库。

根据这篇文章：

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

这是部分落后于巫术的语言，如下所示：

和这个：

当然，您也可以在这里找到所有内容。

但是，如果以前有过processing.js ，那么P5.js是什么？

什么是P5.js？

P5.js是一个JavaScript库，旨在

使艺术家，设计师，教育者和初学者可以访问编码，并在当今的网络上重新诠释

因此，听起来像处理本身。但是，真的是这样吗？

轻松一点，困惑的读者，我们一定会成功的！首先，在这里观看他们的精彩介绍，然后再回来。

它点击了吗？现在明白吗？没有？好。让我们分解一下。

Processing.js和P5.js之间的区别

TL; DR：P5是处理语言的直接JS端口。 Processing.js是一个转换器，可以将纯处理代码即时转换为JS。后者要求您学习处理，而不是JS，反之亦然。

实时编译与语言翻译 ：Processing.js是一个使用原始Processing代码（与Java类似，具有类型和所有类型）并将其即时转换为JavaScript的库。实际上，您在Processing.js网站上的浏览器中运行的示例实际上是实时转换为JS的纯Processing代码。例如，这种转换类似于使用Dart2js在没有内置Dart VM的浏览器中运行Dart代码时获得的转换。另一方面，P5是将Processing完全转换为JS代码的功能-所有功能最终都将被翻译，并且您将使用JavaScript编写。

在Processing.js中，您需要使用数据源定义一个画布区域，该数据源会导致一个PDE文件（一个包含Processing源代码的文件）。也有其他方法，但总的来说就是这样。在P5中，您直接编写JS代码，它的执行方式与您网站上包含的任何其他JS文件一样。

扩展：另一个区别是P5可以使用附加库进行扩展。例如，添加的p5.dom.js库增加了以下选项：使用P5创建和处理HTML元素，向滑块中添加滑块，按钮，表单元素以及更多内容，就像演示者在我们链接到的Hello视频中所做的一样上一节。

需要注意的是两个，只有P5正式被支持加工基金会甚至还有用于处理用户的过渡手册这里。

演示版

让我们看一下演示比较，以获取全部要点。我制作了一个Github存储库，其中包含用每种方法编写的相同演示。

git clone https : //github.com/Swader/processing

在processing文件夹中，有两个子文件夹： processing和p5 。每个将包含demo1和demo2子目录，其中包含index.html文件。这就是您可以在浏览器中运行并测试的内容。第一个示例来自P5网站-一个连续绘制的椭圆，当单击鼠标时该椭圆会变为黑色。

请注意，Processing.js使用Ajax请求（通过XHR）加载pde文件，因此，如果尝试仅通过运行index.html在浏览器中打开它，就会出现跨域错误。为了使其正常运行，您可能应该设置一个虚拟服务器，通过它可以访问示例。最好在“无家可归者”盒子中的Homestead Improvement实例完成–您将在五分钟内启动并运行。

P5.js

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

function  setup ()   { 
  createCanvas ( 640 ,   480 ); 
 } 

 function  draw ()   { 
   if   ( mouseIsPressed )   { 
    fill ( 0 ); 
   }   else   { 
    fill ( 255 ); 
   } 
  ellipse ( mouseX ,  mouseY ,   80 ,   80 ); 
 }

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

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

 <body> 
 </body>

Processing.js

对于此示例，我们需要一个带有处理代码的pde文件。在我们的例子中，这是带有以下经过P5转换的代码的sketch.pde ：

void  setup ()   { 
  size ( 640 ,   480 ); 
 } 

 void  draw ()   { 
   if   ( mousePressed )   { 
    fill ( 0 ); 
   }   else   { 
    fill ( 255 ); 
   } 
  ellipse ( mouseX ,  mouseY ,   80 ,   80 ); 
 }

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

<head> 
   <script   language = "javascript"   src = "../processing.min.js" ></script> 
 </head> 

 <body> 
     <canvas   data-processing-sources = "sketch.pde" ></canvas> 
 </body>

分析

乍一看，没有明显的区别。两个示例以大约相同的速度运行，表现良好，并且具有相似的语法。但是，如果您使用的是Google Chrome浏览器，并转到chrome://flags ，然后激活帧频计数器（请参见下图），则会注意到Processing.js画布中的绘图保持了稳定的帧频大约在58到60之间，而P5在绘制时会低至50，在闲置时会返回60。另一个有趣的事实是，即使您的光标在画布区域之外，Processing也始终使用硬件加速。另一方面，如果未对画布进行任何更改（您的光标在绘图区域之外），则P5将暂停渲染，从而减轻了未绘图时的负担。

演示2

现在让我们做另一个演示–一个简单的粒子效果。该粒子发射器将在随机方向上生成重力敏感粒子，我们将再次看一下帧频。我们将使用的示例（并转换为P5）是this 。

Processing.js

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

ParticleSystem  ps ; 

 void  setup ()   { 
  size ( 640 , 360 ); 
  ps  =   new   ParticleSystem ( new   PVector ( width / 2 , 50 )); 
 } 

 void  draw ()   { 
  background ( 0 ); 
  ps . addParticle (); 
  ps . run (); 
 } 

 // A simple Particle class 

 class   Particle   { 
   PVector  location ; 
   PVector  velocity ; 
   PVector  acceleration ; 
   float  lifespan ; 

   Particle ( PVector  l )   { 
    acceleration  =   new   PVector ( 0 , 0.05 ); 
    velocity  =   new   PVector ( random (- 1 , 1 ), random (- 2 , 0 )); 
    location  =  l . get (); 
    lifespan  =   255.0 ; 
   } 

   void  run ()   { 
    update (); 
    display (); 
   } 

   // Method to update location 
   void  update ()   { 
    velocity . add ( acceleration ); 
    location . add ( velocity ); 
    lifespan  -=   1.0 ; 
   } 

   // Method to display 
   void  display ()   { 
    stroke ( 255 , lifespan ); 
    fill ( 255 , lifespan ); 
    ellipse ( location . x , location . y , 8 , 8 ); 
   } 

   // Is the particle still useful? 
   boolean  isDead ()   { 
     if   ( lifespan  <   0.0 )   { 
       return   true ; 
     }   else   { 
       return   false ; 
     } 
   } 
 } 

 // A class to describe a group of Particles 
 // An ArrayList is used to manage the list of Particles  

 class   ParticleSystem   { 
   ArrayList < Particle >  particles ; 
   PVector  origin ; 

   ParticleSystem ( PVector  location )   { 
    origin  =  location . get (); 
    particles  =   new   ArrayList < Particle >(); 
   } 

   void  addParticle ()   { 
    particles . add ( new   Particle ( origin )); 
   } 

   void  run ()   { 
     for   ( int  i  =  particles . size ()- 1 ;  i  >=   0 ;  i --)   { 
       Particle  p  =  particles . get ( i ); 
      p . run (); 
       if   ( p . isDead ())   { 
        particles . remove ( i ); 
       } 
     } 
   } 
 }

P5

从上面翻译过来的P5的代码如下：

var  ps ; 

 function  setup ()   { 
    createCanvas ( 640 ,   360 ); 
    ps  =   new   ParticleSystem ( new  p5 . Vector ( width / 2 ,   50 )); 
 } 

 function  draw ()   { 
    background ( 0 ); 
    ps . addParticle (); 
    ps . run (); 
 } 

 function   Particle ( lvector )   { 
     this . location  =  lvector . get (); 
     this . acceleration  =   new  p5 . Vector ( 0 , 0.05 ); 

     var  random1  =   Math . random ()   *   (( Math . random ()   >   0.5 )   ?   - 1   :   1 ); 
     var  random2  =   Math . random ()   -   (( Math . random ()   >   0.5 )   ?   1   :   2 ); 

     this . velocity  =   new  p5 . Vector ( random1 ,  random2 ); 

     this . lifespan  =   255.0 ; 
 } 

 Particle . prototype . run  =   function ()   { 
     this . update (); 
     this . display (); 
 } 

 Particle . prototype . update  =   function ()   { 
     this . velocity . add ( this . acceleration ); 
     this . location . add ( this . velocity ); 
     this . lifespan  -=   1.0 ; 
 } 

 Particle . prototype . display  =   function ()   { 
    stroke ( 255 ,   this . lifespan ); 
    fill ( 255 ,   this . lifespan ); 
    ellipse ( this . location . x ,   this . location . y ,   8 ,   8 );     
 } 

 Particle . prototype . isDead  =   function ()   { 
     return   ( this . lifespan  <   0 ); 
 } 

 function   ParticleSystem ( location )   { 
     this . origin  =  location . get (); 
     this . particles  =   []; 
 } 

 ParticleSystem . prototype . addParticle  =   function ()   { 
     this . particles . push ( new   Particle ( this . origin )); 
 } 

 ParticleSystem . prototype . run  =   function ()   { 
     var  p ; 
     for   ( var  i  =   this . particles . length  -   1 ;  i  >=   0 ;  i --)   { 
        p  =   this . particles [ i ]; 
        p . run (); 
         if   ( p . isDead ())   { 
             this . particles . splice ( i ,   1 ); 
         } 
     } 
 }

分析

再一次，我们发现Processing.js的帧率略高。 P5将其保持在56左右，而Processing.js则保持在58左右。在这两种情况下，Processing.js都在性能方面取得了胜利。

结论

P5js是一个年轻且雄心勃勃的项目，旨在以比迄今为止的Processing更平易近人的方式将可视化编程带给大众。尽管目前在功能上有些笨拙，但团队仍在努力将其余处理语言移植到此JS对应语言中。

使用P5优于Processing.js的优点是：

编写您可能已经熟悉的JS代码
由Processing Foundation官方支持
带有DOM库插件的HTML DOM操作–将常见的HTML元素添加到P5草图等中
不绘制时减轻资源消耗

使用Processing.js的优点：

您将学习处理，并可以在非Web环境中更快，更轻便的环境中使用它
在我们尝试的两个演示中，似乎都有稳定的帧速率并表现得更好

我们将密切注意该库并定期使用它。你会？让我们知道，如果您提出了一些有趣的示例，我们很乐意为您撰写示例！

From: https://www.sitepoint.com/processing-js-vs-p5-js-whats-difference/

dingshi7798

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Processing.js vs P5.js –有什么区别？

几天以前， P5.js被释放到野外。这是一个JavaScript库，用于随后的处理原则可视化编程。按照这篇文章：处理是一个环境/编程语言，是为了使视觉，交互式应用程序非常容易编写。它可用于一切从教孩子如何代码以可视化的科学数据。这是这部分的背后是这样巫术语言：和这个：，当然，一切你可以找到这里。但是，如果我们有processing.js之前，有什么P5.js？ ...
复制链接

扫一扫