Pink stars and soap bubbles
Thegor - The Graphic Operation Runner
by andersand
HTML
<div id="gfx"></div>
JavaScript
/**
* Raphaël eye candy
*
* @author [email protected]
*/
var andersand = {
config : {
name : "Pink stars and soap bubbles",
greet : "Dedicated to my beautiful daughter Mari <3",
selection : ["tiny stars", "pentagrams", "soap bubbles"],
width : 600,
height : 600,
initialWait : 2000,
interval : 20,
repetitions : 800,
maxSimultaneousElements : 200,
patterns : {
tinystar : "M4 4L0 4M4 4L4 0M4 4L8 4M4 4L6 8M4 4L2 8",
pentagram : "M9,95h231l-187,136 71-220 71,220z", // by Inductiveload @ wikimedia
moon : "M10 20C95 0 95 120 10 100C60 110 60 10 10 20z"
}
},
elementStack : [],
rnd : function(max) {
return Math.round(Math.random()*max);
},
rnd2 : function(min, max) {
return min+andersand.rnd(max-min);
},
rnd3 : function(min, max) {
return min+Math.random()*max;
},
operations : function(paper) {
var operations = [];
var config = andersand.config;
var rnd = andersand.rnd,
rnd2 = andersand.rnd2,
rnd3 = andersand.rnd3;
var rndAttr = function(value) {
var attr = {};
var attrName = rnd(1) ? "fill" : "stroke";
attr[attrName] = value;
return attr;
};
operations.push({
name : "soap bubbles",
fun : function(i) {
var r = rnd2(2,15);
var element = paper.circle(rnd2(r, config.width-r), rnd2(r, config.height-r), r);
element.attr({"stroke" : "#fff"});
andersand.elementStack.push(element);
}
});
operations.push({
name : "tiny stars",
fun : function(i) {
var x = rnd2(8,config.width-8),
y = rnd2(8,config.height-8);
var element = paper.path(config.patterns.tinystar);
...