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

前端之家收集整理的这篇文章主要介绍了适用于javascript开发者的Processing.js入门教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这个入门指导是为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

在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 对象,例如:

如果一个除法表达式期望产生一个整型值,那么这可能需要显式转换

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

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

Processing.js有个欺骗在模拟 Processing的异步输入输出

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

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

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

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

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

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

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页面里外引用脚本。但是写成行内引用也是可以的。 把上边例子的代码作为行内引用的方式,有必要的改动一点:

猜你在找的JavaScript相关文章