F=Math;m=F.round;P=F.abs;A=F.floor;n="px";j=document;W=.008;ab=10;aa=28;Z=8/3;B=1000;p=255;U=8;K=250;G=0;k=[];v=0;d=10;J=d;T=1;D="rgba(0,0,0,.7)";r=",center center,";o="background-";t="border-radius:100px;";e="image:-";O=o+e;N=v*U+K;M=d*U+K;for(V=0;V<B;V++){X=j.createElement("div");k.push(X);j.body.appendChild(X)}function s(a){a%=360;a/=60;V=A(a);Y=a-A(a);S=1-Y;switch(V){case 0:Q=1;R=Y;C=0;break;case 1:Q=S;R=1;C=0;break;case 2:Q=0;R=1;C=Y;break;case 3:Q=0;R=S;C=1;break;case 4:Q=Y;R=0;C=1;break;case 5:Q=1;R=0;C=S}Q*=p;R*=p;C*=p;return[m(Q),m(R),m(C)].join(",")}function w(){G=(G+1)%B;T+=.5;u=v+W*ab*(d-v);ac=d+W*(v*(aa-J)-d);I=J+W*(v*d-Z*J);N=u*U+K;M=ac*U+K;H=P(I-16);L=P(m(I*1e6/26));X=k[G];l=P(H)+n;E="rgb("+s(P((ac*4)+T))+")";X.style.cssText=["left:"+N+n,"top:"+M+n,"width:"+l,"height:"+P(H)+n,"z-index:"+L,o+"color:"+E,O+"moz-radial-gradient("+E+","+D+")",O+"webkit-gradient(radial"+r+"0"+r+"20,from("+E+"),to("+D+"))","position:absolute;-moz-"+t+t].join(";");v=u;d=ac;J=I;setTimeout(w,10)}w()
/**
*
* Lorenz Attractor
*
* JS1K Contest Submission
*
* by Martin Kleppe (kleppe@ubilabs.net)
* http://twitter.com/aemkei
*
* The Lorenz attractor is a fractal structure corresponding to the long-term
* behavior of the Lorenz oscillator. The Lorenz oscillator is a 3-dimensional
* dynamical system that exhibits chaotic flow, noted for its lemniscate shape.
* http://en.wikipedia.org/wiki/Lorenz_attractor
*
*/
function init(){
var
// shorthands
math = Math,
math_round = math.round,
math_abs = math.abs,
math_floor = math.floor,
px = "px",
doc = document,
h = .008,
a = 10,
b = 28,
c = 8/3,
max = 1000,
n_255 = 255,
factor = 8,
offset = 250,
index = 0,
divs = [],
x0 = 0,
y0 = 10,
z0 = y0,
count = 1,
// css shorthands
dark = "rgba(0,0,0,.7)",
_center = ",center center,",
_background = "background-",
_border_radius = "border-radius:100px;",
_image = "image:-",
_background_image = _background + _image,
// initial values
x = x0 * factor + offset,
y = y0 * factor + offset,
z,
// variables for later use
i, div, size,
red, green, blue, f, q, rgb,
x1,y1,z1,
color,
scale;
// create element placeholders
for (i=0; i<max; i++){
div = doc.createElement("div");
divs.push(div);
doc.body.appendChild(div);
}
// create RBG string based on hue value
function hsl(hue) {
hue %= 360;
hue /= 60;
i = math_floor(hue);
f = hue - math_floor(hue);
q = 1 - f;
switch (i){
case 0: red = 1; green = f; blue = 0; break;
case 1: red = q; green = 1; blue = 0; break;
case 2: red = 0; green = 1; blue = f; break;
case 3: red = 0; green = q; blue = 1; break;
case 4: red = f; green = 0; blue = 1; break;
case 5: red = 1; green = 0; blue = q;
}
red *= n_255;
green *= n_255;
blue *= n_255;
return [
math_round(red),
math_round(green),
math_round(blue)
].join(",");
}
function run() {
index = (index+1) % max;
div = divs[index];
count += .5;
// compute lorenz formula
x1 = x0 + h * a * (y0 - x0);
y1 = y0 + h * (x0 * (b - z0) - y0);
z1 = z0 + h * (x0 * y0 - c * z0);
// compute size, 3D position and color
x = x1 * factor + offset;
y = y1 * factor + offset;
scale = math_abs(z1 - 16);
z = math_abs(math_round(z1 * 1E6 / 26));
size = math_abs(scale) + px;
color = "rgb(" + hsl(math_abs((y1*4) + count)) + ")";
// set styles of element
div.style.cssText = [
"left:" + x + px,
"top:" + y + px,
"width:" + size,
"height:" + math_abs(scale) + px,
"z-index:" + z,
_background + "color:" + color,
_background_image + "moz-radial-gradient(" + color + "," + dark + ")",
_background_image + "webkit-gradient(radial" + _center + "0" + _center + "20, from(" + color + "),to(" + dark + "))",
"position:absolute;-moz-" + _border_radius + _border_radius
].join(";");
x0 = x1;
y0 = y1;
z0 = z1;
setTimeout(run, 10);
}
run();
};
