Raphaël eye candy
Thegor - The Graphical Operation Runner
by andersand
HTML
<div id="gfx"></div>
JavaScript
/**
* Raphaël eye candy
*/
var andersand = {
config : {
width : 600,
height: 600,
interval:5,
repetitions:2000,
maxSimultaneousElements : 100,
greet : "Thanks goes to Dmitry Baranovskiy for Raphaël"
},
elementStack : [],
rnd : function(max) {
return Math.floor(Math.random()*max);
},
rnd2: function(min, max) {
return min+andersand.rnd(max-min);
},
operations : function(paper) {
var operations = [];
var config = andersand.config;
var rnd = andersand.rnd,
rnd2 = andersand.rnd2;
// strobe : randomly colored diagonal line from top,left
operations.push(function(i) {
var x2 = i%2 ? rnd(config.width) : config.width,
y2 = i%2 ? config.width : rnd(config.height);
var element = paper.path("M0 0" + "L" + x2 + " " + y2);
element.attr({"stroke" : "rgb("+rnd(255)+","+rnd(255)+","+rnd(255)+")"});
andersand.elementStack.push(element);
});
// circle : randomly sized and placed circle
operations.push(function(i) {
var r = rnd2(5,25);
var element = paper.circle(rnd2(r, config.width-r), rnd2(r, config.height-r), r);
element.attr({"stroke" : "#fff"});
andersand.elementStack.push(element);
});
return operations;
}
};
andersand.run = function() {
var config = andersand.config;
var paper = new Raphael("gfx", config.width, config.height);
paper.rect(0,0,config.width,config.height).attr({fill:"#000"});
var afOperations = andersand.operations(paper);
for (var i=1; i<config.repetitions; i++) {
(function(i) { //closure needed to preserve value of i
setTimeout(function() {
afOperations[andersand.rnd(afOperations.length)](i);
if (andersand.elementStack.length > config.maxSimultaneousElements) {
...