Processing.jsで画像表示

前回の続き。画像表示をお試し。画像はDOTS DESIGNより拝借。

loadImage()で読み込んで、image()で表示。
scale()は引数1つで拡大／縮小、引数2つ以上で座標軸指定。scale(-1, 1)で左右反転するかと思ったけどしなかった。。

この部分は iframe 対応のブラウザで見てください。

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Processing: parabolic motion</title>
</head>
<body>
	<canvas id="mycanvas"></canvas><br />

	<script src="processing-1.4.1.min.js" type="text/javascript"></script>
	<script type="application/processing" data-processing-target="mycanvas">
		PImage bike;
		int posX;
		int vx;

		void setup() {
		  size(240, 120);
		  background(#000000);
		  bike = loadImage("ico_bike.gif");
		  posX = 0;
		  vx = 1;
		  image(bike, posX, height-bike.height);
		}

		void draw() {
		  background(#000000);

		  posX += vx;
		  if (posX > width-bike.width) {
			posX = width-bike.width;
			vx *= -1;
		  }
		  else if (posX < 0) {
			posX = 0;
			vx *= -1;
		  }

		  image(bike, posX, height-bike.height);
		}
	</script>
</body>
</html>

参考サイト