Skip to content

Instantly share code, notes, and snippets.

@robbles
Created March 10, 2011 21:21
Show Gist options
  • Save robbles/864953 to your computer and use it in GitHub Desktop.
Save robbles/864953 to your computer and use it in GitHub Desktop.
The title animation from doteight.com, converted to Javascript.
(function() {
var mobile = false;
try {
mobile = jQuery.browser.mobile;
} catch(err) { }
var sketch = function(p) {
var num_elements = 80;
p.size(720,100);
// Wimp out for mobile browsers
p.frameRate(mobile? 5 : 10);
$(canvas).parent().mouseenter(function() {
p.frameRate(30);
})
.mouseleave(function() {
p.frameRate(10);
});
p.fill(255);
p.colorMode(p.HSB, 255);
p.rectMode(p.CENTER);
// This color is used to fade in the background every frame
var bg = p.color(0x15dfd1df);
p.background(0xdfd1df);
// Two attractor points
var attractor1 = new p.PVector(p.width/3.0, p.height/2.0);
var attractor2 = new p.PVector(2*p.width/3.0, p.height/2.0);
p.draw = function() {
p.fill(bg);
p.noStroke();
p.rect(p.width/2.0, p.height/2.0, p.width, p.height);
elements.forEach(function(element) {
element.draw();
element.update();
});
};
var Element = function(x, y, c) {
var position = new p.PVector(x, y);
var velocity = new p.PVector(p.random(-3, 3), p.random(-3, 3));
var accel = new p.PVector(0.1, 0.05);
var c1 = c;
var c2 = p.color(p.red(c), p.green(c), p.blue(c), p.alpha(c) * 2);
this.draw = function() {
p.fill(c1);
p.stroke(c2);
p.strokeWeight(1);
p.rect(position.x, position.y, 100, 50);
};
this.update = function() {
// Random acceleration
velocity.add(new p.PVector(
p.random(- accel.x, accel.y),
p.random(- accel.y, accel.y)));
// Motion towards attractor1 and attractor2
var toOrigin = p.PVector.sub(attractor1, position);
toOrigin.limit(accel.x);
velocity.add(toOrigin);
toOrigin = p.PVector.sub(attractor2, position);
toOrigin.limit(accel.x);
velocity.add(toOrigin);
// Limit speed
velocity.limit(100 * accel.x);
// Update position
position.add(velocity);
};
};
// Generate a random light color
var genColor = function(opacity) {
return p.color(
p.random(100,255),
p.random(100,255),
p.random(100,255), opacity);
};
// Make some elements
var elements = [];
for(var i=0; i<num_elements; i++) {
var element = new Element(
p.random(0, p.width), p.random(0,p.height),
genColor(1));
elements.push(element);
}
};
// Attach processing to canvas#title-art
var canvas = $('#title-art').get(0);
var title_sketch = new Processing(canvas, sketch);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment