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

アート系学生のためのJAVA with Processing - その3-4 Processing.jsをJavaScriptとして記述し実行する

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

JavaScriptとして外部ファイル化する

今までは，全てのコードをHTML内に記述してきたが，Processing.jsを純粋なJavaScriptのライブラリとして使用・記述することで，HTMLファイルから外部のJavaScriptファイルとしてサーバに置く事ができる．

書法が今までとは異なっているので注意する事．
基本的にはProcessingの関数や変数の頭に「processing」を付けてやる事で記述できる．

以下が大本のHTMLファイル「ProcessingSample5.html」である．
スクリプトを呼び出す部分は，canvasタグでcanvasを指定した後に記述すること． 

<!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 5</title>
    <script type="text/javascript" src="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.js"></script>
  </head>

  <body>
    <h1>Processing Sample 5</h1>
    <div>
      <canvas id="processing_canvas" width="400" height="400"></canvas>
      //Processingのコードが記述されているファイルを読み込む
      <script type="text/javascript" src="./ProcessingSample5.js"></script>
    </div>
  </body></html>

以下が対になるJavaScriptのファイル「Processing5.js」である．
前回学んだ画像のプリロードも書式が違っているので注意すること．

var sketch = new Processing.Sketch();

//画像のプリロード
sketch.imageCache.add("cat.jpg");

sketch.attachFunction = function(processing){
    //ここに，JavaScriptに直したProcessingのコードを記述する．

    //以下プロセッシングのコード
    var photoImage; 
    var yPos = 0;
    
    processing.setup = function(){
	processing.size(400, 400);
	processing.colorMode(processing.RGB, 255);
	processing.background(255,255,255,0);
	processing.noStroke();
	processing.frameRate(10);
	
	//画像を読み込む
	photoImage = processing.loadImage("cat.jpg");
    };
    
    processing.draw = function(){
	processing.background(255, 255, 255, 0);
	//画像を表示する関数
	//image(宣言してsetupで読み込んだPImage変数(オブジェクト)の名前, X座標, Y座標);
	processing.image(photoImage, 0, yPos);
	
	//画像を徐々に下にずらしていく
	yPos += 10;
	if(yPos>processing.height){
	    yPos = 0;
	}
    };

    //マウスイベント
    processing.mouseClicked = function(){
	yPos = processing.mouseY;
    };
};

//Processing.jsの初期化を行う部分
var canvas = document.getElementById("processing_canvas");
var p = new Processing(canvas, sketch);