适用于javascript开发者的Processing.js入门教程


Posted in Javascript onFebruary 24, 2016

这个入门指导是为javascript开发者写的。读这个文档之前,你最好掌握javascript和web开发编程,并还会非常基本的 Processing 知识。
目录:
为没有耐心看长篇大论的人准备:
         如果你很着急入门,那么你就需要知道以下几点:
             1、Processing.js 把 Processing 代码转变成能够在浏览器端运行的javascript代码,实质是通过<canvas>标签来实现绘图的;
             2、为了使用它,你的首先下载 Processing.js;
             3、创建你的 后缀名为".pde"的 Processing 文件,它和通常你创建的普通文本文件一样,例如: hello-web.pde
             4、创建一个 html 页面,然后在页面里外引用 Processing.js文件,再添加一个<canvas>标签,该<canvas>标签上指明有你的 sketch file(顾名思义,草图文件,就是Processing 文件),sketch file 可以有多个文件,多个文件用空格隔开。例如:            

<script src="processing-1.3.6.min.js"></script> 
<canvas data-processing-sources="hello-web.pde"></canvas>

加载你的 web 页面,processing.js 将解析、翻译 sketch file,然后你的sketch file就会运行在浏览器里。
Processing.js的来源?
Processing为何物?

          Processing 语言原先被MIT创建,被作为多媒体实验室 和美学&计算机组的一部分。借助Processing能打通软件开发者,艺术家,数据可视化工程师们之间的隔阂,并且能够让编程人员和非编程人员非常容易地胜任视觉化工作。Processing 是用java创建的,你可以把它认为是一种被简化了的java,并且带被简化了的用来绘画和绘图的API。
Processing 能在web端做点什么?
          Processing 拥有大型并且和活跃的社区群体,他们擅长创建2D和3D图象,可视化数据套件,音频,视频等等。因为HTML5,web端拥有了 canvas,audio,video,这些原先只能通过flash 和java插件拥有的功能。与此同时,高级的javascript引擎使得javascript 可以完全胜任以前做起来很慢的事情。
         通过把Processing语言移植到web端,Processing 和 web社区都会收益。对于Processing来说,这意味这源码不仅可以在桌面上工作,而且可以在跑在浏览器上。对于web社区来说,一个新而成熟并且接近全功能的图象编程语言从而诞生了。 <canvas>元素对于直接用javascript提供的接口来开发的编程人员来说,这些原生接口太低级了,所以更高级的库就是必要的。Processing.js就能够被当作是这样的简化操作2D和3Dcanvas的库。
学会processing,需要多少工作要做
         Processing语言小而完整,所以非常容易学。本文档不仅仅尝试去教你Processing,还会鼓励你去寻找 Processing的规范教程,书和例子。任何Processing代码或者概念都应该映射到Processing.js里(下边列出的除外)。你可以跳过Processing赞成的java语法的javascript,使用纯javascript来与Processing的画图API一起使用。
使用Processing的方式
        Processing.js创建的初衷是能够让Processing开发者和Processing代码(通常是指 sketches)不用修改就可以在web端运行。因此,被推荐的方式就是用Processing.js来写processing 代码,然后通过Processing.js转换成javascript后运行它。
       随着时间的推移,一些web开发者也开始使用processing.js,他们就要求设计的API从Processing 语脱离出来使用。因此,我们提供一种可以用纯javascript语言来开发的方式,并且可以使用Processing的方法和对象。注意:Processing.js是放在首位的,并且是Processing向web开放的最重要的一部分,具有有利于兼容Processing的设计决定权。它不是被设计成一个通用的HTML 画图库。已经说过,它是可以当作canvas高级画图API来用。
     接下来我们讨论下在web页面里使用的各种Processing.js方法。
写纯 Processing 代码
     这种写法是使用Processing.js的首选方法,并且已经在 Processing.js for Processing Devs quick start guide 做了长篇的介绍。概括总结如下:
            1、下载 processing.js
            2、创建一个单独的 Processing  文件,或多个文件,名字可以随便叫,只要后缀名是".pde"就行。
            3、创建一个web页面,页面包括 Processing.js 和 <canvas>标签,<canvas> 的信息含有 sketch file(s)的路径和用空格隔开的Procesing 文件名列表,并且这些列表名是放在canvas的属性data-processing-sources上。例如:

<!DOCTYPE html> 
 <html> 
 <head> 
 <title>Hello Web - Processing.js Test</title> 
 <script src="processing-1.3.6.min.js"></script> 
 </head> 
 <body> 
 <h1>Processing.js Test</h1> 
 <p>This is my first Processing.js web-based sketch:</p> 
 <canvas data-processing-sources="hello-web.pde"></canvas> 
