var canvas; var ctx1; var world = {width: 1000, height:1000, dept:1000}; alert("Phone needs to be in landscape. Tap the screen to activate vibration. Place each of your eyes in front of the 2 canvas'. Let your brain do the rest. Enjoy my first VR animation."); 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; //console.log( retinaX ); return retinaX; } ///// findRetinaY(worldy, worldz){ let angle = Math.atan((this.eyeY - worldy)/worldz); let retinaY = Math.tan(angle) * this.eyeLength + this.retinaHeight/2; //console.log(retinaY); return retinaY; } } class Shape{ constructor(){ } static draw(e, shape, ctx){ for(let line of shape.lines){ Line.draw(e,line,ctx); } } //// 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.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<22;a++){ cubes.push(new Cube([Math.random()*1000, Math.random()*1000, Math.random()*1000 +200],Math.random()*200+50)); } function anim(){ clearCanvas(); for(let cube of cubes){ Shape.rotateY(Math.PI/300, cube); Shape.rotateX(Math.PI/300, cube); Shape.rotateZ(Math.PI/300, cube); Shape.translateZ(3,cube) ; if(cube.center[2]>2500){ cubes.splice(cubes.indexOf(cube),1); cubes.push(new Cube([Math.random()*1000, Math.random()*1000, Math.random()*1000 +200],Math.random()*200+50)); if(vib){ navigator.vibrate(30); } } Shape.draw(e,cube,ctx1 ); Shape.draw(e2,cube,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); } var vib = false; function vibrateOn(){ vib = true; }

Cubes falling in rotation VR vibrate