适用于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 TestProcessing.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代码移到一个 相关标签: javascript Processing.js 上一篇: Javascript 修改String 对象 增加去除空格功能(示例代码)_javascript技巧 下一篇: JS运动改变单物体透明度实现方法 推荐阅读 js实现简单的星级选择器提交效果适用于评论等_javascript技巧 js实现简单的星级选择器提交效果适用于评论等_javascript技巧 PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)_javascript技巧 适用于javascript开发者的Processing.js入门教程_javascript技巧 PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)_javascript技巧 JavaScript开发者必备的10个Sublime Text插件_javascript技巧 成为JavaScript开发者的小技巧图文介绍 JavaScript 开发者常用的 10 个技巧 适用于javascript开发者的Processing.js入门教程_javascript技巧 JavaScript开发者必备的10个Sublime Text插件_javascript技巧