setTimeout(()=>alert("Check out Mitali's tiny park 😇"),100) /* This is my basic ES6 template I'm using for all my newer Canvas projects*/ /************************[TEMPLATE]****************************/ const update_fps = () => { fps.innerHTML = Math.round(1000/(Date.now()-now)) now = Date.now() } const init_fps = () => { fps = document.createElement("a") fps.style.color = "lime" document.body.appendChild(fps) now = Date.now() } const init_canvas = () => { c = document.getElementById("cvs") ctx = c.getContext("2d") c.width = window.innerWidth c.height = window.innerHeight } const main = () => { update_fps() update() clear() draw() requestAnimationFrame(main) } const clear = () => { /* Reassigning the canvas width clears its content */ c.width = c.width } window.onload = () => { init_fps() init_canvas() setup() requestAnimationFrame(main) } /**************************************************************/ /*************************[MAIN]*******************************/ /* Sets the project up */ const setup = () => { initialize_engine() add_event_listeners() /* This will keep track of the touch positions for the swiping rotations*/ touch = {x: 0, y: 0} /* Getting the reference for the two buttons to do handle DOM events */ add_button = document.getElementById("add") del_button = document.getElementById("del") /* Opening the Add Object menu in start */ edit() park = new Object(tiny_park_mesh, new Vector(0,0,6), [-20,90,0]) } /* Does computational stuff */ const update = () => { update_engine() park.ry += 0.5 } /* Drawing everything */ const draw = () => { draw_engine() } /**************************************************************/ /* DOM */ /* Called on Add Object button click */ const edit = () => { } /* Cleares all mesh data -> objects */ const delete_objects = () => { mesh_data = [] } /* ENGINE */ // Copyright (c) 2019 Martin /*************************[CLASSES]****************************/ /* The ... Vector class */ class Vector { constructor(x,y,z) { this.x = x this.y = y this.z = z } /* Applying rotation X: X rotation value in degrees Y: Y rotation value in degrees Z: Z rotation value in degrees [v]: Vector to rotate about, empty: (0,0,0) Applying rotation calculations in the order z y x */ rotate(X,Y,Z,v) { if(v) { this.calc("-", v) this.rotate(X,Y,Z) this.calc("+", v) } else { var rotZ = () => { var x = this.x; var y = this.y; var z = this.z this.x = x*cos(Z) - y*sin(Z) this.y = x*sin(Z) + y*cos(Z) } var rotY = () => { var x = this.x; var y = this.y; var z = this.z this.x = x*cos(Y) + z*sin(Y) this.z = -x*sin(Y) + z*cos(Y) } var rotX = () => { var x = this.x; var y = this.y; var z = this.z this.y = y*cos(X) - z*sin(X) this.z = y*sin(X) + z*cos(X) } /* Keeping the rotation order the same is very important as different orders give different results*/ rotZ(); rotY(); rotX() } } /* A method to do vector calculaions without return on +, -, *, / */ calc(expr, v) { if(expr == "+") { this.x += v.x; this.y += v.y; this.z += v.z } else if(expr == "-") { this.x -= v.x; this.y -= v.y; this.z -= v.z } else if(expr == "*") { this.x *= v; this.y *= v; this.z *= v } else if(expr == "/") { this.x /= v; this.y /= v; this.z /= v } else if(expr == ".") { return this.x*v.x + this.y*v.y + this.z*v.z } else if(expr == "x") { return new Vector( this.y*v.z - v.y*this.z, this.z*v.x - v.z*this.x, this.x*v.y - v.x*this.y) } } /* Calculations applied to a new vector */ add(v) { return new Vector(this.x+v.x,this.y+v.y,this.z+v.z) } sub(v) { return new Vector(this.x-v.x,this.y-v.y,this.z-v.z) } mult(a) { return new Vector(a*this.x, a*this.y, a*this.z) } /* Returns a copy of the vector JS takes reference to objects so if I want to change some vector for calculations I need a copy to not change the original Vector */ get copy() {return new Vector(this.x,this.y,this.z)} /* Returns the magnitude of a vector */ get length() { return Math.sqrt(Math.pow(this.x,2)+Math.pow(this.y,2)+ Math.pow(this.z,2)) } /* Returns a normalized vector (length = 1) */ get norm() { let l = this.length return new Vector(this.x/l,this.y/l,this.z/l) } /* Return the angle between two vectors (rad) */ angle_to(v) { return Math.acos(this.calc(".",v) / (this.length * v.length)) } } /* Each mesh is made out of triangles. Using triangles is easier for calculaions than quads are */ class Triangle { /* The constructor takes 3 vectors as arguments. It's important to make the ordering consistantly clockwise, to have the face direction of the Triangle. The direction is important so that Triangles facing more than 90 degrees off the camera's viewing direction won't be drawn, as they won't be seen anyways. This reduces drawing and calculation time. */ constructor(v_1, v_2, v_3, color) { this.verts = [ new Vector(v_1.x, v_1.y, v_1.z), new Vector(v_2.x, v_2.y, v_2.z), new Vector(v_3.x, v_3.y, v_3.z) ] this.color = color /* The add_rgb attribute is a slightly darker/lighter version of the color attribute. It's used for shading */ this.add_rgb = null } // As in the Vector class, just a copy of the class instance get copy() { return new Triangle(...this.verts, this.color) } /* Returns the center of an object (center of mass, I think :D) */ get center() { let p = new Vector(0,0,0) for(let v of this.verts) p.calc("+", v) p.calc("/", this.verts.length) return p } } /* The mesh class is basically the main Object class. It holds all triangles, a Mesh position and Mesh rotation */ class Mesh { constructor(triangles, pos, xr,yr,zr) { this.xr = xr; this.yr = yr; this.zr = zr this.pos = pos this._triangles = triangles /* Not all triangles of an object needs to be drawn always (clipping) */ this.to_draw = [] this._center = null } get triangles() { return this._triangles } /* Returns all vertices that are used in the mesh's triangles */ get verts() { let vs = [] for(let t of this.triangles) { vs.push(...t.verts) } return vs } /* This is where the main part of the engine's calculation happens */ get projected_triangles() { let pt = [] /* Getting the projection matrix (3D to 2D) */ let m = new ProjectionMatrix() /* The calculations are done for each triangle t */ for(let t of this.triangles) { var norm = t.verts[1].sub(t.verts[0]).calc("x", t.verts[2].sub(t.verts[0])).norm /* norm is the vector orthogonal to the triangle. If the dot product of the norm vector and the vector cam -> triangle is less than 0 (greater than 90 degrees) the triangle is facing away from the camera and is not drawn */ var draw_all = false if(norm.calc(".",t.center.sub(cam)) < 0 ||draw_all){ /* The shade vector is the direction of the shadow or -shade is the direction of the light which I set to the camera's viewing direction */ var shade = this.center.sub(cam).norm.mult(-1) /* Also a y component, meaning the light comes from above the player (or shadow from below) */ shade.y = 1 shade = shade.norm let t_color /* t_color is the rgb value of the shaded triangle color; the maximum difference is 50 rgb values darker. So the shade makes objects appear darker, it's not a light which would make objects lighter or reflect */ if(t.color) { var dp = Math.round( shade.calc(".",norm) * 50) let rgb = t.color.substring(5, t.color.length-1).replace(/ /g, ''). split(',') rgb[0] = parseInt(rgb[0])+dp rgb[1] = parseInt(rgb[1])+dp rgb[2] = parseInt(rgb[2])+dp t_color = "rgba("+rgb[0]+", "+rgb[1]+", "+ rgb[2]+", 1)" } /* vi are the projected vertices of the triangle's vertices (view vectors) to the camera plane (see point_at_matrix) */ let v0 = mult_4_4(t.verts[0],mat) let v1 = mult_4_4(t.verts[1],mat) let v2 = mult_4_4(t.verts[2],mat) /* vt is the corresponding triangle */ let vt = new Triangle(v0, v1, v2, t.color) /* Clipping is quite a tidious thing to do but boosts performance a lot and visuals. All triangles that have one or two vertices outside the canvas a clipped to new triangles which form a new set of 1 or two triangles. You can enable drawing the wireframe to see what is done. (Set the second parameter of draw_triangle in the draw_engine function (below) from 0 (default) to 1)*/ let clip = clip_against_plane( new Vector(0,0,0.1), new Vector(0,0,1),vt) /* All triangles that are inside the view are drawn to the canvas */ for(let ct of clip.slice(1)) { if(ct != 0) { let nt = new Triangle( m.mult(ct.verts[0]), m.mult(ct.verts[1]), m.mult(ct.verts[2]), t.color) /* The triangle is shaded now and has the add_rgb attribute which is the color it'll be drawn with then */ nt.add_rgb = t_color pt.push(nt) } } } } /* Origin is set to the middle of the screen */ for(let t of pt) { let a = 0.5 let b = 1 t.verts[0].x += b; t.verts[0].x *= a*c.width t.verts[1].x += b; t.verts[1].x *= a*c.width t.verts[2].x += b; t.verts[2].x *= a*c.width t.verts[0].y += b; t.verts[0].y *= a*c.height t.verts[1].y += b; t.verts[1].y *= a*c.height t.verts[2].y += b; t.verts[2].y *= a*c.height } return pt } update_draw() { /* _draw will hold all clipped (wo be drawn) triangles. The basic algorithm is to have two have a queue where i put all triangles that are clipped. So if clipped once I don't have to check for a clipping anymore. For each triangle of the mesh: If clipped: remove from triangle_list add to the drawing queue Continue checking for clips in the remainding triangles from triangle_list (this.projected_triangles) */ this.to_draw = [] var clip = clip_against_plane for(let t of sort(this.projected_triangles)) { let queue = [t] var clipped_tris = [0,0] var n = 1 for(let i = 0; i < 4; i++) { // four screen edges var nt_to_add = 0 while(n > 0) { var test = queue.splice(0,1)[0] n-- if(i == 0) { /* Top edge */ let cl = clip(new Vector(0,0,0), new Vector(0,1,0), test) nt_to_add = cl.splice(0,1)[0] clipped_tris = cl } if(i == 1) { /* Bottom edge */ let cl =clip(new Vector(0,c.height-1,0), new Vector(0,-1,0), test) nt_to_add = cl.splice(0,1)[0] clipped_tris = cl } if(i == 2) { /* Left edge */ let cl =clip(new Vector(0,0,0), new Vector(1,0,0), test) nt_to_add = cl.splice(0,1)[0] clipped_tris = cl } if(i == 3) { /* Right edge */ let cl =clip(new Vector(c.width-1,0,0), new Vector(-1,0,0), test) nt_to_add = cl.splice(0,1)[0] clipped_tris = cl } for(let w = 0; w < nt_to_add; w++) queue.push(clipped_tris[w]) } n = queue.length } /* Put the queue in the _to_draw list */ for(let ct of queue) this.to_draw.push(ct) } } /* Not used currently (see draw_engine) */ draw() { for(let t of this.to_draw) draw_triangle(t, 1) this.to_draw = [] } /* Two methods to get the center of the mesh */ get dcenter() { if(!this._center) this._center = center_vert(this.verts) return this._center.sub(this.pos) } get center() { return this.pos.add(this.dcenter) } } /* I won't explain the maths here but what is basically does is project a vertex into a 2D plane, so that all vertices have a common z-value which makes it able to have a nice 3D looking projection of 3D vertices on the 2D screen */ class ProjectionMatrix { constructor() { this.zn = 0.1 this.zf = 100 this.fov = 100 this.ar = c.width / c.height this.fov_rad = 1 / (Math.tan(0.5*rad(this.fov))) } get matrix() { let mat = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]] mat[0][0] = this.fov_rad mat[1][1] = this.fov_rad * this.ar mat[2][2] = this.zf / (this.zf - this.zn) mat[3][2] = (-this.zf * this.zn)/ (this.zf - this.zn) mat[2][3] = 1 return mat } mult(v) { let o = new Vector(0,0,0) let m = this.matrix o.x = m[0][0]*v.x + m[1][0]*v.y + m[2][0]*v.z + m[3][0] o.y = m[0][1]*v.x + m[1][1]*v.y + m[2][1]*v.z + m[3][1] o.z = m[0][2]*v.x + m[1][2]*v.y + m[2][2]*v.z + m[3][2] let z= m[0][3]*v.x + m[1][3]*v.y + m[2][3]*v.z + m[3][3] if(z != 0) o.x /= z; o.y /= z; o.z /= z return o } } /* Just a class to make it easier to create/handle Models */ class Object { constructor(mesh_tris, pos, rot) { this.mesh_tris = mesh_tris this.x = pos.x this.y = pos.y this.z = pos.z this.rx = rot[0] this.ry = rot[1] this.rz = rot[2] mesh_data.push(this) } } /***********************[HELPER FUNCTIONS]********************/ /* This returns a matrix which is used in the Mesh class to translate each vertex corresponding to the camera position */ const point_at_matrix = (pos, target, up) => { let nf = target.sub(pos).norm let a = nf.mult(nf.calc(".",up)) let nu = up.sub(a).norm let nr = nu.calc("x",nf) let m = [[nr.x, nr.y, nr.z, 0], [nu.x, nu.y, nu.z, 0], [nf.x, nf.y, nf.x, 0], [pos.x,pos.y,pos.z,1]] let mi = [[nr.x, nu.x, nf.x, 0], [nr.y, nu.y, nf.y, 0], [nr.z, nu.z, nf.z, 0], [-pos.calc(".",nr), -pos.calc(".",nu), -pos.calc(".",nf), 1]] return mi } /* A 3D vec multiplication with a 4x4 matrix (4th component of the 3D vector is w = 1) */ const mult_4_4 = (v,m) => { let o = new Vector(0,0,0) o.x = m[0][0]*v.x + m[1][0]*v.y + m[2][0]*v.z + m[3][0] o.y = m[0][1]*v.x + m[1][1]*v.y + m[2][1]*v.z + m[3][1] o.z = m[0][2]*v.x + m[1][2]*v.y + m[2][2]*v.z + m[3][2] let z = m[0][3]*v.x + m[1][3]*v.y + m[2][3]*v.z + m[3][3] if(z != 0) o.x /= z; o.y /= z; o.z /= z return o } /* Calculates the intersection point of a line going through a and b and a plane definded by the normal vector n and a position vector p (Plane: ax+by+cz-d = 0) */ const intersection = (p, n, a, b) => { let v = b.sub(a) let d = n.calc(".",p) let r = (d-n.calc(".", a))/n.calc(".", v) v.calc("*", r) let f = a.copy f.calc("+", v) return f } /* Triangles that are partially outside of the camera's view need to be clipped against the screen edges |----------------------| This will return one triangle, | | the small one inside the screen. | | For that the intersection points | | D and E of AB and AC on the | A | bottom plane y = canvas_height | / \ | are calculated using above | / \ | defined function. |-------D-----E--------| / _,~^° \ B ------- C Now think of this bottom part to be the screen inside. The calculation is the same but now we have a quad that needs to be split into 2 new triangles BDE and BEC (always clockwise, remember). The return value contains the number of triangles and the (new) triangles. Triangles that are completely inside or completely outside the screen don't need to be clipped. */ const clip_against_plane = (p, n, t) => { let ts = [] n = n.norm let ds = [] for(let v of t.verts) ds.push(n.calc(".",v)-n.calc(".",p)) let ins = [0,0,0]; ins_c = 0 let out = [0,0,0]; out_c = 0 if(ds[0] >= 0) ins[ins_c++] = t.verts[0] else out[out_c++] = t.verts[0] if(ds[1] >= 0) ins[ins_c++] = t.verts[1] else out[out_c++] = t.verts[1] if(ds[2] >= 0) ins[ins_c++] = t.verts[2] else out[out_c++] = t.verts[2] if(ins_c == 0) return [0,0,0] if(ins_c == 3) return [1,t,0] if(ins_c == 1 && out_c == 2) { let new_t_1 = new Triangle( ins[0], intersection(p,n,ins[0],out[0]), intersection(p,n,ins[0],out[1]), t.color) new_t_1.add_rgb = t.add_rgb return [1,new_t_1,0] } if(ins_c == 2 && out_c == 1) { let new_t_1 = new Triangle( ins[0], ins[1], intersection(p,n,ins[1],out[0]), t.color) new_t_1.add_rgb = t.add_rgb let new_t_2 = new Triangle( ins[0], new_t_1.verts[2].copy, intersection(p,n,ins[0],out[0]), t.color) new_t_2.add_rgb = t.add_rgb return [2,new_t_1,new_t_2] } } /* These to functions are to get the looking direction vector out of the camera rotational values */ const get_look_dir = () => { return new Vector(base_vec[0], look_y, base_vec[1]) } const rotated_look_dir = () => { let dir = get_look_dir() dir.rotate(0,rot_y,0) dir.rotate(base_rot[0],0,base_rot[1]) return dir } /* This defines the global variables that are used by the engine */ const initialize_engine = () => { cam = new Vector(0,1,0) look_y = 0 base_vec = [0,1] rot_y = 0 base_rot = [0,0] mesh_data = [] alpha = 1 } /* This creates and updates the meshes from the models which's data is stored in the mesh_data variable */ const update_engine = () => { meshes = [] for(let data of mesh_data) { meshes.push(get_mesh(data)) } for(let m of sortM(meshes)) { for(let t of m.triangles) { for(let v of t.verts) { // apply rotation and translation v.rotate(m.xr,m.yr,m.zr) v.calc("+", m.pos) up_v = new Vector(0,1,0) target = cam.add(rotated_look_dir()) mat = point_at_matrix(cam, target, up_v) // mat is used in the Mesh class } } } } /* This draws all triangles from all meshes sorted by their distance to the camera. Furthest will be drawn first */ const draw_engine = () => { let all_ts = [] for(let m of sortM(meshes)) { m.update_draw() for(let t of m.to_draw) all_ts.push(t) } for(let t of sort(all_ts)) draw_triangle(t, 0) // set the 0 to 1 to see a wireframe } /* creates a mesh out of an Object instance (model) */ const get_mesh = (object) => { let mesh_tris = object.mesh_tris let x = object.x let y = object.y let z = object.z let rx = object.rx let ry = object.ry let rz = object.rz let tris = [] for(let t of sort(mesh_tris)) tris.push(t.copy) return new Mesh(tris, new Vector(x,y,z), rx,ry,rz) } /* Below is just event handling (touch and keyboard) and some self explanatory helper and other functions */ const touch_start = (e) => { if(touch_index == null) touch_index = e.touches.length-1 touch.x = e.touches[touch_index].clientX touch.y = e.touches[touch_index].clientY last_rot = [base_rot[0], rot_y, base_rot[1]] } var last_rot = [0,0,0] const touch_move = (e) => { try { rot_y = last_rot[1] - (e.touches[touch_index]. clientX - touch.x) let dy = (e.touches[touch_index]. clientY - touch.y)/2 let rotY = rot_y let rotX = cos(rotY); let rotZ = sin(rotY) base_rot[0] = rotX*dy + last_rot[0]*rotX // last_rot[0]*cos(rotY) + last_rot[1]*sin(rotY) base_rot[1] = - (rotZ*dy) + last_rot[2]*rotZ // last_rot[0]*sin(rotY) - last_rot[1]*cos(rotY) base_rot[0] = base_rot[0]>70?70:(base_rot[0]<-70)?-70: base_rot[0] base_rot[1] = base_rot[2]>70?70:(base_rot[1]<-70)?-70: base_rot[1] // print(rotated_look_dir()) // look_dir = vec(...look_rot) } catch(e) {console.log(e)} } const touch_cancel = (e) => { last_rot = [base_rot[0], rot_y, base_rot[1]] touch = {x:0, y:0} } const key_down = (e) => { let key = e.keyCode if(key == 87) { let rotY = rad(-look_rot[1]) let dx = Math.sin(rotY); let dz = Math.cos(rotY) cam.x -= dx/5; cam.z += dz/5 } if(key == 83) { let rotY = rad(-look_rot[1]) let dx = Math.sin(rotY); let dz = Math.cos(rotY) cam.x += dx/5; cam.z -= dz/5 } if(key == 65) { look_rot[1] -= 3 look_dir = vec(...look_rot) } if(key == 68) { look_rot[1] += 3 look_dir = vec(...look_rot) } if(key == 32) cam.y += 0.5 if(key == 16) cam.y -= 0.5 } const del_event_listeners = () => { window.removeEventListener("touchstart", touch_start) window.removeEventListener("touchmove", touch_move) window.removeEventListener("touchcancel", touch_cancel) window.removeEventListener("keydown", key_down) } const add_event_listeners = () => { touch_index = null window.addEventListener("touchstart", touch_start) window.addEventListener("touchmove", touch_move) window.addEventListener("touchcancel", touch_cancel) window.addEventListener("keydown", key_down) } /**************************************************************/ /*********************[OTHER FUNCTIONS]************************/ const draw_triangle = (triangle, s) => { let color = triangle.add_rgb ctx.fillStyle = color || triangle.color || "white" ctx.strokeStyle = color || triangle.color || "white" ctx.beginPath() let h = c.height let w = c.width ctx.moveTo(w-triangle.verts[0].x, h-triangle.verts[0].y) ctx.lineTo(w-triangle.verts[1].x, h-triangle.verts[1].y) ctx.lineTo(w-triangle.verts[2].x, h-triangle.verts[2].y) ctx.closePath()/*Martin*/ ctx.lineWidth = 1 if(s) ctx.strokeStyle = "black" ctx.stroke() ctx.fill() } const deg = (rad) => rad*180/Math.PI const rad = (deg) => deg*Math.PI/180 const cos = (deg) => Math.cos(rad(deg)) const sin = (deg) => Math.sin(rad(deg)) const print = (obj) => console.log(JSON.stringify(obj)) const max = (a,b) => a>b?a:b const min = (a,b) => a { let v = new Vector(0,0,1) v.rotate(x,y,z) return v } const sort = (surfs) => { let ss = surfs.slice() ss.sort((a,b)=>{return dist_to(a.verts)[1].z < dist_to(b.verts)[1].z?1:-1}) return ss } const sortM = (meshes) => { let ms = meshes.slice() ms.sort((a,b)=>{ return dist_to_mesh(a)[1].sub(cam).length < dist_to_mesh(b)[1].sub(cam).length?1:-1 }) return ms } const center_vert = (verts) => { let min = verts[0].copy let max = verts[0].copy for(let v of verts) { min.x = v.xmax.x? v.x: max.x max.y = v.y>max.y? v.y: max.y max.z = v.z>max.z? v.z: max.z } let center = max.sub(min) center.calc("/", 2) center.calc("+", min) return center } const dist_to = (verts, cam) => { let min = verts[0].copy let max = verts[0].copy/*Martin*/ for(let v of verts) { min.x = v.xmax.x? v.x: max.x max.y = v.y>max.y? v.y: max.y max.z = v.z>max.z? v.z: max.z } return [min,max] } const dist_to_mesh = (mesh) => { let min = mesh.triangles[0].verts[0].copy let max = mesh.triangles[0].verts[0].copy for(let t of mesh.triangles) { for(let v of t.verts) { min.x = v.xmax.x? v.x: max.x max.y = v.y>max.y? v.y: max.y max.z = v.z>max.z? v.z: max.z } } return [min,max] } const up = (state, s) => { if(!state) up_interval = setInterval(()=>{ cam.y += 1/(s||10)}, 16) else clearInterval(up_interval) } const down = (state, s) => { if(!state) down_interval = setInterval(()=>{ cam.y -= 1/(s||10)}, 16) else clearInterval(down_interval) } const left = (state, s) => { if(!state) { left_interval = setInterval(()=>{ let rotY = rad(-rot_y) let dx = Math.sin(rotY); let dz = Math.cos(rotY) cam.x -= dz/(s||10); cam.z -= dx/(s||10) }, 16)/*Martin*/ } else clearInterval(left_interval) } const right = (state, s) => { if(!state) { right_interval = setInterval(()=>{ let rotY = rad(-rot_y) let dx = Math.sin(rotY); let dz = Math.cos(rotY) cam.x += dz/(s||10); cam.z += dx/(s||10) }, 16) } else clearInterval(right_interval) } const forward = (state, s) => { if(!state) { forward_interval = setInterval(()=>{ let rotY = rad(-rot_y) let dx = Math.sin(rotY); let dz = Math.cos(rotY) cam.x -= dx/(s||10); cam.z += dz/(s||10) }, 16) } else clearInterval(forward_interval) } const backward = (state, s) => { if(!state) { back_interval = setInterval(()=>{ let rotY = rad(-rot_y) let dx = Math.sin(rotY); let dz = Math.cos(rotY) cam.x += dx/(s||10); cam.z -= dz/(s||10) }, 16)/*Martin*/ } else clearInterval(back_interval) } /**************************************************************/ /***************************[MODELS]**************************/ // The models are blender models which I downloaded // from the internet, they are NOT MINE // What I did is editing these models to a nice // format for my engine, then I exported the // objects and fed those files into a python // script I made which printed the following output // I might put the script here later as well var tiny_park_verts = [ new Vector(2.499999, -0.5, -2.499999), new Vector(2.499999, -0.5, 2.499999), new Vector(-2.499999, -0.5, 2.499998), new Vector(-2.499998, -0.5, -2.5), new Vector(2.5, 0.5, -2.499997), new Vector(2.499997, 0.5, 2.5), new Vector(-2.5, 0.5, 2.499998), new Vector(-2.499999, 0.5, -2.499999), new Vector(2.5, 0.230439, -2.499998), new Vector(2.499998, 0.230439, 2.5), new Vector(-2.499999, 0.230439, 2.499998), new Vector(-2.499998, 0.230439, -2.499999), new Vector(1.417276, 0.5, -1.417274), new Vector(1.417274, 0.5, 1.417276), new Vector(-1.417275, 0.5, -1.417275), new Vector(-1.417276, 0.5, 1.417275), new Vector(1.417276, 0.323085, -1.417274), new Vector(1.417274, 0.323085, 1.417276), new Vector(-1.417275, 0.323085, -1.417275), new Vector(-1.417276, 0.323085, 1.417275), new Vector(0.407296, 0.488084, 2.286094), new Vector(2.407296, 0.488084, 2.286094), new Vector(0.407296, 0.488084, 1.668267), new Vector(2.407296, 0.488084, 1.557346), new Vector(0.407296, 0.565978, 1.668267), new Vector(0.407296, 0.565978, 2.286094), new Vector(2.407296, 0.565978, 2.286094), new Vector(2.407296, 0.565978, 1.557346), new Vector(1.641085, 0.488084, 2.286094), new Vector(1.641085, 0.488084, 1.668267), new Vector(1.641085, 0.565978, 2.286094), new Vector(1.641085, 0.565978, 1.668267), new Vector(2.407296, 0.488084, 0.689681), new Vector(2.407296, 0.565978, 0.689681), new Vector(1.641085, 0.488084, 0.689681), new Vector(1.641085, 0.565978, 0.689681), new Vector(2.381763, 0.873857, -2.330945), new Vector(1.630549, 0.487063, -1.061336), new Vector(1.630549, 0.487063, -2.330945), new Vector(2.381763, 0.487063, -1.061336), new Vector(2.381763, 0.487063, -2.330945), new Vector(1.630549, 0.873857, -2.330945), new Vector(1.630549, 0.873857, -1.061336), new Vector(2.381763, 0.873857, -1.061336), new Vector(-2.400512, 0.461211, 2.310143), new Vector(-1.649298, 0.461211, 2.310143), new Vector(-2.400512, 0.461211, 1.040534), new Vector(-1.649298, 0.461211, 1.040534), new Vector(-2.400512, 0.848005, 1.040534), new Vector(-2.400512, 0.848005, 2.310143), new Vector(-1.649298, 0.848005, 2.310143), new Vector(-1.649298, 0.848005, 1.040534), new Vector(-1.89906, 0.604762, -1.440452), new Vector(-1.89906, 1.323082, -1.440452), new Vector(-1.89906, 0.604762, -1.65014), new Vector(-1.89906, 1.323082, -1.65014), new Vector(-1.686596, 0.604762, -1.440452), new Vector(-1.686596, 1.323082, -1.440452), new Vector(-1.686596, 0.604762, -1.65014), new Vector(-1.686596, 1.323082, -1.65014), new Vector(-2.171081, 1.30507, -1.179155), new Vector(-1.431185, 1.30507, -1.179155), new Vector(-2.171081, 1.30507, -1.963612), new Vector(-1.431185, 1.30507, -1.963612), new Vector(-2.171081, 2.210806, -1.963612), new Vector(-2.171081, 2.210806, -1.179155), new Vector(-1.431185, 2.210806, -1.179155), new Vector(-1.431185, 2.210806, -1.963612), new Vector(-2.101493, 0.487139, -0.102502), new Vector(-2.101493, 1.205459, -0.102502), new Vector(-2.101493, 0.487139, -0.225632), new Vector(-2.101493, 1.205459, -0.225632), new Vector(-1.966348, 0.487139, -0.102502), new Vector(-1.966348, 1.205459, -0.102502), new Vector(-1.966348, 0.487139, -0.225632), new Vector(-1.966348, 1.205459, -0.225632), new Vector(-2.338224, 1.187447, 0.120325), new Vector(-1.793018, 1.187447, 0.120325), new Vector(-2.338224, 1.187447, -0.435817), new Vector(-1.793018, 1.187447, -0.435817), new Vector(-2.338224, 1.844826, -0.435817), new Vector(-2.338224, 1.844826, 0.120325), new Vector(-1.793018, 1.844826, 0.120325), new Vector(-1.793018, 1.844826, -0.435817), new Vector(-1.213746, 0.500002, 2.264377), new Vector(-0.523053, 0.500002, 2.264377), new Vector(-1.213746, 0.500002, 1.627007), new Vector(-0.523053, 0.500002, 1.627007), new Vector(-1.213746, 0.606386, 1.627007), new Vector(-1.213746, 0.606386, 2.264377), new Vector(-0.523053, 0.606386, 2.264377), new Vector(-0.523053, 0.606386, 1.627007), new Vector(-0.963328, 0.771113, -1.734796), new Vector(0.412636, 0.771113, -1.734796), new Vector(-0.963328, 0.771113, -2.372542), new Vector(0.412636, 0.771113, -2.372542), new Vector(-0.963328, 0.914171, -2.372542), new Vector(-0.963328, 0.914171, -1.734796), new Vector(0.412636, 0.914171, -1.734796), new Vector(0.412636, 0.914171, -2.372542), new Vector(-0.963328, 0.771113, -2.207417), new Vector(0.412636, 0.771113, -2.207417), new Vector(-0.963328, 0.914171, -2.207417), new Vector(0.412636, 0.914171, -2.207417), new Vector(0.412636, 1.422661, -2.207417), new Vector(0.412636, 1.422661, -2.372542), new Vector(-0.963328, 1.422661, -2.372542), new Vector(-0.963328, 1.422661, -2.207417), new Vector(0.274382, 0.771113, -1.734796), new Vector(0.274382, 0.771113, -2.372542), new Vector(0.274382, 0.914171, -1.734796), new Vector(0.274382, 0.914171, -2.372542), new Vector(0.274382, 0.914171, -2.207417), new Vector(0.274382, 0.771113, -2.207417), new Vector(0.274382, 1.422661, -2.372542), new Vector(0.274382, 1.422661, -2.207417), new Vector(-0.814151, 0.771113, -2.372542), new Vector(-0.814151, 0.914171, -2.372542), new Vector(-0.814151, 0.914171, -2.207417), new Vector(-0.814151, 1.422661, -2.372542), new Vector(-0.814151, 1.422661, -2.207417), new Vector(-0.814151, 0.771113, -1.734796), new Vector(-0.814151, 0.914171, -1.734796), new Vector(-0.814151, 0.771113, -2.207417), new Vector(-0.963328, 0.477579, -2.207417), new Vector(-0.963328, 0.477579, -1.734796), new Vector(0.274382, 0.477579, -1.734796), new Vector(0.412636, 0.477579, -1.734796), new Vector(0.412636, 0.477579, -2.207417), new Vector(0.412636, 0.477579, -2.372542), new Vector(-0.814151, 0.477579, -2.372542), new Vector(-0.963328, 0.477579, -2.372542), new Vector(0.274382, 0.477579, -2.207417), new Vector(0.274382, 0.477579, -2.372542), new Vector(-0.814151, 0.477579, -1.734796), new Vector(-0.814151, 0.477579, -2.207417), ] var tiny_park_mesh = [ new Triangle(tiny_park_verts[1], tiny_park_verts[3], tiny_park_verts[0], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[0], tiny_park_verts[11], tiny_park_verts[8], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[2], tiny_park_verts[11], tiny_park_verts[3], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[9], tiny_park_verts[2], tiny_park_verts[1], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[8], tiny_park_verts[1], tiny_park_verts[0], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[29], tiny_park_verts[21], tiny_park_verts[28], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[23], tiny_park_verts[26], tiny_park_verts[21], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[20], tiny_park_verts[24], tiny_park_verts[22], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[22], tiny_park_verts[31], tiny_park_verts[29], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[21], tiny_park_verts[30], tiny_park_verts[28], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[28], tiny_park_verts[25], tiny_park_verts[20], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[23], tiny_park_verts[34], tiny_park_verts[32], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[22], tiny_park_verts[28], tiny_park_verts[20], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[34], tiny_park_verts[33], tiny_park_verts[32], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[23], tiny_park_verts[33], tiny_park_verts[27], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[31], tiny_park_verts[34], tiny_park_verts[29], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[1], tiny_park_verts[2], tiny_park_verts[3], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[0], tiny_park_verts[3], tiny_park_verts[11], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[2], tiny_park_verts[10], tiny_park_verts[11], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[9], tiny_park_verts[10], tiny_park_verts[2], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[8], tiny_park_verts[9], tiny_park_verts[1], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[29], tiny_park_verts[23], tiny_park_verts[21], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[23], tiny_park_verts[27], tiny_park_verts[26], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[20], tiny_park_verts[25], tiny_park_verts[24], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[22], tiny_park_verts[24], tiny_park_verts[31], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[21], tiny_park_verts[26], tiny_park_verts[30], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[28], tiny_park_verts[30], tiny_park_verts[25], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[23], tiny_park_verts[29], tiny_park_verts[34], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[22], tiny_park_verts[29], tiny_park_verts[28], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[34], tiny_park_verts[35], tiny_park_verts[33], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[23], tiny_park_verts[32], tiny_park_verts[33], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[31], tiny_park_verts[35], tiny_park_verts[34], 'rgba(163,103,36,1)'), new Triangle(tiny_park_verts[7], tiny_park_verts[12], tiny_park_verts[4], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[4], tiny_park_verts[9], tiny_park_verts[8], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[5], tiny_park_verts[10], tiny_park_verts[9], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[10], tiny_park_verts[7], tiny_park_verts[11], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[8], tiny_park_verts[7], tiny_park_verts[4], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[12], tiny_park_verts[17], tiny_park_verts[13], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[5], tiny_park_verts[15], tiny_park_verts[6], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[4], tiny_park_verts[13], tiny_park_verts[5], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[6], tiny_park_verts[14], tiny_park_verts[7], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[15], tiny_park_verts[18], tiny_park_verts[14], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[14], tiny_park_verts[16], tiny_park_verts[12], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[13], tiny_park_verts[19], tiny_park_verts[15], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[7], tiny_park_verts[14], tiny_park_verts[12], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[4], tiny_park_verts[5], tiny_park_verts[9], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[5], tiny_park_verts[6], tiny_park_verts[10], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[10], tiny_park_verts[6], tiny_park_verts[7], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[8], tiny_park_verts[11], tiny_park_verts[7], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[12], tiny_park_verts[16], tiny_park_verts[17], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[5], tiny_park_verts[13], tiny_park_verts[15], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[4], tiny_park_verts[12], tiny_park_verts[13], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[6], tiny_park_verts[15], tiny_park_verts[14], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[15], tiny_park_verts[19], tiny_park_verts[18], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[14], tiny_park_verts[18], tiny_park_verts[16], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[13], tiny_park_verts[17], tiny_park_verts[19], 'rgba(4,64,0,1)'), new Triangle(tiny_park_verts[18], tiny_park_verts[17], tiny_park_verts[16], 'rgba(0,185,204,1)'), new Triangle(tiny_park_verts[18], tiny_park_verts[19], tiny_park_verts[17], 'rgba(0,185,204,1)'), new Triangle(tiny_park_verts[26], tiny_park_verts[31], tiny_park_verts[30], 'rgba(204,93,83,1)'), new Triangle(tiny_park_verts[30], tiny_park_verts[24], tiny_park_verts[25], 'rgba(204,93,83,1)'), new Triangle(tiny_park_verts[27], tiny_park_verts[35], tiny_park_verts[31], 'rgba(204,93,83,1)'), new Triangle(tiny_park_verts[26], tiny_park_verts[27], tiny_park_verts[31], 'rgba(204,93,83,1)'), new Triangle(tiny_park_verts[30], tiny_park_verts[31], tiny_park_verts[24], 'rgba(204,93,83,1)'), new Triangle(tiny_park_verts[27], tiny_park_verts[33], tiny_park_verts[35], 'rgba(204,93,83,1)'), new Triangle(tiny_park_verts[38], tiny_park_verts[39], tiny_park_verts[37], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[38], tiny_park_verts[36], tiny_park_verts[40], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[39], tiny_park_verts[42], tiny_park_verts[37], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[37], tiny_park_verts[41], tiny_park_verts[38], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[43], tiny_park_verts[41], tiny_park_verts[42], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[40], tiny_park_verts[43], tiny_park_verts[39], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[46], tiny_park_verts[45], tiny_park_verts[44], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[50], tiny_park_verts[48], tiny_park_verts[49], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[46], tiny_park_verts[51], tiny_park_verts[47], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[45], tiny_park_verts[49], tiny_park_verts[44], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[47], tiny_park_verts[50], tiny_park_verts[45], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[44], tiny_park_verts[48], tiny_park_verts[46], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[62], tiny_park_verts[61], tiny_park_verts[60], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[66], tiny_park_verts[64], tiny_park_verts[65], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[63], tiny_park_verts[66], tiny_park_verts[61], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[60], tiny_park_verts[64], tiny_park_verts[62], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[62], tiny_park_verts[67], tiny_park_verts[63], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[61], tiny_park_verts[65], tiny_park_verts[60], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[78], tiny_park_verts[77], tiny_park_verts[76], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[82], tiny_park_verts[80], tiny_park_verts[81], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[79], tiny_park_verts[82], tiny_park_verts[77], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[76], tiny_park_verts[80], tiny_park_verts[78], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[78], tiny_park_verts[83], tiny_park_verts[79], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[77], tiny_park_verts[81], tiny_park_verts[76], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[38], tiny_park_verts[40], tiny_park_verts[39], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[43], tiny_park_verts[36], tiny_park_verts[41], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[38], tiny_park_verts[41], tiny_park_verts[36], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[40], tiny_park_verts[36], tiny_park_verts[43], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[37], tiny_park_verts[42], tiny_park_verts[41], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[39], tiny_park_verts[43], tiny_park_verts[42], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[46], tiny_park_verts[47], tiny_park_verts[45], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[50], tiny_park_verts[51], tiny_park_verts[48], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[46], tiny_park_verts[48], tiny_park_verts[51], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[45], tiny_park_verts[50], tiny_park_verts[49], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[47], tiny_park_verts[51], tiny_park_verts[50], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[44], tiny_park_verts[49], tiny_park_verts[48], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[62], tiny_park_verts[63], tiny_park_verts[61], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[66], tiny_park_verts[67], tiny_park_verts[64], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[63], tiny_park_verts[67], tiny_park_verts[66], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[60], tiny_park_verts[65], tiny_park_verts[64], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[62], tiny_park_verts[64], tiny_park_verts[67], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[61], tiny_park_verts[66], tiny_park_verts[65], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[78], tiny_park_verts[79], tiny_park_verts[77], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[82], tiny_park_verts[83], tiny_park_verts[80], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[79], tiny_park_verts[83], tiny_park_verts[82], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[76], tiny_park_verts[81], tiny_park_verts[80], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[78], tiny_park_verts[80], tiny_park_verts[83], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[77], tiny_park_verts[82], tiny_park_verts[81], 'rgba(3,163,0,1)'), new Triangle(tiny_park_verts[53], tiny_park_verts[54], tiny_park_verts[52], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[55], tiny_park_verts[58], tiny_park_verts[54], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[59], tiny_park_verts[56], tiny_park_verts[58], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[57], tiny_park_verts[52], tiny_park_verts[56], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[58], tiny_park_verts[52], tiny_park_verts[54], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[55], tiny_park_verts[57], tiny_park_verts[59], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[69], tiny_park_verts[70], tiny_park_verts[68], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[71], tiny_park_verts[74], tiny_park_verts[70], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[75], tiny_park_verts[72], tiny_park_verts[74], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[73], tiny_park_verts[68], tiny_park_verts[72], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[74], tiny_park_verts[68], tiny_park_verts[70], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[71], tiny_park_verts[73], tiny_park_verts[75], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[121], tiny_park_verts[135], tiny_park_verts[123], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[99], tiny_park_verts[104], tiny_park_verts[103], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[95], tiny_park_verts[103], tiny_park_verts[101], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[92], tiny_park_verts[102], tiny_park_verts[100], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[94], tiny_park_verts[117], tiny_park_verts[116], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[100], tiny_park_verts[96], tiny_park_verts[94], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[101], tiny_park_verts[98], tiny_park_verts[93], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[100], tiny_park_verts[125], tiny_park_verts[92], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[96], tiny_park_verts[119], tiny_park_verts[117], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[102], tiny_park_verts[106], tiny_park_verts[96], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[111], tiny_park_verts[105], tiny_park_verts[99], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[123], tiny_park_verts[108], tiny_park_verts[121], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[109], tiny_park_verts[99], tiny_park_verts[95], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[116], tiny_park_verts[113], tiny_park_verts[123], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[116], tiny_park_verts[131], tiny_park_verts[94], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[93], tiny_park_verts[128], tiny_park_verts[101], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[117], tiny_park_verts[114], tiny_park_verts[111], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[116], tiny_park_verts[111], tiny_park_verts[109], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[133], tiny_park_verts[128], tiny_park_verts[132], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[132], tiny_park_verts[127], tiny_park_verts[126], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[131], tiny_park_verts[135], tiny_park_verts[124], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[124], tiny_park_verts[134], tiny_park_verts[125], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[123], tiny_park_verts[130], tiny_park_verts[116], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[113], tiny_park_verts[126], tiny_park_verts[108], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[94], tiny_park_verts[124], tiny_park_verts[100], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[95], tiny_park_verts[133], tiny_park_verts[109], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[101], tiny_park_verts[129], tiny_park_verts[95], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[109], tiny_park_verts[132], tiny_park_verts[113], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[53], tiny_park_verts[55], tiny_park_verts[54], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[55], tiny_park_verts[59], tiny_park_verts[58], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[59], tiny_park_verts[57], tiny_park_verts[56], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[57], tiny_park_verts[53], tiny_park_verts[52], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[58], tiny_park_verts[56], tiny_park_verts[52], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[55], tiny_park_verts[53], tiny_park_verts[57], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[69], tiny_park_verts[71], tiny_park_verts[70], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[71], tiny_park_verts[75], tiny_park_verts[74], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[75], tiny_park_verts[73], tiny_park_verts[72], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[73], tiny_park_verts[69], tiny_park_verts[68], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[74], tiny_park_verts[72], tiny_park_verts[68], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[71], tiny_park_verts[69], tiny_park_verts[73], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[121], tiny_park_verts[134], tiny_park_verts[135], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[99], tiny_park_verts[105], tiny_park_verts[104], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[95], tiny_park_verts[99], tiny_park_verts[103], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[92], tiny_park_verts[97], tiny_park_verts[102], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[94], tiny_park_verts[96], tiny_park_verts[117], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[100], tiny_park_verts[102], tiny_park_verts[96], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[101], tiny_park_verts[103], tiny_park_verts[98], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[100], tiny_park_verts[124], tiny_park_verts[125], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[96], tiny_park_verts[106], tiny_park_verts[119], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[102], tiny_park_verts[107], tiny_park_verts[106], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[111], tiny_park_verts[114], tiny_park_verts[105], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[123], tiny_park_verts[113], tiny_park_verts[108], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[109], tiny_park_verts[111], tiny_park_verts[99], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[116], tiny_park_verts[109], tiny_park_verts[113], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[116], tiny_park_verts[130], tiny_park_verts[131], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[93], tiny_park_verts[127], tiny_park_verts[128], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[117], tiny_park_verts[119], tiny_park_verts[114], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[116], tiny_park_verts[117], tiny_park_verts[111], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[133], tiny_park_verts[129], tiny_park_verts[128], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[132], tiny_park_verts[128], tiny_park_verts[127], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[131], tiny_park_verts[130], tiny_park_verts[135], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[124], tiny_park_verts[135], tiny_park_verts[134], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[123], tiny_park_verts[135], tiny_park_verts[130], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[113], tiny_park_verts[132], tiny_park_verts[126], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[94], tiny_park_verts[131], tiny_park_verts[124], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[95], tiny_park_verts[129], tiny_park_verts[133], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[101], tiny_park_verts[128], tiny_park_verts[129], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[109], tiny_park_verts[133], tiny_park_verts[132], 'rgba(91,23,3,1)'), new Triangle(tiny_park_verts[86], tiny_park_verts[85], tiny_park_verts[84], 'rgba(204,204,0,1)'), new Triangle(tiny_park_verts[90], tiny_park_verts[88], tiny_park_verts[89], 'rgba(204,204,0,1)'), new Triangle(tiny_park_verts[86], tiny_park_verts[91], tiny_park_verts[87], 'rgba(204,204,0,1)'), new Triangle(tiny_park_verts[85], tiny_park_verts[89], tiny_park_verts[84], 'rgba(204,204,0,1)'), new Triangle(tiny_park_verts[87], tiny_park_verts[90], tiny_park_verts[85], 'rgba(204,204,0,1)'), new Triangle(tiny_park_verts[84], tiny_park_verts[88], tiny_park_verts[86], 'rgba(204,204,0,1)'), new Triangle(tiny_park_verts[86], tiny_park_verts[87], tiny_park_verts[85], 'rgba(204,204,0,1)'), new Triangle(tiny_park_verts[90], tiny_park_verts[91], tiny_park_verts[88], 'rgba(204,204,0,1)'), new Triangle(tiny_park_verts[86], tiny_park_verts[88], tiny_park_verts[91], 'rgba(204,204,0,1)'), new Triangle(tiny_park_verts[85], tiny_park_verts[90], tiny_park_verts[89], 'rgba(204,204,0,1)'), new Triangle(tiny_park_verts[87], tiny_park_verts[91], tiny_park_verts[90], 'rgba(204,204,0,1)'), new Triangle(tiny_park_verts[84], tiny_park_verts[89], tiny_park_verts[88], 'rgba(204,204,0,1)'), new Triangle(tiny_park_verts[93], tiny_park_verts[110], tiny_park_verts[108], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[98], tiny_park_verts[112], tiny_park_verts[110], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[104], tiny_park_verts[114], tiny_park_verts[115], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[103], tiny_park_verts[115], tiny_park_verts[112], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[112], tiny_park_verts[120], tiny_park_verts[118], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[115], tiny_park_verts[119], tiny_park_verts[120], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[110], tiny_park_verts[118], tiny_park_verts[122], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[108], tiny_park_verts[122], tiny_park_verts[121], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[121], tiny_park_verts[97], tiny_park_verts[92], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[122], tiny_park_verts[102], tiny_park_verts[97], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[120], tiny_park_verts[106], tiny_park_verts[107], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[118], tiny_park_verts[107], tiny_park_verts[102], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[108], tiny_park_verts[127], tiny_park_verts[93], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[92], tiny_park_verts[134], tiny_park_verts[121], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[93], tiny_park_verts[98], tiny_park_verts[110], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[98], tiny_park_verts[103], tiny_park_verts[112], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[104], tiny_park_verts[105], tiny_park_verts[114], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[103], tiny_park_verts[104], tiny_park_verts[115], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[112], tiny_park_verts[115], tiny_park_verts[120], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[115], tiny_park_verts[114], tiny_park_verts[119], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[110], tiny_park_verts[112], tiny_park_verts[118], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[108], tiny_park_verts[110], tiny_park_verts[122], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[121], tiny_park_verts[122], tiny_park_verts[97], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[122], tiny_park_verts[118], tiny_park_verts[102], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[120], tiny_park_verts[119], tiny_park_verts[106], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[118], tiny_park_verts[120], tiny_park_verts[107], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[108], tiny_park_verts[126], tiny_park_verts[127], 'rgba(163,65,7,1)'), new Triangle(tiny_park_verts[92], tiny_park_verts[125], tiny_park_verts[134], 'rgba(163,65,7,1)'), ]