適用於javascript開發者的Processing.js入門教學_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

適用於javascript開發者的Processing.js入門教學_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:13 PM

javascript

這個入門指導是為javascript開發者寫的。在讀這篇文件之前，你最好先掌握javascript和web開發編程，而且還會非常基本的 Processing 知識。
目錄：
為沒有耐心看長篇大論的人準備：
如果你很急著入門，那麼你就需要知道以下幾點：
1、Processing.js 將 Processing 程式碼轉換成能夠在瀏覽器端運作的javascript程式碼，實質是透過

<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创建，被作为多媒体实验室和美学&计算机组的一部分。借助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社区来说，一个新而成熟并且接近全功能的图象编程语言从而诞生了。

 <!DOCTYPE html> 
 <html> 
 <head> 
 <title>Hello Web - Processing.js Test</title> 
 <script src="processing-1.3.6.min.js"></script> 
 </head> 
 <body> 
 <h1 id="Processing-js-Test">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，去查找

 // 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”描述的那样来访问它。<br /> <span style="color: #800000"><strong>3）、从javascript里访问 processing<br /> 得出个结论是从Processing 代码里访问javascript比反过来要容易的多，因为被Processing解析器创建javascript没有直接暴露在全局对象里，因此你只能通过Processing.instances 的属性来访问。<br /> Processing 的构造器一直都在监视实例的创建，并且使得他们可以使用getInstanceById()方法。默认，当<canvas>有属性 data-processing-source时，它的id将会作为Processing 实例的唯一识别负。如果没有id属性，你可以用Proessing.instance[0]来访问。<br /> 当你有一个能够访问Processing实例的引用时，你就可以调用它像这样：<br /> </script>

<!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有所认识。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。