[Work/Class/Java with Processing/3_ProcessingWithJS]

アート系学生のためのJAVA with Processing - その3-1 Processing.jsの基礎

新しいライブラリP5.jsが登場したため,Web基礎の方へページを移動しました.このページの内容は古いものです.

導入

Processing.jsというライブラリを使う事により、ProcessingのコードをJavaScriptとして実行する方法について述べる.

Processing.js

Processing.jsは,ProcessingのコードをJavaScriptとして実行するための,JavaScriptライブラリである.
Processing.jsのサイトからダウンロード可能である. 以下のxhtmlコードは,xhtml内に直接Processingのコードを記述して,ProcessingのマウスイベントからJavaScriptの関数を呼び出している.

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Processing Sample</title>
    <script type="text/javascript" src="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.js"></script>
    <script type="text/javascript">
      window.onload = function(){ 
      //HTMLが開かれた時に呼ばれる初期設定の関数.
      //canvasをロードして,Processingのコードを適用する.
	  var canvas = document.getElementsByTagName('canvas')[0];
	  var codeElm = document.getElementById('processing-code');
	  var code = codeElm.textContent || codeElm.innerText;
	  Processing(canvas, code);
      };
    </script>

    <script type="text/processing" data-processing-target="processing_canvas">
      //ここにProcessingのコードをそのまま貼付ける
      //ただし色モードはRGB限定
      
      void setup(){
	  size(400, 400);
	  colorMode(RGB, 255);
	  background(255,255,255,0);
	  noStroke();
	  frameRate(10);
      }
      
      void draw(){
	  fadeToWhite();
	  noStroke(); 
	  fill(random(255), random(255), random(255), 40);
	  rect(random(width), random(height), 20, 20);
      }
      
      void fadeToWhite(){
	  noStroke();
	  fill(255,255,255,30);
	  rectMode(CORNER);
	  rect(0, 0, width, height);
      }
    </script>
    
  </head>
  <body>
    <h1>Processing Sample 1</h1>
    <div>
      <canvas id="processing_canvas" width="400" height="400"></canvas>
    </div>
  </body>
</html>

xhtmlのbody部では,canvasタグを書いておく.

ヘッダ部の最初のscriptタグはJavaScriptの部分には,window.onload()というHTMLファイルが呼ばれた時に実行されるJavaScriptの関数を用意しておき,その中でbody内のcanvasタグを読み込んでProcessingのコードを適用する初期設定(これは定型文なのでそのままコピペする)や,Processingのコードから呼び出したい関数を記述しておく.
次のscriptタグには,Processingのコードをそのまま貼付ける.