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

techbrood 发表于 2016-05-18 13:05:24

标签: processing, p5, 教程, 实例

- +
什么是Processing

Processing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。

什么是Processing.js

为了能让Processing的代码能在Web上工作,John Resig开发了Processing.js,

该JS开发库用来完成两个方面的任务:

  1. 能把Processing语言动态转换成JS,从而在Web环境中执行;

  2. 提供了一套完整的2D图形处理接口(API),直接以JS语言来编程。

显然其最实用的地方是能直接利用现有的大量Processing代码。

什么是P5.js

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


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

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

例1:使用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加载和绘制图像

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);
}

2016.05.18                      

possitive(10) views22886 comments1

发送私信

最新评论

寻觅良药ˇ 2017-01-17 16:44:07

一般的论坛能不能用
我的论坛站
www.mccake.net


请先 登录 再评论.
相关文章
  • 3D感知和建模关键硬件技术:双目、3D结构光和TOF

    无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...

  • React JSX语法简介

    JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...

  • CSS3人行走动作图解和动画实现

    对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...

  • JavaScript语言多编程范式简介

    和C++等语言类似,JS支持多范式(paradigms)编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式:命令式、面向对象和函数式。命令式(Imperative JavaScript)命令式就是简单的从上而下完成任务,流水账过程式编码风格:function

  • CSS3弹性布局弹性流(flex-flow)属性详解和实例

    弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction...

  • Babylon.js入门教程和开发实例

    Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...

  • 计算WebGL中的uniforms变量使用数

    在使用Three.js为人体模型加载皮肤材料时,启用了skinning:true的参数。有时候会导致GL编译错误,提示“too many uniforms”。下面的文章有助于理解错误原因和检...

  • 深度贴图(depth map)概念简介和生成流程

    Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可...

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

  • 使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解

    要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位、自动外边距和CSS3平移变换等。你可能已经使用了这些方...

  • HTML网页布局:静态、自适应、流式、响应式

    静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...

  • Canvas实例教程:图像移动、大小调整和裁剪

    本文介绍如何使用JavaScript和HTML5 Canvas元素来移动、调整大小和...

  • SVG过滤器feColorMatrix矩阵变换效果用法详解

    在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...

  • 更多...