Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
function project3D(x,y,z,vars){ var p,d; x-=vars.camX; y-=vars.camY; z-=vars.camZ; p=Math.atan2(x,z); d=Math.sqrt(x*x+z*z); x=Math.sin(p-vars.yaw)*d; z=Math.cos(p-vars.yaw)*d; p=Math.atan2(y,z); d=Math.sqrt(y*y+z*z); y=Math.sin(p-vars.pitch)*d; z=Math.cos(p-vars.pitch)*d; var rx1=-1000; var ry1=1; var rx2=1000; var ry2=1; var rx3=0; var ry3=0; var rx4=x; var ry4=z; var uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1); var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc; var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc; if(!z)z=0.000000001; if(ua>0&&ua<1&&ub>0&&ub<1){ return { x:vars.cx+(rx1+ua*(rx2-rx1))*vars.scale, y:vars.cy+y/z*vars.scale, d:Math.sqrt(x*x+y*y+z*z) }; }else{ return { d:-1 }; } } function reverseRasterize(depth, vars){ var vert=new Vert(),d,p; vert.x=vars.camX+(-vars.cx+vars.mx)/vars.scale*depth; vert.y=vars.camY+(-vars.cy+vars.my)/vars.scale*depth; vert.z=vars.camZ+depth; d=Math.sqrt((vert.y-vars.camY)*(vert.y-vars.camY)+(vert.z-vars.camZ)*(vert.z-vars.camZ)); p=Math.atan2(vert.y-vars.camY,vert.z-vars.camZ); vert.y=vars.camY+Math.sin(p+vars.pitch)*d; vert.z=vars.camZ+Math.cos(p+vars.pitch)*d; d=Math.sqrt((vert.x-vars.camX)*(vert.x-vars.camX)+(vert.z-vars.camZ)*(vert.z-vars.camZ)); p=Math.atan2(vert.x-vars.camX,vert.z-vars.camZ); vert.x=vars.camX+Math.sin(p+vars.yaw)*d; vert.z=vars.camZ+Math.cos(p+vars.yaw)*d; d=Math.sqrt((vert.x-vars.camX)*(vert.x-vars.camX)+ (vert.y-vars.camY)*(vert.y-vars.camY)+ (vert.z-vars.camZ)*(vert.z-vars.camZ)); var x = vert.x-vars.camX; var y = vert.y-vars.camY; var z = vert.z-vars.camZ; var t=d/depth; vert.x=vars.camX+x/t; vert.y=vars.camY+y/t; vert.z=vars.camZ+z/t; return vert; } function Vert(x,y,z){ this.x = x; this.y = y; this.z = z; } function elevation(x,y,z){ var dist = Math.sqrt(x*x+y*y+z*z); if(dist && z/dist>=-1 && z/dist <=1) return Math.acos(z / dist); return 0.00000001; } function rgb(col){ col += 0.000001; var r = parseInt((0.5+Math.sin(col)*0.5)*256); var g = parseInt((0.5+Math.cos(col)*0.5)*256); var b = parseInt((0.5-Math.sin(col)*0.5)*256); return "#"+("0" + r.toString(16) ).slice (-2)+("0" + g.toString(16) ).slice (-2)+("0" + b.toString(16) ).slice (-2); } function interpolateColors(RGB1,RGB2,degree){ var w2=degree; var w1=1-w2; return [w1*RGB1[0]+w2*RGB2[0],w1*RGB1[1]+w2*RGB2[1],w1*RGB1[2]+w2*RGB2[2]]; } function rgbArray(col){ col += 0.000001; var r = parseInt((0.5+Math.sin(col)*0.5)*256); var g = parseInt((0.5+Math.cos(col)*0.5)*256); var b = parseInt((0.5-Math.sin(col)*0.5)*256); return [r, g, b]; } function colorString(arr){ var r = parseInt(arr[0]); var g = parseInt(arr[1]); var b = parseInt(arr[2]); return "#"+("0" + r.toString(16) ).slice (-2)+("0" + g.toString(16) ).slice (-2)+("0" + b.toString(16) ).slice (-2); } function segVert(x,y,z){ this.x=x; this.y=y; this.z=z; } function Seg(x1,y1,z1,x2,y2,z2,color,alpha,weight){ this.a=new segVert(x1,y1,z1); this.b=new segVert(x2,y2,z2); this.color=color; this.alpha=alpha; this.weight=weight; } function intersects(x1,y2,x2,y2){ var ua,ub,uc,x,y; uc=(y4-y3)*(x2-x1)-(x4-x3)*(y2-y1); ua=((x4-x3)*(y1-y3)-(y4-y3)*(x1-x3))/uc; ub=((x2-x1)*(y1-y3)-(y2-y1)*(x1-x3))/uc; x=x1+ua*(x2-x1); y=y1+ua*(y2-y1); return {intersects:(ua>=0&&ua<=1&&ub>=0&&ub<=1),x:x,y:y}; } function plot(point1,point2,point3,steps,vars){ for(j=0;j
0 && u<1){ x=x1+u*(x2-x1); y=y1+u*(y2-y1); z=z1+u*(z2-z1); d=Math.sqrt((x3-x)*(x3-x)+(y3-y)*(y3-y)+(z3-z)*(z3-z)); if(d<=vars.points[i].radius && u
vars.bounding-vars.points[i].radius || vars.points[i].x+vars.points[i].vx<-vars.bounding+vars.points[i].radius) vars.points[i].vx*=-1; if(vars.points[i].y+vars.points[i].vy>vars.bounding-vars.points[i].radius || vars.points[i].y+vars.points[i].vy<-vars.bounding+vars.points[i].radius) vars.points[i].vy*=-1; if(vars.points[i].z+vars.points[i].vz>vars.bounding-vars.points[i].radius || vars.points[i].z+vars.points[i].vz<-vars.bounding+vars.points[i].radius) vars.points[i].vz*=-1; vars.points[i].x+=vars.points[i].vx; vars.points[i].y+=vars.points[i].vy; vars.points[i].z+=vars.points[i].vz; } if(vars.points[i].x>vars.bounding-vars.points[i].radius)vars.points[i].x=vars.bounding-vars.points[i].radius; if(vars.points[i].x<-vars.bounding+vars.points[i].radius)vars.points[i].x=-vars.bounding+vars.points[i].radius; if(vars.points[i].y>vars.bounding-vars.points[i].radius)vars.points[i].y=vars.bounding-vars.points[i].radius; if(vars.points[i].y<-vars.bounding+vars.points[i].radius)vars.points[i].y=-vars.bounding+vars.points[i].radius; if(vars.points[i].z>vars.bounding-vars.points[i].radius)vars.points[i].z=vars.bounding-vars.points[i].radius; if(vars.points[i].z<-vars.bounding+vars.points[i].radius)vars.points[i].z=-vars.bounding+vars.points[i].radius; vars.points[i].vx+=(vars.points[i].ox-vars.points[i].x)/40; vars.points[i].vy+=(vars.points[i].oy-vars.points[i].y)/40; vars.points[i].vz+=(vars.points[i].oz-vars.points[i].z)/40; vars.points[i].vx/=1.01; vars.points[i].vy/=1.01; vars.points[i].vz/=1.01; } for(var i=0;i
0) { vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(d/26-vars.frameNo/40),[0,128,32],.5+Math.sin(d/6-vars.frameNo/8)/2)); vars.ctx.globalAlpha = a; vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size); } } } } vars.ctx.fillStyle = "#82f"; for (var i = -25; i <= 25; i += 1) { for (var j = -25; j <= 25; j += 1) { x = i*2; z = j*2; y = -vars.floor; d = Math.sqrt(x * x + z * z); point = project3D(x, y+d*d/85, z, vars); if (point.d != -1) { size = 25000 / (1 + point.d*point.d); a = 0.5 - Math.pow(d / 50, 4) * 0.5; if (a > 0) { vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(-d/26-vars.frameNo/40),[32,0,128],.5+Math.sin(-d/6-vars.frameNo/8)/2)); vars.ctx.globalAlpha = a; vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size); } } } } } function draw(vars){ vars.ctx.clearRect(0, 0, canvas.width, canvas.height); drawFloor(vars); vars.ctx.globalAlpha=.8; var x,y,size,point; vars.points2=JSON.parse(JSON.stringify(vars.points)); for(var i=0;i
CSS
html,body{ margin:0px; width:100%; height:100%; overflow:hidden; background:#111855; } #canvas{ position:absolute; width:100%; height:100%; }
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email