314maro/e.html

## e.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 charge1 = { x:-200, y:0, q: 1 };
var charge2 = { x: 200, y:0, q:-1 };
var xy = [-180,50];
function kuuron(p,q) {
  function d2(p,q) {
    return (p.x-q.x)*(p.x-q.x)+(p.y-q.y)*(p.y-q.y);
  }
  var a = 500000 * p.q * q.q / (d2(p,q)*Math.sqrt(d2(p,q)));
  return { x: a*(p.x-q.x),  y: a*(p.y-q.y) };
}
function dxfun(t,arr) {
  var obj = { x:arr[0], y:arr[1], q:1 };
  return kuuron(obj,charge1).x + kuuron(obj,charge2).x;
}
function dyfun(t,arr) {
  var obj = { x:arr[0], y:arr[1], q:1 };
  return kuuron(obj,charge1).y + kuuron(obj,charge2).y;
}

var xelem, yelem, animeFlag = false, count = 0;
function draw() {
  var width = canvas.width, height = canvas.height;
  ctx.strokeStyle = "black";
  ctx.lineTo(xy[0]+width/2-10,xy[1]+height/2-10,20,20);
  ctx.stroke();
  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 = [ dxfun, dyfun ];
  stepRK(h, fs, count*h, xy);
  draw();
  count++;
}

window.onload = function () {
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  xelem = document.getElementById("x");
  yelem = document.getElementById("y");
  ctx.beginPath();
  for (var i = 0; i < 2000; i++) {
    stepCanvas();
  }
};
</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>
</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 charge1 = { x:-200, y:0, q: 1 };
	var charge2 = { x: 200, y:0, q:-1 };
	var xy = [-180,50];
	function kuuron(p,q) {
	function d2(p,q) {
	return (p.x-q.x)(p.x-q.x)+(p.y-q.y)(p.y-q.y);
	}
	var a = 500000 * p.q * q.q / (d2(p,q)*Math.sqrt(d2(p,q)));
	return { x: a(p.x-q.x), y: a(p.y-q.y) };
	}
	function dxfun(t,arr) {
	var obj = { x:arr[0], y:arr[1], q:1 };
	return kuuron(obj,charge1).x + kuuron(obj,charge2).x;
	}
	function dyfun(t,arr) {
	var obj = { x:arr[0], y:arr[1], q:1 };
	return kuuron(obj,charge1).y + kuuron(obj,charge2).y;
	}

	var xelem, yelem, animeFlag = false, count = 0;
	function draw() {
	var width = canvas.width, height = canvas.height;
	ctx.strokeStyle = "black";
	ctx.lineTo(xy[0]+width/2-10,xy[1]+height/2-10,20,20);
	ctx.stroke();
	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 = [ dxfun, dyfun ];
	stepRK(h, fs, count*h, xy);
	draw();
	count++;
	}

	window.onload = function () {
	canvas = document.getElementById('canvas');
	ctx = canvas.getContext('2d');
	xelem = document.getElementById("x");
	yelem = document.getElementById("y");
	ctx.beginPath();
	for (var i = 0; i < 2000; i++) {
	stepCanvas();
	}
	};
	</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>
	</body>
	</html>