欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-29 12:11:43
...
这个入门指导是为javascript开发者写的。读这个文档之前,你最好掌握javascript和web开发编程,并还会非常基本的 Processing 知识。
目录:
为没有耐心看长篇大论的人准备:
如果你很着急入门,那么你就需要知道以下几点:
1、Processing.js 把 Processing 代码转变成能够在浏览器端运行的javascript代码,实质是通过标签来实现绘图的;
2、为了使用它,你的首先下载 Processing.js;
3、创建你的 后缀名为".pde"的 Processing 文件,它和通常你创建的普通文本文件一样,例如: hello-web.pde
4、创建一个 html 页面,然后在页面里外引用 Processing.js文件,再添加一个标签,该标签上指明有你的 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社区来说,一个新而成熟并且接近全功能的图象编程语言从而诞生了。 元素对于直接用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 和 标签, 的信息含有 sketch file(s)的路径和用空格隔开的Procesing 文件名列表,并且这些列表名是放在canvas的属性data-processing-sources上。例如:

  
  
 Hello Web - Processing.js Test

Processing.js Test

This is my first Processing.js web-based sketch:

当页面加载完(on page load),processing.js将会自动浏览web页面的document,去查找的属性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页面:

 
 
 Hello Web - Accessing JavaScript from Processing 
 

这里 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代码移到一个