Processing.js 上手记录
2011-04-11 22:34
309 查看
首先赞叹一下,这真是艺术……
Processing.js 其实是一个中间件。 processing的开发者可以毫不费力地将已有的程序移植到浏览器中,以javascript的形式展示。具体来说processing.js做了两件事:
1 将processing 转化为javascript。
2 使用javascript重新实现了Processing的API。
对于一个简单的Hello-web.pde文件,只需要在html中引用:
<script src="processing-1.0.0.min.js"></script>
<canvas data-processing-sources="hello-web.pde"></canvas>
然后只需要将hello-web.pde, hello-web.html, processing-1.0.0.min.js 放到同一个目录下,即可将hello-web.pde的内容呈现在网页上。(注意路径值都是可以修改的)
官网上提到的一些需要注意的地方:
1、Processing.js 没有data目录
Processing有”data目录“的概念,用于存放图像以及其他资源。但processing.js没有将它包括进来。因此对于这些内容,需要全部由自己根据web规范来组织。
2、Processing.js 实现的是Processing 而不是全部的Java
processing.js兼容的是Processing,而不是也将不会全部兼容Java. 假如有些类使用了不是Processing定义的类,那么很有可能不能使用processing.js执行。 类库也是类似,一个使用Java为Processing写的类库,将不能用Processing.js所识别。
3、Processing.js 只有两种渲染模式
processing 有很多种渲染模式可以使用,我们可以根据对图像质量和速度的需求进行选择,但processing.js使用基于WebGL的Canvas标签提供2d和3d的渲染,因此最终的渲染模式只有2d和3d两种。
4、整数除法会出现小数。
加个强制转换即可。// before
int g = mouseX / i;
// after
int g = (int)(mouseX / i);
5、Processing使用的是同步的IO,因此耗时的工作例如LoadImage()会被阻塞,之后得到的image是可靠的。但是processing.js不然,浏览器使用异步的IO,会导致image在未下载完时就执行操作。
一个解决办法如下:
使用@pjs preload指令 告诉processing.js 这是一条额外的指令,会在程序开始之前被执行。
/* @pjs preload="picture.jpg"; */
PImage img;
void setup() {
img = loadImage("picture.jpg");
image(img, 0, 0);
}
刚才试了一下,貌似文件名是大小写敏感的。
6、processing.js 需要更细致地考虑命名
由于javascript是弱类型的语言,因此给函数、类命名的时候,不要使用processing中的关键字。
7、可以直接将processing程序语句放到web页面
注意type属性区分了Javascript和ProcessingScript
<script src="processing-1.0.0.min.js"></script>
<script type="application/javascript">
/*
* This code searches for all the <script type="application/processing" target="canvasid">
* in your page and loads each script in the target canvas with the proper id.
* It is useful to smooth the process of adding Processing code in your page and starting
* the Processing.js engine.
*/
if (window.addEventListener) {
window.addEventListener("load", function() {
var scripts = document.getElementsByTagName("script");
var canvasArray = Array.prototype.slice.call(document.getElementsByTagName("canvas"));
var canvas;
for (var i = 0, j = 0; i < scripts.length; i++) {
if (scripts[i].type == "application/processing") {
var src = scripts[i].getAttribute("target");
if (src && src.indexOf("#") > -1) {
canvas = document.getElementById(src.substr(src.indexOf("#") + 1));
if (canvas) {
new Processing(canvas, scripts[i].text);
for (var k = 0; k< canvasArray.length; k++)
{
if (canvasArray[k] === canvas) {
// remove the canvas from the array so we dont override it in the else
canvasArray.splice(k,1);
}
}
}
} else {
if (canvasArray.length >= j) {
new Processing(canvasArray[j], scripts[i].text);
}
j++;
}
}
}
}, false);
}
</script>
<script type="application/processing" target="processing-canvas">
void setup() {
size(200, 200);
background(100);
stroke(255);
ellipse(50, 50, 25, 25);
println('hello web!');
}
</script>
<canvas id="processing-canvas"> </canvas>
最后注意canvas的id属性和script的target属性将processing代码和Canvas连在一起。
Processing.js 其实是一个中间件。 processing的开发者可以毫不费力地将已有的程序移植到浏览器中,以javascript的形式展示。具体来说processing.js做了两件事:
1 将processing 转化为javascript。
2 使用javascript重新实现了Processing的API。
对于一个简单的Hello-web.pde文件,只需要在html中引用:
<script src="processing-1.0.0.min.js"></script>
<canvas data-processing-sources="hello-web.pde"></canvas>
然后只需要将hello-web.pde, hello-web.html, processing-1.0.0.min.js 放到同一个目录下,即可将hello-web.pde的内容呈现在网页上。(注意路径值都是可以修改的)
官网上提到的一些需要注意的地方:
1、Processing.js 没有data目录
Processing有”data目录“的概念,用于存放图像以及其他资源。但processing.js没有将它包括进来。因此对于这些内容,需要全部由自己根据web规范来组织。
2、Processing.js 实现的是Processing 而不是全部的Java
processing.js兼容的是Processing,而不是也将不会全部兼容Java. 假如有些类使用了不是Processing定义的类,那么很有可能不能使用processing.js执行。 类库也是类似,一个使用Java为Processing写的类库,将不能用Processing.js所识别。
3、Processing.js 只有两种渲染模式
processing 有很多种渲染模式可以使用,我们可以根据对图像质量和速度的需求进行选择,但processing.js使用基于WebGL的Canvas标签提供2d和3d的渲染,因此最终的渲染模式只有2d和3d两种。
4、整数除法会出现小数。
加个强制转换即可。// before
int g = mouseX / i;
// after
int g = (int)(mouseX / i);
5、Processing使用的是同步的IO,因此耗时的工作例如LoadImage()会被阻塞,之后得到的image是可靠的。但是processing.js不然,浏览器使用异步的IO,会导致image在未下载完时就执行操作。
一个解决办法如下:
使用@pjs preload指令 告诉processing.js 这是一条额外的指令,会在程序开始之前被执行。
/* @pjs preload="picture.jpg"; */
PImage img;
void setup() {
img = loadImage("picture.jpg");
image(img, 0, 0);
}
刚才试了一下,貌似文件名是大小写敏感的。
6、processing.js 需要更细致地考虑命名
由于javascript是弱类型的语言,因此给函数、类命名的时候,不要使用processing中的关键字。
7、可以直接将processing程序语句放到web页面
注意type属性区分了Javascript和ProcessingScript
<script src="processing-1.0.0.min.js"></script>
<script type="application/javascript">
/*
* This code searches for all the <script type="application/processing" target="canvasid">
* in your page and loads each script in the target canvas with the proper id.
* It is useful to smooth the process of adding Processing code in your page and starting
* the Processing.js engine.
*/
if (window.addEventListener) {
window.addEventListener("load", function() {
var scripts = document.getElementsByTagName("script");
var canvasArray = Array.prototype.slice.call(document.getElementsByTagName("canvas"));
var canvas;
for (var i = 0, j = 0; i < scripts.length; i++) {
if (scripts[i].type == "application/processing") {
var src = scripts[i].getAttribute("target");
if (src && src.indexOf("#") > -1) {
canvas = document.getElementById(src.substr(src.indexOf("#") + 1));
if (canvas) {
new Processing(canvas, scripts[i].text);
for (var k = 0; k< canvasArray.length; k++)
{
if (canvasArray[k] === canvas) {
// remove the canvas from the array so we dont override it in the else
canvasArray.splice(k,1);
}
}
}
} else {
if (canvasArray.length >= j) {
new Processing(canvasArray[j], scripts[i].text);
}
j++;
}
}
}
}, false);
}
</script>
<script type="application/processing" target="processing-canvas">
void setup() {
size(200, 200);
background(100);
stroke(255);
ellipse(50, 50, 25, 25);
println('hello web!');
}
</script>
<canvas id="processing-canvas"> </canvas>
最后注意canvas的id属性和script的target属性将processing代码和Canvas连在一起。
相关文章推荐
- Cocos2d-js 开发记录:Loading载入界面自定义
- asp.net jq js 代码记录
- js 常用记录
- 快速上手Vue(适合懂基础html、css和js的人)
- 记录Js
- 关于用JS隐藏div占用和不占用页面位置的小记录
- Node.js 环境配置记录
- 常用到的一些js方法,记录一下
- js小案例效果学习记录
- 廖雪峰JS教程学习记录----循环
- JS:问题记录一
- 记录下js库网址
- 使用jquery cookie.js记录当前所点击过的菜单
- node.js web开发:EXPRESS 4.x 以上使用session和cookie 的记录 - lgphp
- 整理下之前的js代码 moogens.js 记录下
- Cocos2d-js 开发记录:骨骼动画载入
- Dynamic CRM 2016使用WEB API更新记录(js)
- js 处理json数据记录
- 20101124 学习记录:Js的一些触发事件onblur等 & 获取当前日期并判断
- Backbone.js学习记录 使用集合