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
- 相关文章
CentOS6 Apache2.2用域名配置多虚拟机
在CentOS下使用域名配置多虚拟机的步骤如下:
1. 使用WebAssembly工作原理和JavaScript语言性能对比分析
本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...
常见面试题JS语言中四种函数调用方式实例讲解
JS的语言世界中函数(function)是一等公民,函数的调用有多种方法。普通调用这个是最常见和直接的方式:function
CSS3弹性布局弹性流(flex-flow)属性详解和实例
弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction...
使用HTML5 Canvas实现的界面元素截屏功能
HTML5动画背后的数学 - 粒子群仿生算法简介
本站收录了多个算法可视化动画,如模拟鸟群运动:http://wow.techbrood.com/fiddle/30529等等。这里面除...
HTTP1.1协议现状、问题和解决方案
HTTP的现状最早的HTTP协议非常简单,只能用来传送文本,方法也只有GET,后来逐步发展到1.1,能够支持多种MIME格式数据(如文本、文件),支持GET,POST,HEAD,OPTI...
HTML5、Hybrid APP、Native APP对比和技术选型
HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...
如何实现SVG clipPath自适应被裁剪对象
CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁...IE各版本CSS Hack(兼容性处理)语法速查表
为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...
使用Canvas绘制完美的不完美圆形
真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...
Three.js 开发基础知识 - 绘制3D对象
Three.js是一个用来简化WebGL开发的JavaScript库,比如绘制一个三维立方体,使用WebGL需要100多行,那Three.js只要10几行就能够完成。本文通过创建一个立方体来...
如何使用CSS3实现一个3D商品标签
使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上,来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背...
在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...