j=document;k=this;m=Math;o=j.getElementById("c");o.style.background="#000";d=o.getContext("2d");b=j.createElement("canvas");f=b.getContext("2d");w=o.width=b.width=k.innerWidth-17;h=o.height=b.height=k.innerHeight-20;x=0;function C(e,c){return"hsla("+(m.sin(e)+1)*120+",100%,50%,"+c+")"}setInterval(function(){r=m.sin(x++*0.01);d.clearRect(0,0,w,h);d.save();p=w/2;y=h/2;d.translate(p,y);d.rotate(r);s=0.9;d.drawImage(b,-s*w/2,-s*h/2,s*w,s*h);d.restore();Q=m.cos(x*0.002);W=p+m.sin(x*-0.007)*(p-240);F=y+m.cos(x*0.008)*(y-240);H=p+m.sin(x*-0.004)*(p-200);J=y+m.cos(x*-0.006)*(y-200);d.fillStyle=C(x*0.01,0.2);d.fillRect(p+m.sin(x*0.004)*(p-300),y+Q*(y-300),Q*200,200);d.strokeStyle=C(x*-0.02-45,1);d.beginPath();d.arc(W,F,110,m.sin(x*0.03),6.3,true);d.stroke();d.fillStyle=C(x*0.03+20,0.2);d.beginPath();d.arc(H,J,99,m.abs(m.sin(x*0.02)*5),6.3,true);d.fill();d.strokeStyle="#FFF";d.beginPath();d.moveTo(W,F);d.lineTo(H,J);d.stroke();f.globalAlpha=0.95;f.clearRect(0,0,w,h);f.drawImage(o,0,0)},33);
j = document; // compression technique
k = this; // compression technique, 'this' is 'window'
m = Math; // compression technique
o = j.getElementById('c'); // output canvas
o.style.background = "#000";
d = o.getContext('2d'); // output canvas context
b = j.createElement('canvas');; // hidden buffer canvas
f = b.getContext('2d'); // hidden buffer canvas context
w = o.width = b.width = k.innerWidth - 17; // set the width of the canvas to the window width, ie full screen
h = o.height = b.height = k.innerHeight - 20; // set the height of the canvas to the window height, ie full screen
x = 0; // start out scene time counter at 0
function C(s,a){
return "hsla("+(m.sin(s)+1)*120+",100%,50%,"+a+")";
}
setInterval(function(){ // draw function
r = m.sin(x++*1e-2); // incremement scene time counter while setting our rotation amount.
d.clearRect(0,0,w,h); // clear the output canvas
d.save(); // context save, prepping to apply transformations to the drawing of the buffer back in to the output canvas.
p = w/2; // half the width of the canvas
y = h/2; // half the height of the canvas
d.translate(p,y); // translate to center of the canvas
d.rotate(r); // rotate around by r degrees
s = 0.9; // scale factor
d.drawImage(b, -s*w/2, -s*h/2, s*w, s*h); // draw the buffer canvas, taking in to consideration the translation to the center of the canvas, as well as scaling down the image.
d.restore(); // restore context
Q = m.cos(x*2e-3); // compression technique
W = p+m.sin(x*-7e-3)*(p - 240); // compression technique
F = y+m.cos(x*8e-3)*(y - 240); // compression technique
H = p+m.sin(x*-4e-3)*(p - 200); // compression technique
J = y+m.cos(x*-6e-3)*(y - 200); // compression technique
// SQUARE
d.fillStyle = C(x*0.01,0.2);
d.fillRect(p+m.sin(x*4e-3)*(p - 300),y+Q*(y - 300), Q*200, 200);
// LINE CIRCLE
d.strokeStyle = C(x*-0.02-45,1);
d.beginPath();
d.arc(W,F,110,m.sin(x*0.03),6.3,true);
d.stroke();
// FILL CIRCLE
d.fillStyle = C(x*0.03+20,0.2);
d.beginPath();
d.arc(H,J,99,m.abs(m.sin(x*0.02)*5),6.3,true);
d.fill();
// LINE
d.strokeStyle = "#FFF";
d.beginPath();
d.moveTo(W,F);
d.lineTo(H, J);
d.stroke();
f.globalAlpha = 0.95; // global alpha transparency for buffer canvase
f.clearRect(0,0,w,h); // clear buffer canvas
f.drawImage(o, 0, 0); // copy to buffer canvas
},33);
