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

这个入门指导是为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 可以有多个文件，多个文件用空格隔开。例如：

加载你的 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代码：