314maro/physics.html

## physics.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script>
function stepRK(h,f,x,y) {
  var tmp=[],k1=[],k2=[],k3=[],k4=[];
  var n = f.length; // n == f.length == y.length
  for (var i=0;i<n;i++) tmp[i] = y[i];
  for (var i=0;i<n;i++) k1[i] = h*f[i](x, tmp);
  for (var i=0;i<n;i++) tmp[i] = y[i] + k1[i]*0.5;
  for (var i=0;i<n;i++) k2[i] = h*f[i](x+h*0.5, tmp);
  for (var i=0;i<n;i++) tmp[i] = y[i] + k2[i]*0.5;
  for (var i=0;i<n;i++) k3[i] = h*f[i](x+h*0.5, tmp);
  for (var i=0;i<n;i++) tmp[i] = y[i] + k3[i];
  for (var i=0;i<n;i++) k4[i] = h*f[i](x+h, tmp);
  for (var i=0;i<n;i++) y[i] += (k1[i]+2*k2[i]+2*k3[i]+k4[i])/6;
}

var dict ={
  "foo": { xy: [200,-100,-30,50],
    x: "return -1000000*x*Math.pow(x*x+y*y,-1.5);",
    y: "return -1000000*y*Math.pow(x*x+y*y,-1.5);" },
  "bar": { xy: [0,100,400,0],
    x: "return -10*x;",
    y: "return -10*y;"}
  };
var xy = [200,-100,-30,50];
function d2xdt2(t,arr) {
  var x = arr[0], y = arr[1], dx = arr[2], dy = arr[3];
  return -1000000*x*Math.pow(x*x+y*y,-1.5);
}
function d2ydt2(t,arr) {
  var x = arr[0], y = arr[1], dx = arr[2], dy = arr[3];
  return -1000000*y*Math.pow(x*x+y*y,-1.5);
}

var xelem, yelem, animeFlag = false, count = 0;
function draw() {
  var width = canvas.width, height = canvas.height;
  ctx.clearRect(0,0,width,height);
  ctx.fillStyle = "black";
  ctx.fillRect(xy[0]+width/2-10,xy[1]+height/2-10,20,20);
  ctx.fillStyle = "red";
  ctx.fillRect(width/2-3,height/2-3,6,6);
  xelem.value = xy[0]; yelem.value = xy[1];
}
function stepCanvas() {
  var h = 0.020;
  var fs = [ function (t,arr) {return arr[2];}
           , function (t,arr) {return arr[3];}
           , d2xdt2
           , d2ydt2];
  stepRK(h, fs, count*h, xy);
  draw();

  if (animeFlag) {
    requestAnimationFrame(stepCanvas);
  }
}

function toggleButton() {
  animeFlag = !animeFlag;
  document.getElementById("start").textContent = animeFlag ? "Stop" : "Start";
  if (animeFlag) {
    stepCanvas();
  }
}
window.onload = function () {
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  xelem = document.getElementById("x");
  yelem = document.getElementById("y");
  document.getElementById("start").onclick = toggleButton;
  draw();
};
</script>
<style>
#canvas {
  border: groove #777;
}
</style>
</head>
<body>
<p><canvas id="canvas" width=800 height=600>Canvas(´･_･`)</canvas></p>
<p>x:<input id="x" readonly></input>, y:<input id="y" readonly></input></p>
<p>x0 = <input id="x0"></input>, y0 = <input id="y0"></input></p>
<p>dx0 = <input id="dx0"></input>, dy0 = <input id="dy0"></input></p>
<p>d^2x/dt^2 = <input id="d2xdt2"></input></p>
<p>d^2y/dt^2 = <input id="d2ydt2"></input></p>
<p><button id="start">Start</button></p>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8" />
	<script>
	function stepRK(h,f,x,y) {
	var tmp=[],k1=[],k2=[],k3=[],k4=[];
	var n = f.length; // n == f.length == y.length
	for (var i=0;i<n;i++) tmp[i] = y[i];
	for (var i=0;i<n;i++) k1[i] = h*f[i](x, tmp);
	for (var i=0;i<n;i++) tmp[i] = y[i] + k1[i]*0.5;
	for (var i=0;i<n;i++) k2[i] = hf[i](x+h0.5, tmp);
	for (var i=0;i<n;i++) tmp[i] = y[i] + k2[i]*0.5;
	for (var i=0;i<n;i++) k3[i] = hf[i](x+h0.5, tmp);
	for (var i=0;i<n;i++) tmp[i] = y[i] + k3[i];
	for (var i=0;i<n;i++) k4[i] = h*f[i](x+h, tmp);
	for (var i=0;i<n;i++) y[i] += (k1[i]+2k2[i]+2k3[i]+k4[i])/6;
	}

	var dict ={
	"foo": { xy: [200,-100,-30,50],
	x: "return -1000000xMath.pow(xx+yy,-1.5);",
	y: "return -1000000yMath.pow(xx+yy,-1.5);" },
	"bar": { xy: [0,100,400,0],
	x: "return -10*x;",
	y: "return -10*y;"}
	};
	var xy = [200,-100,-30,50];
	function d2xdt2(t,arr) {
	var x = arr[0], y = arr[1], dx = arr[2], dy = arr[3];
	return -1000000xMath.pow(xx+yy,-1.5);
	}
	function d2ydt2(t,arr) {
	var x = arr[0], y = arr[1], dx = arr[2], dy = arr[3];
	return -1000000yMath.pow(xx+yy,-1.5);
	}

	var xelem, yelem, animeFlag = false, count = 0;
	function draw() {
	var width = canvas.width, height = canvas.height;
	ctx.clearRect(0,0,width,height);
	ctx.fillStyle = "black";
	ctx.fillRect(xy[0]+width/2-10,xy[1]+height/2-10,20,20);
	ctx.fillStyle = "red";
	ctx.fillRect(width/2-3,height/2-3,6,6);
	xelem.value = xy[0]; yelem.value = xy[1];
	}
	function stepCanvas() {
	var h = 0.020;
	var fs = [ function (t,arr) {return arr[2];}
	, function (t,arr) {return arr[3];}
	, d2xdt2
	, d2ydt2];
	stepRK(h, fs, count*h, xy);
	draw();

	if (animeFlag) {
	requestAnimationFrame(stepCanvas);
	}
	}

	function toggleButton() {
	animeFlag = !animeFlag;
	document.getElementById("start").textContent = animeFlag ? "Stop" : "Start";
	if (animeFlag) {
	stepCanvas();
	}
	}
	window.onload = function () {
	canvas = document.getElementById('canvas');
	ctx = canvas.getContext('2d');
	xelem = document.getElementById("x");
	yelem = document.getElementById("y");
	document.getElementById("start").onclick = toggleButton;
	draw();
	};
	</script>
	<style>
	#canvas {
	border: groove #777;
	}
	</style>
	</head>
	<body>
	<p><canvas id="canvas" width=800 height=600>Canvas(´･_･`)</canvas></p>
	<p>x:<input id="x" readonly></input>, y:<input id="y" readonly></input></p>
	<p>x0 = <input id="x0"></input>, y0 = <input id="y0"></input></p>
	<p>dx0 = <input id="dx0"></input>, dy0 = <input id="dy0"></input></p>
	<p>d^2x/dt^2 = <input id="d2xdt2"></input></p>
	<p>d^2y/dt^2 = <input id="d2ydt2"></input></p>
	<p><button id="start">Start</button></p>
	</body>
	</html>