Processing.jsで画像表示

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

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

<!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>

参考サイト

ゲームプログラミング入門 (日経BPパソコンベストムック)
日経BP社 (2012-10-22)
売り上げランキング: 23469

関連エントリー

  1. Processing.jsでテキスト表示
  2. Processing.jsでフリックを認識したい
  3. Processing.jsで自由落下
  4. Processing.jsで放物運動
  5. Processing.jsで斜面落下
This entry was posted in 未分類 and tagged , , . Bookmark the permalink.