Gravity Pen

by Josh Pullen

HTML

<canvas id="canvas"></canvas>

CSS

body {
    margin:0;
    overflow:hidden;
}
#canvas {
    background:black;
}

JavaScript

var canvas = document.getElementById("canvas"),
	ctx = canvas.getContext("2d");
    
var objects, segments, k, mouseDown, mouseX, mouseY;
    
var planet = function(x,y,posRand,mass,xVel,yVel, velRand) {
	var dir = Math.random() * Math.PI * 2;
    this.x = x + Math.cos(dir) * posRand * Math.random();
    this.y = y + Math.sin(dir) * posRand * Math.random();
    this.mass = mass;
    var dir = Math.random() * Math.PI * 2;
  	this.xVel = parseInt(xVel) + Math.cos(dir) * velRand * Math.random();
    this.yVel = parseInt(yVel) + Math.sin(dir) * velRand * Math.random();
};

function drawDot(x, y, r) {
    ctx.beginPath();
    ctx.arc(x,y,r,0,2*Math.PI);
    ctx.fillStyle="#fff";
    ctx.fill();
}

function dist(obj1, obj2) {
	return Math.sqrt(Math.pow(obj2.x - obj1.x, 2) + Math.pow(obj2.y - obj1.y, 2));
}

var segment = function(x1, y1, x2, y2) {
	/* Overusing the "new" thing because I just learned how to do it.
       Probably not actually needed here. */
	this.x1 = x1;
    this.y1 = y1;
    this.x2 = x2;
    this.y2 = y2;
    this.time = new Date().getTime();
}

function dataUpdate() {
	if(mouseDown && Math.random() < 0.2) {
    	objects.push(new planet(mouseX, mouseY, 80, Math.random() * 8 + 3, 0, 0, 5));
    }
	for(i = 0; i < objects.length; i++) {
    
    	if(objects[i].x < -100 ||
           objects[i].x > canvas.width + 100 ||
           objects[i].y < -100 ||
           objects[i].y > canvas.height + 100) {
           
        	objects.splice(i, 1);
        } else {
            for(n = 0; n < objects.length; n++) {
                if(n != i) {
                    var force = k * objects[i].mass / dist(objects[i], objects[n]);
                    var angle = Math.atan2(objects[i].y - objects[n].y, objects[i].x - objects[n].x);
                    objects[i].xVel += force * -Math.cos(angle);
                    objects[i].yVel += force * -Math.sin(angle);
                }
            }
            var old_x = objects[i].x;
            var old_y =...