var canvas; var ctx1; var canvas2 ; var ctx2; var world = {width: 1000, height:1000, dept:1000}; var target = {x:500,y:500,z:300}; var trail =[]; var colors =[ "brown", "blue", "green", "black" ]; 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,shape.color); } } //// static drawSurfaces(e, shape, ctx){ for(let surface of shape.surfaces){ Surface.draw(e,surface,ctx,shape.color); } } /// static clone(shape){ let copy = new Shape(); copy.vertices = []; copy.lines = [] for(let vertex of shape.vertices){ copy.vertices.push(new Vertex(vertex.x,vertex.y,vertex.z)); } for(let line of shape.lines){ copy.lines.push(new Line(new Vertex(line.a.x,line.a.y,line.a.z),new Vertex(line.b.x,line.b.y,line.b.z))); } copy.color = shape.color; return copy; } //// 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(ratio, shape){ let centerX = shape.center[0]; for(let vertex of shape.vertices){ let dist = centerX - vertex.x; vertex.x = centerX - dist*ratio; } } //// static stretchY(ratio, shape){ let centerY = shape.center[1]; for(let vertex of shape.vertices){ let dist = centerY - vertex.y; vertex.y = centerY - dist*ratio; } } //// static stretchZ(ratio, shape){ let centerZ = shape.center[2]; for(let vertex of shape.vertices){ let dist = centerZ - vertex.z; vertex.z = centerZ - dist*ratio; } } //// 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)); /// this.surfaces = []; this.surfaces.push(new Surface([this.v1,this.v2,this.v4,this.v3])); this.surfaces.push(new Surface([this.v5,this.v6,this.v8,this.v7])); this.surfaces.push(new Surface([this.v1,this.v3,this.v7,this.v5])); this.surfaces.push(new Surface([this.v2,this.v4,this.v8,this.v6])); this.surfaces.push(new Surface([this.v1,this.v2,this.v6,this.v5])); this.surfaces.push(new Surface([this.v3,this.v4,this.v8,this.v7])); } } class Surface{ constructor(vertices){//verts arrange in order this.vertices = vertices; } static draw(e, surface, ctx, color){ ctx.beginPath(); let first = true; for(let v of surface.vertices){ if(first){ first = false; ctx.moveTo(e.findRetinaX(v.x, v.z), e.findRetinaY(v.y, v.z)); }else{ ctx.lineTo(e.findRetinaX(v.x, v.z), e.findRetinaY(v.y, v.z)); } } ctx.closePath(); ctx.globalAlpha = 0.07; ctx.fillStyle= color; ctx.fill(); } } class Line{ constructor(a, b){ this.a = a; this.b = b; } static draw(e, line,ctx,color){ 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.globalAlpha =1 ; ctx.strokeStyle = color; ctx.lineWidth=0.4; 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"); //create couple eyes let e1 = new Eye(250,250,475,500,0,Math.PI/2); let e2 = new Eye(250,250,525,500,0,Math.PI/2); //create the subjects let verts = [new Vertex(300,300,500),new Vertex(700,300,500), new Vertex(700,700,500), new Vertex(300,700,500)]; let s = new Surface(verts); verts = [new Vertex(600,300,500),new Vertex(700,300,500), new Vertex(700,700,500), new Vertex(300,700,500)]; let s2 = new Surface(verts); /// let cubes = []; for(let a=0;a<25;a++){ cubes.push(new Cube([Math.random()*1000,Math.random()*1000,Math.random()*2000+200],100)); cubes[cubes.length-1].color = colors[Math.floor(Math.random()*4)]; Shape.stretchX(Math.random()*2+0.25, cubes[cubes.length-1]); Shape.stretchY(Math.random()*2+0.25, cubes[cubes.length-1]); Shape.stretchZ(Math.random()*2+0.25, cubes[cubes.length-1]); } 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]<350){ cubes.splice(cubes.indexOf(cube),1); cubes.unshift(new Cube([Math.random()*1000, Math.random()*1000, Math.random()*2000 +800],Math.random()*200+50)); cubes[0].color = colors[Math.floor(Math.random()*4)]; Shape.stretchX(Math.random()*2+0.25, cubes[0]); Shape.stretchY(Math.random()*2+0.25, cubes[0]); Shape.stretchZ(Math.random()*2+0.25, cubes[0]); if(vib){ navigator.vibrate(30); } } //draw first eye Shape.drawSurfaces(e1,cube,ctx1); Shape.draw(e1,cube,ctx1); //draw second eye Shape.drawSurfaces(e2,cube,ctx2); 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; }

Colored Cubes and Prisms - Surfaces