kevinmehall/canvas_springsim.html

## canvas_springsim.html
<!doctype html>
<html><head>
<script>
function init(){
    var canvas = document.getElementById('canvas')

    var width = canvas.width = window.innerWidth-10
	var height = canvas.height = window.innerHeight-10

    var c = canvas.getContext('2d');

    var mouse_x=null, mouse_y=null
	var old_mouse_x=null, old_mouse_y=null

    function blade(bottom_x, bottom_y, base_x, base_y, friction, spring_x, spring_y, color){
		var d_x=base_x+200, d_y=base_y+100
		var v_x=0, v_y=0
		var a_x=0, a_y=0


	    function step(){
	    	a_x = spring_x*(base_x - d_x)
	    	a_y = spring_y*(base_y - d_y)

	    	if (old_mouse_x !== null && old_mouse_y !== null && mouse_x !== null && mouse_y !== null){
	    		var o_x=mouse_x-d_x
	    		var o_y=mouse_y-d_y
	    		//var scale=500.0/Math.sqrt(o_x*o_x+o_y*o_y)
	    		var scale=15000.0/(o_x*o_x+o_y*o_y)
	    		scale = Math.min(scale, 10)
	    		a_x += (mouse_x-old_mouse_x)*0.2*scale
	    		a_y += (mouse_y-old_mouse_y)*0.2*scale
	    	}

	    	v_x=v_x*friction+a_x
	    	v_y=v_y*friction+a_y
	    	d_x+=v_x; d_y+=v_y;

	    	c.beginPath()
	    	c.lineWidth=6
	    	c.lineCap='round'
	    	c.strokeStyle=color
	    	c.moveTo(bottom_x, bottom_y)
	    	c.bezierCurveTo(bottom_x, bottom_y, base_x, base_y, d_x, d_y)
	    	c.stroke()

	    	return (Math.abs(a_x)<0.01 && Math.abs(a_y)<0.01 && Math.abs(v_x)<0.01 && Math.abs(v_y)<0.01)
	    }
	    return {step:step}
	}

	blades = [
		blade(510, height-50, 350, 200, 0.85, 0.1, 0.1, 'blue'),
		blade(500, height-50, 450, 200, 0.8, 0.1, 0.1, 'red'),
		blade(500, height-50, 550, 200, 0.8, 0.1, 0.1, 'orange'),
		blade(490, height-50, 650, 200, 0.85, 0.1, 0.1, 'green'),
		blade(500, height-50, 500, 70, 0.9, 0.1, 0.5, 'cyan'),
		blade(500, height-50, 650, 70, 0.9, 0.1, 0.5, 'yellow'),
		blade(500, height-50, 350, 70, 0.9, 0.1, 0.5, 'magenta'),
	]

	for (var i=25; i<width-25; i+=25){
		blades.push(blade(i, height-50, i, height-130, 0.8, 0.1, 0.1,'limegreen'))
	}

	for (var i=37; i<width-25; i+=25){
		blades.push(blade(i, height-80, i, height-145, 0.8, 0.05, 0.2, 'lightblue'))
	}

	function stepAll(){
		var stop_flag=true;
		//c.clearRect(0,0,width,height)
		c.fillStyle='rgba(255,255,255,0.7)'
		c.fillRect(0, 0, width, height)
		for (var i=0; i<blades.length; i++){
			stop_flag &= blades[i].step()
		}
		old_mouse_x=mouse_x
	    old_mouse_y=mouse_y
	    mouse_x=mouse_y=null
		if (stop_flag) stop()
	}

	var interval = null
    function start(){
    	if (interval ==null) interval=setInterval(stepAll, 75)
    }
    function stop(){
    	clearInterval(interval)
    	interval=null
    }

    document.body.onmousemove=function(e){
   		mouse_x=e.clientX
   		mouse_y=e.clientY
   		start()
   	}
   	start()
}

</script>

