Processing.js和P5.js的功能简介和区别
什么是Processing
Processing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
什么是Processing.js
为了能让Processing的代码能在Web上工作,John Resig开发了Processing.js,
该JS开发库用来完成两个方面的任务:
能把Processing语言动态转换成JS,从而在Web环境中执行;
提供了一套完整的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。
下面给出两个在线实例,以方便你更直观的了解其使用方式:
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); }
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


- 相关文章
微信公众号在线生成二维码带参数怎么搞?
带参数二维码是微信公众号渠道二维码的一种实现
微信的带参数二维码有两种,一种是临时二维码,一种是永久二维码,但是永久二维码的生成是有个数限制的,微...html5跨平台实战-第一周-水平测验-新闻列表页面
这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图
CentOS6 Apache2.2用域名配置多虚拟机
在CentOS下使用域名配置多虚拟机的步骤如下:
1. 使用React JSX语法简介
JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...
函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
深入理解JS和CSS3动画性能问题和技术选择
本文对比了JS及其框架和CSS3的动画性能,并深入剖析了其内在原因。技术结论大致如下:1. jQuery出于设计原因,在动画性能上表现最差2. CSS3由于把动画逻辑推给了...
HTTP/2背景和新特性简介
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
粒子运动模拟 - Verlet积分算法简介
Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...
WebGL入门教程3 - Canvas、Context、API和绘制一个矩形
使用Canvas绘制完美的不完美圆形
真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...
使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解
要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位、自动外边距和CSS3平移变换等。你可能已经使用了这些方...
div 、section 、article的区别和使用场景
div 、section 、article的区别和使用场景
主要区别,以及适用场合如下:
1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标...在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...