Cool Blobs
HTML
<canvas id="c"></canvas>
CSS
body {
padding: 0px;
}
canvas {
height: 100%;
width: 100%;
display:block;
}
JavaScript
var n = parseInt(prompt("How many balls?", 15), 10);
(function($) {
function Vector(x, y) {
this.x = x;
this.y = y;
this.magnitude = function() {
return Math.sqrt(this.dot(this));
};
this.unit = function() {
return this.scale(1 / this.magnitude());
};
this.add = function(that) {
return new Vector(this.x + that.x, this.y + that.y);
};
this.subtract = function(that) {
return new Vector(this.x - that.x, this.y - that.y);
};
this.scale = function(factor) {
return new Vector(this.x * factor, this.y * factor);
};
this.dot = function(that) {
return this.x * that.x + this.y * that.y;
};
this.distanceTo = function(that) {
return this.subtract(that).magnitude();
};
this.toString = function() {
return '(' + this.x + ',' + this.y + ')';
};
}
var canvas = document.getElementById('c'),
c = canvas.getContext('2d'),
w = canvas.width,
h = canvas.height,
p = [],
clr;
var mousePos = null;
var mouseDown = false;
function Ball(position, velocity, radius, color) {
this.position = position || new Vector(0, 0);
this.velocity = velocity || new Vector(0, 0);
this.radius = radius || 5;
this.acceleration = new Vector(0, 0);
this.color = color;
this.draw = function() {
c.save();
c.fillStyle = this.color;
c.beginPath();
c.arc(this.position.x, this.position.y, this.radius, 0, Math.PI * 2, false);
c.closePath();
c.fill();
c.restore();
};
this.normaliseToBox = function() {
var collision = false;
if (this.position.x < this.radius) {
this.velocity.x = -this.velocity.x;
this.position.x =...