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多站点HTTPS配置
可以使用letsencrypt(certbot)免费证书服务。支持多系统、多站点和多目录,支持wildcard(通配符域名),90天生效,可用定时任务自动更新。需要注意一点的是apache2.4以下版本需要在默认的ssl配置中添加如下的指令:NameVirtualHost
3D感知和建模关键硬件技术:双目、3D结构光和TOF
无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...
CSS3属性选择器特性使用详解
CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...
通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质
使用HTML5 Canvas实现的界面元素截屏功能
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
深度贴图(depth map)概念简介和生成流程
Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可...
粒子运动模拟 - Verlet积分算法简介
Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...
WebVR简介和常用资源链接
什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星...
Three.js入门教程5 - 10个必须知道的编程技巧
作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...
CSS3图片混合(Blend)效果及其参考计算公式一览表
在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...
WebGL入门教程5 - 详解纹理滤镜(Texture Filter)
WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
这个参数用来处理当对象出现缩放时,纹理如何处理中间...Canvas实例教程:图像移动、大小调整和裁剪
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动、调整大小和...
更多...