Processing.js和P5.js的功能简介和区别

缺乏、安全感 2021-09-16 05:06 437阅读 0赞

**什么是Processing**

Processing是关于数字艺术的编程语言，支持跨平台，语言本身是一个类Java语言，程序文件的后缀为.pde。通过编写processing程序，教师可以将复杂的物理、化学、数学原理形象的展示给学生。比如绘制各种曲线图，波线，粒子，绘制分子结构，当然在生理卫生课上还可以绘制一群小蝌蚪在游泳等动态的图形。具体介绍见：[https://blog.csdn.net/liuxiao723846/article/details/82024008][https_blog.csdn.net_liuxiao723846_article_details_82024008]

**什么是Processing.js**

为了能让Processing的代码能在Web上工作，John Resig开发了Processing.js（这是继Jquery之后，他的第二个力作），该JS开发库用来完成两个方面的任务：

1.  能把Processing语言动态转换成JS，从而在Web环境中执行；
2.  提供了一套完整的2D图形处理接口(API)，直接以JS语言来编程。

显然其最实用的地方是能直接利用现有的大量Processing代码。Processing.js可以使用JavaScript绘制形状sharp和操作HTML5 canvas元素产生图像动画。官网：[http://processingjs.org][http_processingjs.org]

**什么是P5.js**

P5是Processing语言的一个JS移植版本，使其能在Web中工作。它完全使用JavaScript来实现Processing语言相同的功能，但并不会动态翻译Processing语言代码，这一点和Processing.js不同。也就是P5.js差不多等同于Processing.js的JS API部分。但P5.js的功能更单一，角色更专注，且也是Processing基金会唯一支持的项目。官网：[https://p5js.org/][https_p5js.org]

所以，对我而言，如果你想利用已有的Processing（java）代码，你可以使用Processing.js。如果你想直接使用JS创建一些艺术作品（如基本的几何图形、图像处理、交互式动画和操作DOM等），那么推荐使用P5.js。

下面给出两个在线实例，以方便你更直观的了解其使用方式：

1、[使用Processing.js加载和绘制图像][Processing.js]

PImage a;  // Declare variable "a" of type PImage
    void setup() {
        noLoop(); // rather than drawing as an animation, only call draw() once
        size(200, 200);
        // Load the images for use in the sketch 
        a = loadImage("/uploads/160501/moon.png"); 
    } 
     
    void draw() {
    image(a, 0, 0); // Display the image at point (0,0) with natural width and height 
        // Display the image again, this time starting at (width/2, 0), 
        // and scaled to 50% in both x and y direction
        image(a, width/2, 0, a.width/2, a.height/2);  
    }

2、[使用P5.js加载和绘制图像][P5.js]

var img; // Declare variable 'img'.
     
    function setup() {
        createCanvas(680, 480);
        img = loadImage("/uploads/160501/moon.png"); // Load the image
    }
     
    function draw() {
        // Displays the image at its actual size at point (0,0)
        image(img, 0, 0);
        // Displays the image at point (0, height/2) at half size
        image(img, 0, height / 2, img.width / 2, img.height / 2);
    }

注：上面连个连接是在线的processingjs和p5的编辑器。

[https_blog.csdn.net_liuxiao723846_article_details_82024008]: https://blog.csdn.net/liuxiao723846/article/details/82024008
[http_processingjs.org]: http://processingjs.org
[https_p5js.org]: https://p5js.org/
[Processing.js]: http://wow.techbrood.com/fiddle/25968
[P5.js]: http://wow.techbrood.com/fiddle/25994