Created
March 10, 2011 21:21
-
-
Save robbles/864953 to your computer and use it in GitHub Desktop.
The title animation from doteight.com, converted to Javascript.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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