<style>
* {
	padding: 0;
	margin:0;

}
</style>
</head>
<body onload='setTimeout(init, 300)'>
<canvas id='canvas'></canvas>
</body></html>
	<!doctype html>
	<html><head>
	<script>
	function init(){
	var canvas = document.getElementById('canvas')

	var width = canvas.width = window.innerWidth-10
	var height = canvas.height = window.innerHeight-10

	var c = canvas.getContext('2d');

	var mouse_x=null, mouse_y=null
	var old_mouse_x=null, old_mouse_y=null

	function blade(bottom_x, bottom_y, base_x, base_y, friction, spring_x, spring_y, color){
	var d_x=base_x+200, d_y=base_y+100
	var v_x=0, v_y=0
	var a_x=0, a_y=0


	function step(){
	a_x = spring_x*(base_x - d_x)
	a_y = spring_y*(base_y - d_y)

	if (old_mouse_x !== null && old_mouse_y !== null && mouse_x !== null && mouse_y !== null){
	var o_x=mouse_x-d_x
	var o_y=mouse_y-d_y
	//var scale=500.0/Math.sqrt(o_xo_x+o_yo_y)
	var scale=15000.0/(o_xo_x+o_yo_y)
	scale = Math.min(scale, 10)
	a_x += (mouse_x-old_mouse_x)0.2scale
	a_y += (mouse_y-old_mouse_y)0.2scale
	}

	v_x=v_x*friction+a_x
	v_y=v_y*friction+a_y
	d_x+=v_x; d_y+=v_y;

	c.beginPath()
	c.lineWidth=6
	c.lineCap='round'
	c.strokeStyle=color
	c.moveTo(bottom_x, bottom_y)
	c.bezierCurveTo(bottom_x, bottom_y, base_x, base_y, d_x, d_y)
	c.stroke()

	return (Math.abs(a_x)<0.01 && Math.abs(a_y)<0.01 && Math.abs(v_x)<0.01 && Math.abs(v_y)<0.01)
	}
	return {step:step}
	}

	blades = [
	blade(510, height-50, 350, 200, 0.85, 0.1, 0.1, 'blue'),
	blade(500, height-50, 450, 200, 0.8, 0.1, 0.1, 'red'),
	blade(500, height-50, 550, 200, 0.8, 0.1, 0.1, 'orange'),
	blade(490, height-50, 650, 200, 0.85, 0.1, 0.1, 'green'),
	blade(500, height-50, 500, 70, 0.9, 0.1, 0.5, 'cyan'),
	blade(500, height-50, 650, 70, 0.9, 0.1, 0.5, 'yellow'),
	blade(500, height-50, 350, 70, 0.9, 0.1, 0.5, 'magenta'),
	]

	for (var i=25; i<width-25; i+=25){
	blades.push(blade(i, height-50, i, height-130, 0.8, 0.1, 0.1,'limegreen'))
	}

	for (var i=37; i<width-25; i+=25){
	blades.push(blade(i, height-80, i, height-145, 0.8, 0.05, 0.2, 'lightblue'))
	}

	function stepAll(){
	var stop_flag=true;
	//c.clearRect(0,0,width,height)
	c.fillStyle='rgba(255,255,255,0.7)'
	c.fillRect(0, 0, width, height)
	for (var i=0; i<blades.length; i++){
	stop_flag &= blades[i].step()
	}
	old_mouse_x=mouse_x
	old_mouse_y=mouse_y
	mouse_x=mouse_y=null
	if (stop_flag) stop()
	}

	var interval = null
	function start(){
	if (interval ==null) interval=setInterval(stepAll, 75)
	}
	function stop(){
	clearInterval(interval)
	interval=null
	}

	document.body.onmousemove=function(e){
	mouse_x=e.clientX
	mouse_y=e.clientY
	start()
	}
	start()
	}

	</script>

	<style>
	* {
	padding: 0;
	margin:0;

	}
	</style>
	</head>
	<body onload='setTimeout(init, 300)'>
	<canvas id='canvas'></canvas>
	</body></html>