sordina/movement.html

## movement.html
<!DOCTYPE HTML>
<html>
	<head>
		<title>movement</title>
		<style type="text/css" media="all">
			body {
				position: absolute;
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			canvas {
				width: 100%;
				height: 80%;
				border: 1px solid blue;
			}
			h1 {
				text-align: center;
			}
		</style>
		<script type="text/javascript" charset="utf-8">

		window.onload = function() {
			var canvas    = document.getElementById("myCanvas");
			canvas.width  = canvas.scrollWidth
			canvas.height = canvas.scrollHeight
			var ctx       = canvas.getContext("2d");

			animation(ctx, canvas.scrollWidth/2, canvas.scrollHeight/2)
		}

		var ANIMATIONFRAME = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
		var HEXES          = [ "0" , "1" , "2" , "3" , "4" , "5" , "6" , "7" , "8" , "9" , "A" , "B" , "C" , "D" , "E" , "F" ]

		function randomColor() {
			return "#" +
				HEXES[ Math.floor( Math.random() * 16 ) ] + HEXES[ Math.floor( Math.random() * 16 ) ] +
				HEXES[ Math.floor( Math.random() * 16 ) ] + HEXES[ Math.floor( Math.random() * 16 ) ] +
				HEXES[ Math.floor( Math.random() * 16 ) ] + HEXES[ Math.floor( Math.random() * 16 ) ]
		}

		function randomPos(c) {
			return 2 * Math.random() * c;
		}

		function animation(ctx,cx,cy) {
			var accX = []; var accY = []; var velX = []; var velY = []; var posX = []; var posY = []; var cols = [];
			var OBJECT_COUNT = 700;

			for(var i = 0; i < OBJECT_COUNT; i++) {
				accX[i] = 0; accY[i] = 0; velX[i] = 0; velY[i] = 0; posX[i] = randomPos(cx); posY[i] = randomPos(cy);
				cols[i] = randomColor()
			}

			function updateAcc() {
				for(var i = 0; i < OBJECT_COUNT; i++) {
					accX[i] = Math.random() * 10 - 5;
					accY[i] = Math.random() * 10 - 5; } }

			var prevVelT = new Date().getTime();
			function updateVel() {
				var dt = (new Date().getTime()) - prevVelT;
				for(var i = 0; i < OBJECT_COUNT; i++) {
					velX[i] = velX[i] + dt * accX[i] / 1000;
					velY[i] = velY[i] + dt * accY[i] / 1000;
				};
				prevVelT = prevVelT + dt; }

			var prevPosT = new Date().getTime();
			function updatePos() {
				var dt = (new Date().getTime()) - prevPosT;
				for(var i = 0; i < OBJECT_COUNT; i++) {
					posX[i] = posX[i] + dt * velX[i] / 1000;
					posY[i] = posY[i] + dt * velY[i] / 1000;
				};
				prevPosT = prevPosT + dt;
				ANIMATIONFRAME(draw);
			}

			function draw() {
				for(var i = 0; i < OBJECT_COUNT; i++) {
					ctx.fillStyle = cols[i];
					ctx.fillRect(posX[i],posY[i],3,3); } }

			setInterval(updateAcc, 500);
			setInterval(updateVel, 200);
			setInterval(updatePos, 30);
		}
		</script>
	</head>
	<body>
		<h1>movement</h1>
		<canvas id="myCanvas"></canvas>
	</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>movement</title>
	<style type="text/css" media="all">
	body {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}
	canvas {
	width: 100%;
	height: 80%;
	border: 1px solid blue;
	}
	h1 {
	text-align: center;
	}
	</style>
	<script type="text/javascript" charset="utf-8">

	window.onload = function() {
	var canvas = document.getElementById("myCanvas");
	canvas.width = canvas.scrollWidth
	canvas.height = canvas.scrollHeight
	var ctx = canvas.getContext("2d");

	animation(ctx, canvas.scrollWidth/2, canvas.scrollHeight/2)
	}

	var ANIMATIONFRAME = window.requestAnimationFrame \|\| window.mozRequestAnimationFrame \|\| window.webkitRequestAnimationFrame \|\| window.msRequestAnimationFrame;
	var HEXES = [ "0" , "1" , "2" , "3" , "4" , "5" , "6" , "7" , "8" , "9" , "A" , "B" , "C" , "D" , "E" , "F" ]

	function randomColor() {
	return "#" +
	HEXES[ Math.floor( Math.random() * 16 ) ] + HEXES[ Math.floor( Math.random() * 16 ) ] +
	HEXES[ Math.floor( Math.random() * 16 ) ] + HEXES[ Math.floor( Math.random() * 16 ) ] +
	HEXES[ Math.floor( Math.random() * 16 ) ] + HEXES[ Math.floor( Math.random() * 16 ) ]
	}

	function randomPos(c) {
	return 2 * Math.random() * c;
	}

	function animation(ctx,cx,cy) {
	var accX = []; var accY = []; var velX = []; var velY = []; var posX = []; var posY = []; var cols = [];
	var OBJECT_COUNT = 700;

	for(var i = 0; i < OBJECT_COUNT; i++) {
	accX[i] = 0; accY[i] = 0; velX[i] = 0; velY[i] = 0; posX[i] = randomPos(cx); posY[i] = randomPos(cy);
	cols[i] = randomColor()
	}

	function updateAcc() {
	for(var i = 0; i < OBJECT_COUNT; i++) {
	accX[i] = Math.random() * 10 - 5;
	accY[i] = Math.random() * 10 - 5; } }

	var prevVelT = new Date().getTime();
	function updateVel() {
	var dt = (new Date().getTime()) - prevVelT;
	for(var i = 0; i < OBJECT_COUNT; i++) {
	velX[i] = velX[i] + dt * accX[i] / 1000;
	velY[i] = velY[i] + dt * accY[i] / 1000;
	};
	prevVelT = prevVelT + dt; }

	var prevPosT = new Date().getTime();
	function updatePos() {
	var dt = (new Date().getTime()) - prevPosT;
	for(var i = 0; i < OBJECT_COUNT; i++) {
	posX[i] = posX[i] + dt * velX[i] / 1000;
	posY[i] = posY[i] + dt * velY[i] / 1000;
	};
	prevPosT = prevPosT + dt;
	ANIMATIONFRAME(draw);
	}

	function draw() {
	for(var i = 0; i < OBJECT_COUNT; i++) {
	ctx.fillStyle = cols[i];
	ctx.fillRect(posX[i],posY[i],3,3); } }

	setInterval(updateAcc, 500);
	setInterval(updateVel, 200);
	setInterval(updatePos, 30);
	}
	</script>
	</head>
	<body>
	<h1>movement</h1>
	<canvas id="myCanvas"></canvas>
	</body>
	</html>