demoscript.js

var postion;
var velocity;
var ground;
var timeticks;
var stepSimulator = require("./mysimulator.js")


var canvas = document.createElement("canvas")
canvas.width = 500
canvas.height = 500
document.body.appendChild(canvas)
var context = canvas.getContext("2d")


var start = function() {
	
	// postions
	var pStr = document.getElementById("positions").value.split("\n")
	position = new Array(pStr.length)
	
	for (var i = 0; i < pStr.length; i++) {
		var tmp = pStr[i].split(",")
		position[i] = new Array(parseFloat(tmp[0]) , parseFloat(tmp[1]))
	}
	
	// velocities
	var vStr = document.getElementById("velocities").value.split("\n")
	velocity = new Array(vStr.length)
	
	for (var i = 0; i < vStr.length; i++) {
		var tmp = vStr[i].split(",")
		velocity[i] = new Array(parseFloat(tmp[0]) , parseFloat(tmp[1]))
	}
	
	// ground
	var gStr = document.getElementById("grounds").value
	ground = new Array()
	
	ground = [parseFloat(gStr.split(", ")[0]) , parseFloat(gStr.split(", ")[1])]
	
	// time per tick
	timetick = parseFloat(timeticks)
}


var dt       = 0.001




var drawFrame = function() {

  context.fillStyle = "rgb(0, 0, 0)"
  context.fillRect(0, 0, 500, 500)
  
	context.save()
	context.translate(250,250)
		
	context.fillStyle = "rgb(0, 0, 255)"
	context.beginPath();
	context.moveTo(-150,-150);
	context.lineTo(150,-150);
	context.lineTo(150, -(ground[0]/ground[1])*150);
	context.lineTo(-150, -(ground[0]/ground[1])*-150);
	context.fill();

	for (var i=0; i < position.length; i++){
	
		var nstate = stepSimulator(position, velocity, ground, dt)
		position = nstate.position
		velocity = nstate.velocity
	
		context.fillStyle = "rgb(255, 0, 0)"
		context.beginPath();
		context.arc((position[i][0])*-150, (position[i][1])*-150 , 5 ,0,Math.PI*2,true)
		context.fill()	
	}
	context.restore()
	
}


 var init = function() {
	 start()
	 drawFrame()
	 setInterval(drawFrame, timetick)
}
init()