Processing.jsで放物運動

前回の続き。ムックの第6章Part2を読んで放物運動を確認。

メモ

反発係数は設定してるが、摩擦は設定していない。
Processingは、setupとdraw以外に自分で関数を定義できる。今回、setParameter関数を作り、Startボタン押下時に呼ぶようにした。

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Processing: parabolic motion</title>
</head>
<body>
	<canvas id="mycanvas"></canvas><br />
	velocity(X): <input type="number" name="vx" id="vx" value="4" min="1" max="10" step="1" /><br />
	velocity(Y): <input type="number" name="vy" id="vy" value="90" min="10" max="200" step="1" /><br />
	coefficient of restitution: <input type="number" name="bounce" id="bounce" value="0.8" min="0.1" max="1.0" step="0.1" /><br />
	<button onclick="startSketch();">Start</button>
	<button onclick="stopSketch();">Stop</button>

	<script src="processing-1.4.1.min.js" type="text/javascript"></script>
	<script type="application/processing" data-processing-target="mycanvas">
		float vx, vy;
		float x, y;
		float g = 9.8;
		float t = 0.2;
		float e = -0.8;

		void setup() {
		  size(640, 480);
		  background(#000000);
		  fill(#FFFFFF);
		  noLoop();

		  x = 15;
		  y = height - 15;

		  ellipse(x, y, 30, 30);
		}

		void draw() {
		  background(#000000);

		  x = x + vx;

		  vy = vy + g * t;
		  y = y + vy * t + 0.5 * g * t * t;

		  if (y + 15 > height) {
		    y = height - 15;
		    vy = vy * e;
		  }

		  ellipse(x, y, 30, 30);
		}

		void setParameter() {
		  vx = getVelocityX();
		  vy = getVelocityY();
		  e = getBounce();
		}
	</script>
	<script type="text/javascript">
	    var processingInstance;

	    function startSketch() {
			switchSketchState(true);
	    }

	    function stopSketch() {
			switchSketchState(false);
	    }

	    function switchSketchState(on) {
	        if (!processingInstance) {
	            processingInstance = Processing.getInstanceById('mycanvas');
	        }

			if (on) {
				processingInstance.setParameter();
				processingInstance.loop();  // call Processing loop() function
			}
			else {
				processingInstance.noLoop(); // stop animation, call noLoop()
			}
		}

		function getVelocityX() {
			var vx = document.getElementById('vx').value;
			return parseFloat(vx);
		}

		function getVelocityY() {
			var vy = document.getElementById('vy').value;
			return (parseFloat(vy) * -1);
		}

		function getBounce() {
			var e = document.getElementById('bounce').value;
			return (parseFloat(e) * -1);
		}
	</script>
</body>
</html>

参考サイト