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(19) views25310 comments1

发送私信

最新评论

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

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


请先 登录 再评论.
相关文章
  • 2019年开源WebRTC媒体服务器选型比较

    什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...

  • OpenGL/WebGL顶点坐标变换过程简介

    世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...

  • WebGL场景中多相机拍摄的原理和意义

    一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
    3D相机渲染的基本原理是依靠颜色...

  • html5跨平台实战-第一周-水平测验-新闻列表页面

    这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图

  • JavaScript语言多编程范式简介

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

  • 常见面试题JavaScript闭包(ES5语法)

    JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()

  • Web界面编程状态变化和JS开发框架(React/Angular/Ember)

    UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...

  • 深入理解JS和CSS3动画性能问题和技术选择

    本文对比了JS及其框架和CSS3的动画性能,并深入剖析了其内在原因。技术结论大致如下:1. jQuery出于设计原因,在动画性能上表现最差2. CSS3由于把动画逻辑推给了...

  • 深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

    本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效...

  • 三维向量的简单运算和实用意义

    在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...

  • Three.js入门教程2 - 着色器(下)

    这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程。

  • WebGL入门教程1 - 3D绘图基础知识

    现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...

  • 如何使用CSS3实现一个3D商品标签

    使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上,来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背...

  • 更多...