新しいライブラリP5.jsが登場したため，Web基礎の方へページを移動しました．このページの内容は古いものです．
PImageとpreload
Processing.jsで画像を表示する場合，Processingの場合と同様にPImageクラスが使えるが，注意すべき点がある．
Processing.jsの部分の一番始めにコメントアウトした行を入れ，その中に
/* @pjs preload="画像のパス"; */
を入れる必要がある．
画像のパスは相対パスが望ましく，パスをダブルクオーテーションで閉じる．
また，複数画像を読み込む時は，
/* @pjs preload="photo1.jpg, photo2.jpg"; */のように，カンマで区切って複数入力する．
コード例
<!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 4</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">
/* @pjs preload="cat.jpg"; */
//一番最初の行のコメントアウトした所に，上記のように記入し，画像の相対パスを入れる．
//以下プロセッシングのコード
PImage photoImage; //画像を読み込む変数(正確にはオブジェクト)
yPos = 0;
void setup(){
size(400, 400);
colorMode(RGB, 255);
background(255,255,255,0);
noStroke();
frameRate(10);
//画像を読み込む
photoImage = loadImage("cat.jpg");
}
void draw(){
background(255, 255, 255, 0);
//画像を表示する関数
//image(宣言してsetupで読み込んだPImage変数(オブジェクト)の名前, X座標, Y座標);
image(photoImage, 0, yPos);
//画像を徐々に下にずらしていく
yPos += 10;
if(yPos>height){
yPos = 0;
}
}
</script>
</head>
<body>
<h1>Processing Sample 4</h1>
<div>
<canvas id="processing_canvas" width="400" height="400"></canvas>
</div>
<div id="message">
</div>
</body>
</html>
このコードでは，画像を表示し，表示位置を徐々に下にずらすことでアニメーションさせている．
