FORK ME

console 命令行工具 X clear

                    
>
console
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
canvas.width=canvas.height=400;
main();

function main(){
    var a,b,c,tim,p,size,xp,yp,rp,x,y;
    ctx.fillStyle="rgb(0,0,0)";
    ctx.fillRect(0,0,canvas.width,canvas.height);
    ctx.strokeStyle="rgb(255,55,11)";
    ctx.lineWidth=2;
    tim=new Date().getTime()/200;
    
    size=11;
    p=[];
    xp=Math.sin(tim/13)*10;
    yp=Math.sin(tim/17)*10;
    rp=Math.sin(tim/19)*40;
    for(a=0;a<size;a++){
        p[a]=[];
        for(b=0;b<size;b++){
            x=(b-size/2)/size;
            y=(a-size/2)/size;
            c=Math.pow(x*x+y*y,0.5)*rp;
            r=y*yp+x*xp+tim+c;
            x=x*350+Math.cos(r)*20+canvas.width/2;
            y=y*350+Math.sin(r)*20+canvas.height/2;
            p[a][b]=[x,y];
        }
    }
    
    for(a=0;a<size-1;a++){
        for(b=0;b<size-1;b++){
            sic([p[a][b],p[a][b+1],p[a+1][b+1],p[a+1][b]],a+b);
        }
    }
    requestAnimationFrame(main);
}

function sic(ret,nam){
    var a,b,c,d,e,x,y,tx,ty,p,t,max,hai,x1,y1,x2,y2,r1,r2;
    
    hai=[];
    for(a=0;a<ret.length;a++)hai[a]=ret[(a+nam)%ret.length];
    
    p=[];
    tx=ty=0;
    for(a=0;a<hai.length;a++){
        p[a]=hai[a];
        tx+=p[a][0];
        ty+=p[a][1];
    }
    tx=tx/hai.length;
    ty=ty/hai.length;
    
    for(a=0;a<hai.length+1;a++){
        b=(a+1)/(hai.length+1);
        c=1-b;
        x=p[a%hai.length][0]*c+tx*b;
        y=p[a%hai.length][1]*c+ty*b;
        p.push([x,y]);
    }
    
    t=[];
    for(a=0;a<p.length;a++){
        b=p[a];
        c=p[(a+1)%p.length];
        t.push([(b[0]+c[0])/2,(b[1]+c[1])/2]);
    }
    
    max=10;
    ctx.beginPath();
    for(a=0;a<p.length-2;a++){
        b=t[a];
        c=p[a+1];
        d=t[(a+1)%p.length];
        
        for(e=0;e<max;e++){
            r1=e/max;
            r2=1-r1;
            x1=b[0]*r2+c[0]*r1;
            y1=b[1]*r2+c[1]*r1;
            x2=c[0]*r2+d[0]*r1;
            y2=c[1]*r2+d[1]*r1;
            x=x1*r2+x2*r1;
            y=y1*r2+y2*r1;
            ctx.lineTo(x,y);
        }
    }
    ctx.stroke();
}
<canvas></canvas>
* {
  margin: 0;
  padding: 0;
  border: 0;
  background: #000 
}

canvas {
position: relative; top:50%;
left:50%;
margin-left:-50vmin;
width:100vmin;
height:100vmin;
overflow:hidden;
display: block;
}