Processing.js で生成する画像は、Processing の文法で描画できる。
一度作成した画像を JavaScript で操作する最小サンプルを作ってみた。
▽作成したHTML
<!DOCTYPE html PUBLIC "-//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"/>
<script src="processing-1.4.1.js" type="text/javascript"></script>
<script type="text/processing" data-processing-target="mycanvas">
void setup() {
size(200, 200);
noLoop();
}
void draw() {
background(0);
fill(255);
rect(10, 10, 20, 20);
}
void moveRect() {
background(0);
fill(255);
rect(random(180), random(180), 20, 20);
}
</script>
</head>
<body>
<p>
<canvas id="mycanvas"></canvas>
</p>
<button onClick="moveRect()">Move!</ button>
<script id="script1" type="text/javascript">
function moveRect() {
var p = Processing.getInstanceById("mycanvas");
p.moveRect();
}
</script>
</body>
</html>
▽実行結果
Move! ボタンを押すと白い四角形がランダムに移動する。
0 件のコメント:
コメントを投稿