d=document.createElement("canvas");d.width=d.height=5E3;e=d.getContext("2d");sqrt2=1.41421;x=y=2500;rot=xmx=ymx=0;xmn=ymn=Infinity;function f(g,h,l,b,k){0==h?(e.strokeStyle=k,e.beginPath(),e.moveTo(x,y),xmx=Math.max(xmx,x+=Math.cos(b)*g),xmn=Math.min(xmn,x),ymx=Math.max(ymx,y-=Math.sin(b)*g),ymn=Math.min(ymn,y),e.lineTo(x,y),e.stroke()):(b+=l*Math.PI/4,f(g/sqrt2,h-1,1,b,k),b-=l*Math.PI/2,f(g/sqrt2,h-1,-1,b,k))} function m(){x=y=2500;f(1E3,17,1,0,"red");x=y=2500;f(1E3,17,1,Math.PI/2,"blue");x=y=2500;f(1E3,17,1,Math.PI,"green");x=y=2500;f(1E3,17,1,3*Math.PI/2,"magenta");requestAnimationFrame(n)}function n(){c.fillRect(0,0,1E5,1E5);c.save();c.translate(a.width/2,a.height/2);c.scale(0.6,0.6);c.rotate(rot+=0.03);c.drawImage(d,xmn,ymn,xmx-xmn,ymx-ymn,-a.width/2,-a.height/2,a.width,a.height);c.restore();requestAnimationFrame(n)} requestAnimationFrame(function(){c.fillRect(0,0,a.width,a.height);c.fillStyle="white";c.fillText("Please wait.",a.width/2,a.height/2);c.fillStyle="black";requestAnimationFrame(m)});
d = document.createElement("canvas");
d.width = d.height = 5000;
e = d.getContext("2d");
sqrt2 = 1.41421;
x = y = 2500;
rot = xmx = ymx = 0;
xmn = ymn = Infinity;
function fractal(size, split, d, angle, col){
if(split == 0){
e.strokeStyle = col;
e.beginPath();
e.moveTo(x, y);
xmx = Math.max(xmx, x += Math.cos(angle)*size);
xmn = Math.min(xmn, x);
ymx = Math.max(ymx, y -= Math.sin(angle)*size);
ymn = Math.min(ymn, y);
e.lineTo(x, y);
e.stroke();
}else{
angle += d*Math.PI/4;
fractal(size/sqrt2, split-1, 1, angle, col);
angle -= d*Math.PI/2;
fractal(size/sqrt2, split-1, -1, angle, col);
angle += d*Math.PI/4;
}
}
function intro(){
c.fillRect(0, 0, a.width, a.height);
c.fillStyle = "white";
c.fillText("Please wait.", a.width / 2, a.height / 2);
c.fillStyle = "black";
requestAnimationFrame(generate);
}
function generate(){
x = y = 2500;
fractal(1000, 17, 1, 0, "red");
x = y = 2500;
fractal(1000, 17, 1, Math.PI/2, "blue");
x = y = 2500;
fractal(1000, 17, 1, Math.PI, "green");
x = y = 2500;
fractal(1000, 17, 1, Math.PI * 3/2, "magenta");
requestAnimationFrame(draw);
}
function draw(){
c.fillRect(0, 0, 10000, 10000);
c.save()
c.translate(a.width / 2, a.height / 2);
c.scale(0.6, 0.6);
c.rotate(rot += 0.03);
c.drawImage(d, xmn, ymn, xmx - xmn, ymx - ymn, -a.width / 2, -a.height / 2, a.width, a.height);
c.restore()
requestAnimationFrame(draw);
}
requestAnimationFrame(intro);
