Abstract Simulation

Not a good result :/

HTML

<canvas unselectable="on" id="gridCanvas" width="500" height="500"></canvas><br>
		<div id="ms"></div>

CSS

html, body { 
    overflow: hidden; 
    background: #000; 
    padding: 0px; margin: 0px; 
    width: 100%; height: 100%; 
}

#ms {
  position: absolute;
  top:0;
  left:0;
  color: green;
}

canvas {
	border:1px #fff solid;
	background-color:#000;
}

JavaScript

"use strict"

var ctx = document.getElementById('gridCanvas').getContext('2d');
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var info = document.getElementById('ms');

function repeat(c, s) { for (var i=0;i<c;i++) s(i); }

var nbodyCount = 3000, kick = 0, mass = 1, gravity = 1;

var dots = [], halfKick = kick/2;

repeat(nbodyCount, function (i) {
	dots.push(
		Math.random()*width, // [0]
		Math.random()*height, // [1]
		((Math.random()*kick)-halfKick), // [2]
		((Math.random()*kick) - halfKick), // [3]
		mass // [4]
	);
});

function applyRelation(i) {
	var mag;
	for (var j = dots.length-5; j>=i+5; j-=5) {
		var dx = dots[j] - dots[i];
		var dy = dots[j+1] - dots[i+1];
		var dist = Math.sqrt((dx*dx) + (dy*dy));
		if (dist > 1) {
			mag = (gravity * dots[i+4] * dots[i+4]) / (dist*dist*dist);
			dots[i+2] += dx * mag * dots[i+4];
			dots[i+3] += dy * mag * dots[i+4];
			dots[j+2] -= dx * mag * dots[j+4];
			dots[j+3] -= dy * mag * dots[j+4];
		}
	}
}

function bounceWalls(i) {
	if (dots[i] > width)		{ dots[i+2] = 0; dots[i] = width; }
	else if (dots[i] < 0)	{ dots[i+2] = 0; dots[i] = 0; }
	if (dots[i+1] > height)	{ dots[i+3] = 0; dots[i+1] = height; }
	else if (dots[i+1] < 0)	{ dots[i+3] = 0; dots[i+1] = 0; }
}

function tick() {
	var startTimestamp = +new Date();
	var i;
	for (i = dots.length-5; i>=0; i-=5){
		applyRelation(i);
		dots[i] += dots[i+2];
		dots[i+1] += dots[i+3];
		bounceWalls(i);
		//if (dots[i] > width)		{ dots[i+2] = 0; dots[i] = width; }
		//else if (dots[i] < 0)	{ dots[i+2] = 0; dots[i] = 0; }
		//if (dots[i+1] > height)	{ dots[i+3] = 0; dots[i+1] = height; }
		//else if (dots[i+1] < 0)	{ dots[i+3] = 0; dots[i+1] = 0; }
		
		//index = ((dots[i]|0) + (dots[i+1]|0) * width)*4;
		//pixels.data[index] = 255;
		//pixels.data[index+1] = 255;
		//pixels.data[index+2] = 255;
		//pixels.data[index+3] = 255;
	}
	ctx.clearRect(0,0,width,height);
	for (i =...