Water world

index.html

<canvas></canvas>
<div></div>

script.js

var canvas,ctx,tim,bai;
canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
canvas.width=canvas.height=400;
aaa();

function aaa(){
    var a,b,c,s,p,r,x,y,z,x1,y1,max,p2,han,h,pt,hei;
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle="rgb(0,0,0)";
    ctx.fillRect(0,0,canvas.width,canvas.height);
    ctx.globalCompositeOperation = "lighter";
    tim=new Date().getTime()/10;
    ctx.strokeStyle=ctx.fillStyle="hsla(24,60%,60%,0.3)";
    
    bai=0.6+Math.sin(tim/471)*0.2;
    hei=0.9+Math.sin(tim/100)*0.3;
    
    pt=[];
    for(c=0;c<180;c++){
        s=(c+1)/180;
        han=Math.cos(s*Math.PI/2);
        h=Math.sin(s*Math.PI/2);
        s=1-s;
        p=[];
        max=(100*han)|0;
        r=0;
        for(a=0;a<max;a++){
            x=Math.cos(r)*han;
            y=Math.sin(r)*han;
            z=nami(r,s);
            x-=z*s;
            p.push([x,y,hei+z*s+h]);
            r+=Math.PI*2/max;
        }
        pt.push(p);
    }
    
    for(c=0;c<100;c++){
        s=(c+1)/100;
        p=[];
        max=100*s;
        r=0;
        for(a=0;a<max;a++){
            x=Math.cos(r)*s;
            y=Math.sin(r)*s;
            z=nami(r,s);
            x-=z*s;
            p.push([x,y,hei+z*s]);
            r+=Math.PI*2/max;
        }
        pt.push(p);
    }
    
    for(c=0;c<pt.length;c++){
        p=pt[c];
        p2=[];
        for(a=0;a<p.length;a++){
            x=p[a][0];
            y=p[a][1];
            z=p[a][2];
            b=Math.pow(1.5,y/2);
            x1=x*b*150+200;
            y1=z*b*200-hei*200+150;
            p2.push([x1,y1]);
        }
        
        ctx.beginPath();
        for(a=0;a<p2.length;a++)ctx.lineTo(p2[a][0],p2[a][1]);
        ctx.closePath();
        ctx.stroke();
    }
    
    requestAnimationFrame(aaa);
}

function nami(r,s){
    var a=Math.sin(r*2-tim/13+s*13)/20+
        Math.sin(r*5-tim/17+s*13)/20+
            Math.sin(r*7-tim/19+s*13)/40;
    return a*bai;
}

style.css

* {
  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;
}

water-world.markdown

Water world

A Pen by Fox Peterson on CodePen.

License.