var c; var ctx; var t=0; var w; var h; var znear=0; var zfar=-10000; function init() { c=document.querySelector("canvas"); ctx=c.getContext("2d"); c.width=window.innerWidth; c.height=window.innerHeight; w=c.width; h=c.height; initParticles(); } function vertex2(x,y) { this.x=x; this.y=y; } function vertex3(x,y,z) { this.x=x; this.y=y; this.z=z; this.setXYZ= function(x,y,z) { this.x=x; this.y=y; this.z=z; } } function particle(x,y,z,vx,vy,vz,size) { this.x=x; this.y=y; this.z=z; this.vx=vx; this.vy=vy; this.vz=vz; this.size=size; this.lifetime=0; this.maxlife=minmaxRandom(50,100); this.alive=true; this.setPos=function(x,y,z) { this.x=x; this.y=y; this.z=z; } this.setVel=function(vx,vy,vz) { this.vx=vx; this.vy=vy; this.vz=vz; } this.move = function () { this.x+=this.vx; this.y+=this.vy; this.z+=this.vz; } this.accelerate = function(dx,dy,dz) { this.vx+=dx; this.vy+=dy; this.vz+=dz; } } var numparts=1250; var numverts=4*numparts; var prt=[]; var v=[]; function copyVertices() { for(i=0;i= znear) return true; } return false; } function update() { for(i=0;iprt[i].maxlife) { delete prt[i]; var vx=minmaxRandom(-0.1,0.1); var vy=minmaxRandom(-0.1,0.1); var vz=minmaxRandom(-0.1,0.1); prt[i]=new particle(0,0,-10,vx,vy,vz,0.1); } prt[i].move(); // add gravity prt[i].accelerate(0,-0.001,0); prt[i].lifetime++; } copyVertices(); draw(); t+=0.05; } function draw() { ctx.clearRect(0,0,c.width,c.height); // project 3d vertices to screen var vp=[]; // clip particles that lie outside viewing frustum if(!clip(v)) { vp=project(v,numverts,1); // fit to screen var vs=[]; vs=scale(vp,numverts, c.width,c.height); drawParticles(vs); } } function drawParticles(p) { ctx.fillStyle="rgba(0,0,255,0.09)"; for(j=0;j

3D Water Particles