Processing.js 上手记录

首先赞叹一下，这真是艺术……

 

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、整数除法会出现小数。

加个强制转换即可。

1. // before  
2. int g = mouseX / i;  
3.   
4. // after  
5. int g = (int)(mouseX / i); 
   

 

 5、Processing使用的是同步的IO，因此耗时的工作例如LoadImage（）会被阻塞，之后得到的image是可靠的。但是processing.js不然，浏览器使用异步的IO，会导致image在未下载完时就执行操作。

一个解决办法如下： 

使用@pjs preload指令 告诉processing.js 这是一条额外的指令，会在程序开始之前被执行。

1. /* @pjs preload="picture.jpg"; */  
2. PImage img;  
3.   
4. void setup() {  
5.   img = loadImage("picture.jpg");  
6.   image(img, 0, 0);  
7. } 
   

 刚才试了一下，貌似文件名是大小写敏感的。

 

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连在一起。

 

 

 

 

 

转载于:https://www.cnblogs.com/HectorInsanE/archive/2011/04/11/2013025.html