</body> 
</html>

        当页面加载完(on page load),processing.js将会自动浏览web页面的document,去查找<canvas>的属性data-processing-sources,然后用XMLHTTPRequest去下载 这些文件,将它们塞进从porcessing到javascript的翻译器,翻译后的javascript将会通过eval 函数来执行。
预编译 processing 代码 为 javascript
       Processing.js 自动下载并将所有Processing 代码转成 javascript。它做这些是使用Processing.compile()方法来完成的,并且 那些相关的processing构建工具 或者实用工具也可以做同样的事情。
      为了获得 从Processing 代码编译后的代码(例如,JavaScript适用于processing.js运行),请按如下操作:

// hard-coded Processing code, text from an HTML widget, downloaded text, etc. 
var processingCode = "..."; 
var jsCode = Processing.compile(processingCode).sourceCode;

例如,转化如下的Processing 代码 会生成 在它之下的 编译的来的javascript代码:

// Processing code 
 void setup() { 
 size(200, 200); 
 background(100); 
 stroke(255); 
 ellipse(50, 50, 25, 25); 
 println("hello web!"); 
} 
 
 // "Comiled" JavaScript code 
 // this code was autogenerated from PJS 
 (function(processing, $constants) { 
 function setup() { 
 processing.size(200, 200); 
 processing.background(100); 
 processing.stroke(255); 
 processing.ellipse(50, 50, 25, 25); 
 processing.println("hello web!"); 
 } 
 processing.setup = setup; 
 })

 只写 javascritp的 processing.js code
         前面的方法把 processing 代吗生成了 javascript 代码,但是你也可以单独写javascript。processing.js的解析器将Processing代码转化成javascript方法,然后运行它。因此,完全有可能跳过Processing代码,只写javascript 方法,将方法传给一个Processing实例。这有个例子如下:

function sketchProc(processing) { 
 // Override draw function, by default it will be called 60 times per second 
 processing.draw = function() { 
  // determine center and max clock arm length 
  var centerX = processing.width / 2, centerY = processing.height / 2; 
  var maxArmLength = Math.min(centerX, centerY); 
 
  function drawArm(position, lengthScale, weight) { 
  processing.strokeWeight(weight); 
  processing.line(centerX, centerY, 
   centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength, 
   centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength); 
  } 
 
  // erase background 
  processing.background(224); 
 
  var now = new Date(); 
 
  // Moving hours arm by small increments 
  var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12; 
 drawArm(hoursPosition, 0.5, 5); 
 
  // Moving minutes arm by small increments 
  var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60; 
  drawArm(minutesPosition, 0.80, 3); 
 
  // Moving hour arm by second increments 
  var secondsPosition = now.getSeconds() / 60; 
  drawArm(secondsPosition, 0.90, 1); 
 }; 
} 
 
var canvas = document.getElementById("canvas1"); 
// attaching the sketchProc function to the canvas 
var processingInstance = new Processing(canvas, sketchProc);

       这儿是创建了一个 sketch 方法,这个方法就和解析器生成的代码一样。这个方法需要一个参数,它是一个指向某个由Processing构造器生成的processing对象(例如,Processing运行时对象)的引用,任何 Procesing方法或者对象都一个作为它的属性来访问。
一旦这个方法完成,并且通过,随着就有一个引用指向canvas,一个引用指向 Processing构造器(记得用"new")。
写一个 Processing 和 javascript结合的文件
       人们经常问的第一个问题就是processing.js是否可以读取来自正在运行Processing sketch的文件的值。或者反过来的观点。答案是肯定的。
       Processing.js 转化 Processing 代码 成一个含有函数闭包javascript代码。所有你创建的变量和方法没有被绑定到全局变量上(即:window)。然而,你仍然可以访问他们。
1)、从Processing里访问 javascript对象
              从Processing代码转化成javascript并且和其他函数一样运行起来,所有Processing代码都可以访问全局对象。这意味着你可以在全局脚本模块里创建一个变量或者方法,它们就可以自动被Processing来访问。考虑这样一个例子:
首先是 Processing 文件,mixed.pde:

String processingString = "Hello from Processing!"; 
 
 void setup() { 
 printMessage(jsString + " " + processingString); 
}

接下来是web页面:

<!DOCTYPE html> 
<html> 
 <head> 
 <title>Hello Web - Accessing JavaScript from Processing</title> 
 <script src="processing-1.3.6.min.js"></script> 
 </head> 
<body> 
 <div id="msg"> 
 </div> 
 <canvas data-processing-sources="mixing.pde"></canvas> 
 <script type="application/javascript"> 
 var jsString = "Hello from JavaScript!"; 
 var printMessage = function (msg) { 
  document.getElementById('msg').innerHTML = "Message: " + msg; 
 }; 
 </script> 
</body> 
 </html>

