Skip to content

Instantly share code, notes, and snippets.

@tbranyen
Created April 25, 2011 14:13
Show Gist options
  • Save tbranyen/940567 to your computer and use it in GitHub Desktop.
Save tbranyen/940567 to your computer and use it in GitHub Desktop.
Starrydraw canvas particle stuffs
window.StarryDraw = function(self) {
var elem,
context,
size,
skip,
data,
// Particle
particles,
// Convenience helpers
width, height,
// Temp stash for quick vars
stash = {},
// Handles context stuff
_helper = function(self) {
var ctx,
canvas;
self.init = function(_ctx) {
ctx = _ctx;
canvas = ctx.canvas;
return self;
};
self.G = 6.673e-11;
self.clear = function() {
canvas.width = canvas.width;
};
self.rect = function(color, x, y, width, height) {
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
ctx.fill();
};
self.random = function(min, max, decimal) {
if(decimal) {
return Math.random() * (max - min) + min;
}
return Math.floor( Math.random() * (max - min+1) ) + min;
};
self.deg2rad = function(deg) {
return deg*(Math.PI/180);
};
self.rad2deg = function(rad) {
return rad*(180/Math.PI);
};
self.angleFromPoints = function(x1, x2, y1, y2) {
return Math.atan2(y2-y1, x2-x1);
};
self.velocity = function(m2, r1) {
var offset = .0001, G = 6.67 * Math.pow(10, -11);
return offset/Math.sqrt( (2*G*m2)/r1 );
};
self.distance = function(x2, x1, y2, y1) {
return Math.sqrt( Math.pow(x2-x1, 2) + Math.pow(y2-y1, 2) );
};
self.invert = function(rgb) {
for(var i=0,len=rgb.length; i < len; i++) {
rgb[i] = rgb[i] ^ 255;
}
return rgb;
};
self.hex2rgb = function(hex) {
var rgb = [];
for(var i=0,len=hex.length; i < len; i=i+2) {
rgb.push( new Number("0x"+ hex.substring(i, i+2)) );
}
return rgb;
};
return self;
}({});
// Setup
self.init = function(_elem, _data, _skip) {
elem = _elem;
context = elem.getContext("2d");
helper = _helper.init(context);
helper.clear();
skip = _skip;
size = _data.length;
data = _data;
particles = new Array(size);
// Set fps
self.fps = 1000/24;
self.speed = 5;
self.impact = [];
// {
// diameter: 0,
// x: 0,
// y: 0
// };
// Init default size
self.resize();
};
self.resize = function() {
width = context.canvas.width = window.innerWidth;
height = context.canvas.height = window.innerHeight;
};
self.update = function() {
// Generate data
for(var i=0, particle; particle=particles[i], i<size; i++) {
// Already exists
if(particle && (particle.p[0] < width && particle.p[1] < height && particle.p[0] > skip && particle.p[1] > skip)) {
if(self.impact.length) {
for(var n=0; n<self.impact.length; n++) {
if(helper.distance(self.impact[n].x, particle.p[0], self.impact[n].y, particle.p[1]) <= self.impact[n].diameter) {
stash.radius = Math.abs(helper.distance(particle.p[0], self.impact[n].x, particle.p[1], self.impact[n].y));
// Test direction with one press
stash.thrust = (helper.G*self.impact[n].diameter*particle.mass)/stash.radius * 1000000000;
particle.p[0] += particle.v[0] * (self.speed*stash.thrust * ((Math.cos(helper.angleFromPoints(self.impact[0].x, particle.p[0], self.impact[0].y, particle.p[1]))) + (particle.p[0]*helper.G)/(Math.pow(particle.p[0], 2) + Math.pow(particle.p[1], 2)) ));
particle.p[1] += particle.v[1] * (self.speed*stash.thrust * ((Math.sin(helper.angleFromPoints(self.impact[0].x, particle.p[0], self.impact[0].y, particle.p[1]))) + (particle.p[0]*helper.G)/(Math.pow(particle.p[0], 2) + Math.pow(particle.p[1], 2)) ));
}
else {
// Move normally
particle.p[0] += self.speed*particle.v[0];
particle.p[1] += self.speed*particle.v[1];
}
}
}
else {
// Move normally
particle.p[0] += self.speed*particle.v[0];
particle.p[1] += self.speed*particle.v[1];
}
}
// Reverse velocities
else if(particle && (particle.p[0] > width || particle.p[0] < skip)) {
particle.v[0] = -1*particle.v[0];
// Move normally
particle.p[0] += self.speed*particle.v[0]+skip;
particle.p[1] += self.speed*particle.v[1];
}
else if(particle && (particle.p[1] > height || particle.p[1] < skip)) {
particle.v[1] = -1*particle.v[1];
// Move normally
particle.p[0] += self.speed*particle.v[0];
particle.p[1] += self.speed*particle.v[1]+skip;
}
// Create new
if( !particle && data[i] ) {
particles[i] = {
p: [ data[i][0]+3, data[i][1]+3 ],
v: [ helper.random(-1, 1, true), helper.random(-1, 1, true) ],
//color: "#FFF",
color: ["rgba(", data[i][2], ",", data[i][3], ",", data[i][4], ",", data[i][5], ")"].join(""),
mass: 10,
width: 30, height: 30
};
}
}
// Render
helper.clear();
//helper.bgfill = helper.bgfill && "#000";
//helper.rect(helper.bgfill, 0, 0, width, height);
for(var i=0, particle; particle=particles[i], i<size; i++) {
helper.rect(particle.color, particle.p[0], particle.p[1], particle.width, particle.height);
}
};
return self;
}({});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment