<canvas onclick="init();"></canvas>
* {
margin: 0;
padding: 0;
border: 0;
background: #000000
}
canvas{
position: relative; top:50%;
left:50%;
margin-left:-50vmin;
width:100vmin;
height:100vmin;
overflow:hidden;
display: block;
}
var canvas,ctx,kk,ch,pt,p2,tp,nm,kan,tx,ty,tim,tm,gbai,pr;
(function(){
var a,b,r;
canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
canvas.width=canvas.height=400;
ctx.lineWidth=2;
a=Object.getOwnPropertyNames(Math);
for(b=0;b<a.length;b++){
window[a[b]]=Math[a[b]];
}
kk=[];
r=0;
for(a=0;a<8;a++){
kk.push([cos(r),sin(r)]);
r+=PI*2/8;
}
l2=log(2);
pr=pow(2,0.5);
pt=[];
ch=[];
sik(0,0,240,0,0);
tp=0;
kan=1;
nm=0;
dsk();
})();
function init(){
tp=(tp+1)%3;
if(!tp){
kan=1;
nm=0;
}else if(tp==1){
kan=2;
nm=0;
}else if(tp==2){
kan=1;
nm=1;
}
}
function sik(tx,ty,s,omo,ban){
var a,b,c,r,p,o,x,y;
a=(floor(tx*100))+"a"+(floor(ty*100))+"a"+ban;
if(ch[a])return;
ch[a]=1;
if(ban>5 && abs(tx)>250 || abs(ty)>250)return;
if(!pt[ban])pt[ban]=[];
r=0;
if(omo)r=PI/4;
p=[];
for(a=+omo;a<8;a+=2){
x=kk[a][0]*s;
y=kk[a][1]*s;
p.push([tx+x,ty+y]);
}
o={};
o.x=tx;
o.y=ty;
o.s=s;
o.omo=+omo;
o.ban=ban;
a=atan2(ty,tx);
o.r=a/PI/2+0.5;
a=pow(ty*ty+tx*tx,0.5);
a=log(a)/log(2);
if(a<3)a=3;
o.han=floor(a+o.r);
pt[ban].push(o);
if(ban<12){
ban++;
s/=pr;
for(a=0;a<4;a++){
sik(p[a][0],p[a][1],s,!omo,ban);
}
}
}
function his(o,bai){
var a,b,c,r,x,y;
r=0;
if(o.omo)r=PI/4;
if(abs(o.x*gbai)>250 || abs(o.y*gbai)>250)return;
a=(o.ban+bai+(tm)*4)/6*360;
ctx.strokeStyle="hsl("+(a%360)+",80%,60%)";
ctx.beginPath();
for(a=o.omo;a<8;a+=2){
x=kk[a][0]*o.s*bai*gbai;
y=kk[a][1]*o.s*bai*gbai;
ctx.lineTo(tx+o.x*gbai+x,ty+o.y*gbai+y);
}
ctx.closePath();
ctx.fill();
ctx.stroke();
}
function dsk(){
var a,b,c,d,e,p,o;
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle="#000";
ctx.fillRect(0,0,canvas.width,canvas.height);
tim=new Date().getTime()/30;
tx=canvas.width/2;
ty=canvas.height/2;
gbai=1;
tm=((tim/100)%1);
gbai=pow(2,tm);
for(b=2;b<12;b++){
p=pt[b];
for(a=0;a<p.length;a++){
o=p[a];
c=o.r;
d=o.han;
e=(d-c+tm*3)+1;
if(nm)e+=sin(c*PI*6+tim/40);
c=(e)%1;
e=floor(e);
if(e>=o.ban+kan)his(o,1);
if(e==o.ban)his(o,c);
}
}
requestAnimationFrame(dsk);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.