这里 Processing.js允许使用的变量和方法声明在 Processing代码的外边。
      2)、javascript 和 Processing代码的混合
               前面的例子使得javascript和processing代码各自放在单独的文件里,当它们之间的界限不是分的很近时。
因为Processing.js在转化代码时,也可能直接将他们直接混在一起。Processing.js解析器保留包含在Processing代码里的 javascript不变,这样就允许开发者能写processing和javascript的混合代码(注意:这也就是为什么 processing.js里没有使用纯processing解析器的原因)。这是一个之前也是用这个方法写的例子:

var jsString = "Hello from JavaScript!"; 
var printMessage = function(msg) { 
 document.getElementById('msg').innerHTML = "Message: " + msg; 
 }; 
 
 String processingString = "Hello from Processing!"; 
 
 void setup() { 
 printMessage(jsString + " " + processingString); 
 }

          有些javascript语法很难用这种方式混在一起写(例如:正则语法)。如果是那样的情况的话,你可以简单地将纯javasript代码移到一个<script>代码块里,然后像上边“Accessing JavaScript Objects from Processing”描述的那样来访问它。
     3)、从javascript里访问 processing
              得出个结论是从Processing 代码里访问javascript比反过来要容易的多,因为被Processing解析器创建javascript没有直接暴露在全局对象里,因此你只能通过Processing.instances 的属性来访问。
              Processing 的构造器一直都在监视实例的创建,并且使得他们可以使用getInstanceById()方法。默认,当<canvas>有属性 data-processing-source时,它的id将会作为Processing 实例的唯一识别负。如果没有id属性,你可以用Proessing.instance[0]来访问。
              当你有一个能够访问Processing实例的引用时,你就可以调用它像这样:

<!DOCTYPE html> 
<html> 
<head> 
 <title>Hello Web - Controlling Processing from JavaScript</title> 
 <script src="processing-1.3.6.min.js"></script> 
 </head> 
 <body> 
 <canvas id="sketch" data-processing-sources="controlling.pde"></canvas> 
 <button onclick="startSketch();"> 
 Start</button> 
 <button onclick="stopSketch();"> 
 Stop</button> 
 <script type="application/javascript"> 
 var processingInstance; 
 
 function startSketch() { 
  switchSketchState(true); 
 } 
 
 function stopSketch() { 
  switchSketchState(false); 
 } 

 function switchSketchState(on) { 
 if (!processingInstance) { 
  processingInstance = Processing.getInstanceById('sketch'); 
  } 
  if (on) { 
  processingInstance.loop(); // call Processing loop() function 
 } else { 
  processingInstance.noLoop(); // stop animation, call noLoop() 
 } 
 } 
 </script> 
</body> 
</html>

      在DOM结构中有2个按钮,他们被用来让用户选择开始或暂停正在运行的Processing sketch.
他们直接在javascript中控制Processing实例(在页面里你可能有多个,或者藏在div中),通过调用Processing的方法:loop()和noLoop()。这些Processing 的方法可以在其他的文件中找到。
作为一个使用Processing.js的开发者必须知道的事情:
       当 Processing.js试图去完全兼容 Processing时,就有些不同的事情或者需要解决办法。我们也增加了一些web规范的功能来使Processing更容易被使用。 这里有一些技巧和提示在你开始使用Processing.js做复杂的sketch时可能有帮助。
Processing.js提供通过“externals”属性来访问各种 DOM/javascript对象
       每个Processing 实例(即:Processing.instances)包含有一个"external"属性,它是一个对象,包含各种指向非常有用的非Processing 的DOM/javascritp 对象,例如:

canvas--sketch被绑定上的画板 
context--画板的执行上下文 
onblur and onfocus--事件处理器

如果一个除法表达式期望产生一个整型值,那么这可能需要显式转换
         当将Processing代码转化成javascript,涉及整型 vs 浮点型的除法的时候,有一个有bug的class会出现这个问题。
在Processing代码中出现某个东西直接除以整数的代码块,当被转化成Processing时,可能有时出现问题,因为,整型编程双精度型,被引入了一个小数部分。修补这个bug的方法是 显式转换任何除法,正如展示的做法:

// before 
int g = mouseX / i; 
 
// after 
 int g = (int)(mouseX / i);

Processing.js有个欺骗在模拟 Processing的异步输入输出
          Processing 使用一个同步输入输出的模型,这就意味着 像loadImage()方法这样,需要相对长时间去执行,然而当他们执行期间,又没有任何事发生,程序等到它loadImage()执行完才去执行下一行语句。这就意味这可以依靠像loadImage()这样的方法返回的值用在接下来的代码中。
         但是web浏览器却不是这样的,它使用的是异步输入输出模型,这意味着加载外部资源的方法不能使得程序等到他们加载完再执行。为了实现Processing的load方法,你不得不使用一个特殊的Processing的指令。
         Processing.js指令提示浏览器,指令是写在注释里而不是Processing自身代码。这是一个典型的 Processing sketch,它需要同步加载一个图片然后画出它:

