新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

         如果你很着急入门

适用于javascript开荒者的Processing.js入门教程,processing入门教程

其一入门辅导是为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 能够有四个公文,四个公文用空格隔绝。比方:            

<script src="processing-1.3.6.min.js"></script> 
<canvas data-processing-sources="hello-web.pde"></canvas> 

加载你的 web 页面,processing.js 将解析、翻译 sketch file,然后你的sketch file就可以运转在浏览器里。
Processing.js的来源?
Processing为何物?

          Processing 语言原先被MIT创设,被当作多媒体实验室 和美学&Computer组的一片段。借助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代码:

// 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页面:

<!DOCTYPE html> 
<html> 
 <head> 
 <title>Hello Web - Accessing JavaScript from Processing</title> 
 <script src="processing-1.3.6.min.js"></script> 
 </head> 
<body> 
 <div id="msg"> 
 </div> 
 <canvas data-processing-sources="mixing.pde"></canvas> 
 <script type="application/javascript"> 
 var jsString = "Hello from JavaScript!"; 
 var printMessage = function (msg) { 
  document.getElementById('msg').innerHTML = "Message: "   msg; 
 }; 
 </script> 
</body> 
 </html> 

这里 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代码移到二个<script>代码块里,然后像上边“Accessing JavaScript Objects from Processing”描述的那么来访谈它。
     3)、从javascript里访问 processing               得出个结论是从Processing 代码里探问javascript比反过来要便于的多,因为被Processing分析器成立javascript未有直接暴光在全局对象里,因而你不得不通过Processing.instances 的属性来拜候。
              Processing 的构造器一贯都在监视实例的创建,况且使得他们能够应用getInstanceById()方法。私下认可,当<canvas>有性能data-processing-source时,它的id将会作为Processing 实例的天下无双识别负。若无id属性,你能够用Proessing.instance[0]来访问。
              当你有二个可见访谈Processing实例的援引时,你就足以调用它像这么:

<!DOCTYPE html> 
<html> 
<head> 
 <title>Hello Web - Controlling Processing from JavaScript</title> 
 <script src="processing-1.3.6.min.js"></script> 
 </head> 
 <body> 
 <canvas id="sketch" data-processing-sources="controlling.pde"></canvas> 
 <button onclick="startSketch();"> 
 Start</button> 
 <button onclick="stopSketch();"> 
 Stop</button> 
 <script type="application/javascript"> 
 var processingInstance; 

 function startSketch() { 
  switchSketchState(true); 
 } 

 function stopSketch() { 
  switchSketchState(false); 
 } 

 function switchSketchState(on) { 
 if (!processingInstance) { 
  processingInstance = Processing.getInstanceById('sketch'); 
  } 
  if (on) { 
  processingInstance.loop(); // call Processing loop() function 
 } else { 
  processingInstance.noLoop(); // stop animation, call noLoop() 
 } 
 } 
 </script> 
</body> 
</html> 

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

canvas--sketch被绑定上的画板 
context--画板的执行上下文 
onblur and onfocus--事件处理器 

一经三个除法表明式期望发生四个整型值,那么那只怕要求显式转变          当将Processing代码转化成javascript,涉及整型 vs 浮点型的除法的时候,有一个有bug的class会合世这些主题素材。
在Processing代码中出现有些东西直接除以整数的代码块,当被转正成Processing时,或者一时候出现难题,因为,整型编制程序双精度型,被引进了三个小数部分。修补那个bug的方法是 显式转变任何除法,正如出示的做法:

 // before 
int g = mouseX / i; 

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

Processing.js有个棍骗在模仿 Processing的异步输入输出           Processing 使用四个同台输入输出的模型,那就象征 像loadImage()方法这么,必要相对长日子去实践,可是当他俩施行时期,又尚未任何事时有产生,程序等到它loadImage()施行完才去实行下一行语句。那就象征那足以重视像loadImage()这样的秘技再次回到的值用在接下去的代码中。
         可是web浏览器却不是那样的,它选用的是异步输入输出模型,那意味着加载外界财富的办法无法使得程序等到他们加载完再实践。为了兑现Processing的load方法,你只好动用八个特种的Processing的吩咐。
         Processing.js指令提醒浏览器,指令是写在批注里并不是Processing本人代码。那是多少个天下第一的 Processing sketch,它要求一块加载叁个图纸然后画出它:

PImage img; 

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

        那一个代码在满含Processing.js的浏览器里将不会推行,因为图片文件 picture.jpg被加载完以前就被调用了。修补这一个bug的艺术是让在sketch 初叶试行前就把图片加载好,而且缓存起来,正是所说的预加载技艺。那是修改后的代码:

/* @pjs preload="picture.jpg"; */ 
PImage img; 

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

         注意:放在代码顶端的附加的注释行。"@jps"指令是给Processjing.js用的,不是给开垦者用的。可以把它以为成额外的代码行,它们将要程序实施前就被施行了。
         倘若你有三个图片被加载,能够行使如下列表:

/* @pjs preload="picture.jpg,picture2.jpg,picture3.png"; */ 

Processing.js须求更加多的注旨在变量的命名上比Processing
       javascript在那之中三个最有力的本性就是它的动态,弱类型的特性。因为java是强类型的言语,所以Processing也是,他们能重新命名而不用还怕产生歧义(比如:方法的重载),Processing.js就丰裕。不能够跻身javascript的其江苏中华南理法高校程公司作,所以对Processing.js的开采者来说,最棒的提出正是毫无用 function/class/etc/,也毫无用来自Processing的名字来命名变量。例如,一个叫 line的变量或许看起来合理,然则它会导致难题,因为它和Processing与Procesing.js内置的函数名line()一样。
当要掩饰重载的父类方法时,Processing必要您的佑助
若是你的代码应用子类覆盖多个或多少个父类里重载的艺术,你须要“假”覆盖,因为,每一个方法具名,你经常就没改造过:

class X 
{ 
 void doSomething() 
{ 
 ... 
 } 

 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页面里外援用脚本。可是写成行内援引也是能够的。
     把上边例子的代码作为行内引用的不二等秘书诀,有须求的更换一点:

<script src="processing-1.3.6.min.js"></script> 
<script type="application/processing" data-processing-target="pjs"> 
void setup() { 
size(200, 200); 
background(100); 
stroke(255); 
ellipse(50, 50, 25, 25); 
println('hello web!'); 
} 
</script> 
<canvas id="pjs"> </canvas>

         那些代码是更复杂了,因为它从不提议那几个canvas配那个剧本文件(即:你能够在叁个页面援用八个Processing sketch,同样也足以有三个canvas)。也未尝评释脚本的"type"属性,这么些个性是用来差异javascript和Processing代码的(浏览器将忽略 Processing 脚本)。最后,注意:"id"和"target"属性的用法,它俩是用来三翻五次Processing脚本和血脉相通的canvas的。

如上就是本文的全部内容,希望大家对Processing.js有所认知。

你恐怕感兴趣的稿子:

  • VML绘图板②脚本--VMLgraph.js、XMLtool.js
  • 用js绘图
  • 用JavaScript绘图 ——JS2D函数集
  • JavaScript 绘图代码
  • 纯JavaScript代码完毕移动设备绘图解锁

那些入门带领是为javascript开辟者写的。读那几个文书档案以前,你最佳了解javascr...

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于www.301net,转载请注明出处:         如果你很着急入门

您可能还会对下面的文章感兴趣: