Processing.jsで自由落下

前回の続き。ムックの第6章Part2を読んで自由落下を確認。

メモ

Start・Stopボタンを一つにまとめたい(トグルボタンにしたい)。

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Processing: free fall</title>
</head>
<body>
	<canvas id="mycanvas"></canvas><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 v = 0.0;  // velocity
		float g = 9.8;  // gravity
		float t = 0.2;  // time
		float e = -0.8;  // coefficient of restitution
		float r = 15;	// ball radius
		float y = r;  // ball position (center)

		void setup() {
		  size(200, 500);
		  background(#000000);
		  fill(#FFFFFF);
		  noLoop();
		}

		void draw() {
		  background(#000000);

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

		  if (y > height - r) {
		  	e = getBounce();

		    y = height - r;
		    v = v * e;
		  }

		  ellipse(width/2, y, r*2, r*2);
		}
	</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.loop();  // call Processing loop() function
			}
			else {
				processingInstance.noLoop(); // stop animation, call noLoop()
			}
		}

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

参考サイト