PImage img; 
 
void setup() { 
img = loadImage("picture.jpg"); 
 image(img, 0, 0); 
 }

        这些代码在含有Processing.js的浏览器里将不会执行,因为图片文件 picture.jpg被加载完之前就被调用了。修补这个bug的办法是让在sketch 开始执行前就把图片加载好,并且缓存起来,就是所说的预加载技术。这是修改后的代码:

/* @pjs preload="picture.jpg"; */ 
PImage img; 

void setup() { 
img = loadImage("picture.jpg"); 
image(img, 0, 0); 
 }

         注意:放在代码顶部的额外的注释行。"@jps"指令是给Processjing.js用的,不是给开发者用的。可以把它认为成额外的代码行,它们将在程序执行前就被执行了。
         如果你有多个图片被加载,可以使用如下列表:

/* @pjs preload="picture.jpg,picture2.jpg,picture3.png"; */

Processing.js需要更多的注意在变量的命名上比Processing
       javascript其中一个最强大的特性就是它的动态,弱类型的性质。因为java是强类型的语言,所以Processing也是,他们能重复命名而不用还怕产生歧义(例如:方法的重载),Processing.js就不行。不能进入javascript的内部工作,所以对Processing.js的开发者来说,最好的建议就是不要用 function/class/etc/,也不要用来自Processing的名字来命名变量。例如,一个叫 line的变量可能看起来合理,但是它会导致问题,因为它和Processing与Procesing.js内置的函数名line()一样。
当要覆盖重载的父类方法时,Processing需要你的帮助
如果你的代码使用子类覆盖一个或多个父类里重载的方法,你需要“假”覆盖,因为,每个方法签名,你通常就没改动过:

class X 
{ 
 void doSomething() 
{ 
 ... 
 } 
 
 void doSomething(float x, float y) 
 { 
 ... 
 } 
 } 

class Y extends X 
 { 
 void doSomething() 
{ 
 // different code from compared to the super class 
} 
 
 // even though we don't override this method, 
// its signature must be added to prevent Pjs 
 // from getting the method chain wrong: 
 void doSomething(float x, float y) 
 { 
 super.doSomething(x,y); 
 } 
 }

    尽管在Processing里 你不需要实现拥有(float,float)签名的空方法doSomething,但是这样做几乎是必须的,这是为了确保Processing.js在调用方法时不被搞晕。
直接将Processing 代码放在web页面里也是可以的
      在canvas上,用一个 data-processing-source属性包含Processing.js加载的外部文件的做法是首选,但是推荐的方式在web页面里外引用脚本。但是写成行内引用也是可以的。
     把上边例子的代码作为行内引用的方式,有必要的改动一点:

<script src="processing-1.3.6.min.js"></script> 
<script type="application/processing" data-processing-target="pjs"> 
void setup() { 
size(200, 200); 
background(100); 
stroke(255); 
ellipse(50, 50, 25, 25); 
println('hello web!'); 
} 
</script> 
<canvas id="pjs"> </canvas>

         这些代码是更复杂了,因为它没有指出那个canvas配那个脚本文件(即:你可以在一个页面引用多个Processing sketch,同样也可以有多个canvas)。也没有说明脚本的"type"属性,这个属性是用来区别javascript和Processing代码的(浏览器将忽略 Processing 脚本)。最后,注意:"id"和"target"属性的用法,它俩是用来连接Processing脚本和相关的canvas的。

以上就是本文的全部内容,希望大家对Processing.js有所认识。

Javascript 相关文章推荐
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
angularJS开发注意事项
May 26 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 Javascript
JavaScript设计模式经典之命令模式
Feb 24 #Javascript
JavaScript设计模式经典之工厂模式
Feb 24 #Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 #Javascript
JavaScript的设计模式经典之代理模式
Feb 24 #Javascript
jQuery实现验证年龄简单思路
Feb 24 #Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 #Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 #Javascript
You might like
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
php实现微信支付之企业付款
2018/05/30 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
js 幻灯片的实现
2011/12/06 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
python处理二进制数据的方法
2015/06/03 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python基础教程项目二之画幅好画
2018/04/02 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
详解Python循环作用域与闭包
2019/03/21 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
如何用JQuery进行表单验证
2013/05/29 面试题
学生会竞选自荐信
2013/10/12 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
教师岗位职责范本
2013/12/29 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
小学体育教学反思
2014/01/31 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
2014年教研组工作总结
2014/11/26 职场文书
幼师求职自荐信
2015/03/26 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
js之ajax文件上传
2021/05/13 Javascript