// Created by Paul Caron // https://www.sololearn.com/Profile/8518623 var canvas; var ctx1; var canvas2 ; var ctx2; var world = {width: 1000, height:1000, dept:1000}; var target = {x:500,y:500,z:300}; class Eye{ constructor(width=canvas.width, height=canvas.height, eyeX=world.width/2, eyeY=world.height/2, eyeZ=0, viewAngle=Math.PI/3){ this.retinaWidth = width; this.retinaHeight = height; this.eyeY = eyeY; this.eyeX = eyeX; this.eyeZ = eyeZ; this.viewAngle = viewAngle; this.eyeLength = (this.retinaWidth/2)/(Math.tan(this.viewAngle/2));//eyeLength is the distance between the pupil(pinhole) and the retina(canvas or photographic plate) } ///// getInfo(){ console.log([this.retinaWidth, this.retinaHeight, this.eyeX, this.eyeY, this.eyeZ, this.viewAngle, this.eyeLength]); } ///// findRetinaX(worldx, worldz){ let angle = Math.atan((this.eyeX - worldx)/worldz); let retinaX = -(Math.tan(angle) * this.eyeLength) + this.retinaWidth/2; return retinaX; } ///// findRetinaY(worldy, worldz){ let angle = Math.atan((this.eyeY - worldy)/worldz); let retinaY = Math.tan(angle) * this.eyeLength + this.retinaHeight/2; return retinaY; } } class Shape{ constructor(){ } static draw(e, shape, ctx){ for(let line of shape.lines){ Line.draw(e,line,ctx); } } /// static setxSpeed(xSpeed, shape){ shape.xSpeed = xSpeed; } //// static setySpeed(ySpeed, shape){ shape.ySpeed = ySpeed; } //// static setzSpeed(zSpeed, shape){ shape.zSpeed = zSpeed; } //// static findSphericalCoords(x,y,z){ //find length/radius of the vector let radius = Math.sqrt(x*x + y*y + z*z); //find theta angle between x and y let theta = Math.atan(Math.abs(y)/Math.abs(x)); if(x<0){ if(y<0){ theta += Math.PI; }else{ theta = Math.PI - theta; } }else{ if(y<0){ theta *= -1; }else{ } } //find phi angle between z and the vector let phi = Math.acos(z/radius); //return coords return [radius,theta,phi]; } //// static findCartesianCoords(r,theta,phi){ let x = r*Math.cos(theta)*Math.sin(phi); let y = r*Math.sin(theta)*Math.sin(phi); let z = r*Math.cos(phi); return [x,y,z]; } /// static findVectorToTarget(shape){ let x = target.x - shape.center[0]; let y = target.y - shape.center[1]; let z = target.z - shape.center[2]; return [x,y,z]; } /// static update(shape){//updates speeds and position ////update positions Shape.translateX(shape.xSpeed, shape); Shape.translateY(shape.ySpeed, shape); Shape.translateZ(shape.zSpeed, shape); ////find distance to target let v = Shape.findVectorToTarget(shape); ///find spherical coords let scoords = Shape.findSphericalCoords(v[0],v[1],v[2]); ////find cartesian coords of the acceleration let acoords = Shape.findCartesianCoords(0.7,scoords[1],scoords[2]); ////update speeds shape.xSpeed += acoords[0]; shape.ySpeed += acoords[1]; shape.zSpeed += acoords[2]; } //// static stretchX(){ } //// static stretchY(){ } //// static stretchZ(){ } //// static translateX(x, shape){ for(let v of shape.vertices){ v.x += x; } shape.center[0]+=x; } //// static translateY(y, shape){ for(let v of shape.vertices){ v.y += y; } shape.center[1]+=y; } //// static translateZ(z, shape){ for(let v of shape.vertices){ v.z += z; } shape.center[2]+=z; } ///// static rotateX(angle, shape){ let cz = shape.center[2]; let cy = shape.center[1]; for(let v of shape.vertices){ //dist from v to center let distz = cz-v.z; let disty = cy-v.y; let dist = Math.sqrt(distz*distz + disty*disty); //find current angle of v let currentAngle = Math.PI+Math.atan(Math.abs(distz)/Math.abs(disty)); if(disty<0){ if(distz<0){ currentAngle += Math.PI; }else{ currentAngle = (Math.PI)-currentAngle; } }else{ if(distz<0){ currentAngle = 2*Math.PI-currentAngle; }else{ //angle=angle; } } //add currentAngle + rot angle let newangle = currentAngle + angle; //assign new x and z to vertex v.z = Math.sin(newangle)*dist + cz; v.y = Math.cos(newangle)*dist + cy; // console.log([v.x,v.z]); } } ///// static rotateY(angle, shape){ //v = shape.vertices[0]; let cx = shape.center[0]; let cz = shape.center[2]; for(let v of shape.vertices){ //dist from v to center let distx = cx-v.x; let distz = cz-v.z; let dist = Math.sqrt(distx*distx + distz*distz); //find current angle of v let currentAngle = Math.PI+Math.atan(Math.abs(distz)/Math.abs(distx)); if(distx<0){ if(distz<0){ currentAngle += Math.PI; }else{ currentAngle = (Math.PI)-currentAngle; } }else{ if(distz<0){ currentAngle = 2*Math.PI-currentAngle; }else{ //angle=angle; } } //add currentAngle + rot angle let newangle = currentAngle + angle; //assign new x and z to vertex v.x = Math.cos(newangle)*dist + cx; v.z = Math.sin(newangle)*dist + cz; } } ///// static rotateZ(angle, shape){ let cx = shape.center[0]; let cy = shape.center[1]; for(let v of shape.vertices){ //dist from v to center let distx = cx-v.x; let disty = cy-v.y; let dist = Math.sqrt(distx*distx + disty*disty); //find current angle of v let currentAngle = Math.PI+Math.atan(Math.abs(disty)/Math.abs(distx)); if(distx<0){ if(disty<0){ currentAngle += Math.PI; }else{ currentAngle = (Math.PI)-currentAngle; } }else{ if(disty<0){ currentAngle = 2*Math.PI-currentAngle; }else{ //angle=angle; } } //add currentAngle + rot angle let newangle = currentAngle + angle; //assign new x and z to vertex v.x = Math.cos(newangle)*dist + cx; v.y = Math.sin(newangle)*dist + cy; // } } } class Cube{ constructor(center, width){//center point x y z then width //// this.center = center; this.v1 = new Vertex(center[0]-width/2, center[1]-width/2, center[2]-width/2); this.v2 = new Vertex(center[0]+width/2, center[1]-width/2, center[2]-width/2); this.v3 = new Vertex(center[0]-width/2, center[1]+width/2, center[2]-width/2); this.v4 = new Vertex(center[0]+width/2, center[1]+width/2, center[2]-width/2); this.v5 = new Vertex(center[0]-width/2, center[1]-width/2, center[2]+width/2); this.v6 = new Vertex(center[0]+width/2, center[1]-width/2, center[2]+width/2); this.v7 = new Vertex(center[0]-width/2, center[1]+width/2, center[2]+width/2); this.v8 = new Vertex(center[0]+width/2, center[1]+width/2, center[2]+width/2); this.vertices = [this.v1,this.v2,this.v3,this.v4,this.v5,this.v6,this.v7,this.v8] ; //// this.lines = []; this.lines.push(new Line(this.v1,this.v2)); this.lines.push(new Line(this.v2,this.v4)); this.lines.push(new Line(this.v3,this.v4)); this.lines.push(new Line(this.v3,this.v1)); this.lines.push(new Line(this.v5,this.v6)); this.lines.push(new Line(this.v6,this.v8)); this.lines.push(new Line(this.v7,this.v8)); this.lines.push(new Line(this.v7,this.v5)); this.lines.push(new Line(this.v1,this.v5)); this.lines.push(new Line(this.v2,this.v6)); this.lines.push(new Line(this.v3,this.v7)); this.lines.push(new Line(this.v4,this.v8)); } } class Surface{ constructor(verts){//verts arrange in order } } class Line{ constructor(a, b){ this.a = a; this.b = b; } static draw(e, line,ctx){ ctx.beginPath(); ctx.moveTo(e.findRetinaX(line.a.x, line.a.z), e.findRetinaY(line.a.y, line.a.z)); ctx.lineTo(e.findRetinaX(line.b.x, line.b.z), e.findRetinaY(line.b.y, line.b.z)); ctx.closePath(); //ctx.lineWidth=0.35; ctx.stroke(); } } class Vertex{ constructor(x, y, z){ this.x = x; this.y = y; this.z = z; } } function init(){ canvas = document.getElementById("canvas"); ctx1 = canvas.getContext("2d"); canvas2 = document.getElementById("canvas2"); ctx2 = canvas2.getContext("2d"); let e = new Eye(250,250,475,500,0,Math.PI/2); let e2 = new Eye(250,250,525,500,0,Math.PI/2); let cubes = []; for(let a=0;a<15;a++){ cubes.push( new Cube([Math.random()*300+350,Math.random()*350+300,450],30)) ; cubes[cubes.length-1].xSpeed = Math.random()*15 -7.5; cubes[cubes.length-1].ySpeed = Math.random()*15-7.5; cubes[cubes.length-1].zSpeed =Math.random()*15-7.5 ; Shape.rotateX(Math.PI*Math.random(), cubes[cubes.length-1]); Shape.rotateY(Math.PI*Math.random(), cubes[cubes.length-1]); Shape.rotateZ(Math.PI*Math.random(), cubes[cubes.length-1]); } let scene = new Cube([500,500,500],999); var count=0; function anim(){ // if(count%20===0){ clearCanvas(); // } count++; for(let cube of cubes){ Shape.draw(e,cube,ctx1); Shape.draw(e2,cube,ctx2); Shape.rotateX(Math.PI/300, cube); Shape.rotateY(Math.PI/300, cube); Shape.rotateZ(Math.PI/300, cube); Shape.update(cube);}Shape.draw(e,scene,ctx1); Shape.draw(e2,scene,ctx2); window.requestAnimationFrame(anim); } window.requestAnimationFrame(anim); } function clearCanvas(){ ctx1.clearRect(0,0,canvas.width,canvas.height);ctx2.clearRect(0,0,canvas.width,canvas.height); }

📺 VR 3D Gravity by Paul Caron