Processing.jsで斜面落下

前回の続き。ムックの第6章Part2を読んで斜面落下の運動を確認。動摩擦係数なんてあったのね。

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Processing: parabolic motion</title>
</head>
<body>
	<canvas id="mycanvas"></canvas><br />
	coefficient of dynamic friction: <input type="number" name="friction" id="friction" value="0.5" 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 th;
		float x, y;
		float vx, vy;
		float ax, ay;
		float t;
		float h;  // floor height

		void setup() {
		  size(850, 480);
		  rectMode(CENTER);
		  noLoop();

		  th = radians(40);

		  x = 0;
		  y = 400 - tan(th) * 400;
		  h = y;
		  t = 0.2;
		  vx = 0.0;
		  vy = 0.0;

		  float a = 9.8 * sin(th);
		  ax = a * cos(th);
		  ay = a * sin(th);
		}

		void draw() {
		  background(#000000);

		  stroke(255);
		  line(0, h, 400, 400);
		  line(400, 400, 850, 400);

		  // motion on a slope
		  if (y < 400) {
		    // x direction
		    vx = vx + ax * t;
		    x = x + vx * t + 0.5 * ax * t * t;

		    // y direction
		    vy = vy + ay * t;
		    y = y + vy * t + 0.5 * ay * t * t;
		  }

		  // motion on a flat
		  if (y >= 400) {
		    ax = getFriction() * 9.8;
		    vx = vx + ax * t;

		    if (vx < 0) {
		      vx = 0.0;
		      ax = 0.0;
		    }

		    x = x + vx * t + 0.5 * ax * t * t;
		    y = 400;
		    th = 0;
		  }

		  noStroke();
		  fill(255, 255, 0);
		  translate(x, y);
		  rotate(th);
		  rect(15, -15, 30, 30);
		}

		void setParameter() {
			// none
		}
	</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 getFriction() {
			var myu = document.getElementById('friction').value;
			return (parseFloat(myu) * -1);
		}
	</script>
</body>
</html>

参考サイト