28:null 29:["$","title",null,{"children":"3d projection demo | Rugnar Lodbrok | Observable"}] 2e:T90f,p5(sketch => { const W = 87; const S = 83; const A = 65; const D = 68; const Q = 81; const E = 69; let mesh; let camera; sketch.setup = function() { const screen_w = 300; const aspect = 1.5; const near_plane = 1; let w = 2*near_plane*Math.tan(radians(fov/2)); let projection; if (perspective_flag) projection = new Perspective(near_plane, w, w / aspect, 99999); else projection = new Isometric(screen_w, screen_w/aspect); sketch.createCanvas(800, 600); camera = new Camera(500, 480, projection, new CamScreen(0, 0, screen_w, screen_w / aspect)); camera.m.rotate(basis.k, radians(180)); camera.update_inv(); mesh = Mesh[mesh_type](500, 400, 25, tessellation); }; sketch.draw = function() { if (sketch.keyIsDown(W)) { let v = new Vector3(0, 1); v.transform(camera.m); camera.m.set_translate(v); camera.update_inv(); } if (sketch.keyIsDown(S)) { let v = new Vector3(0, -1); v.transform(camera.m); camera.m.set_translate(v); camera.update_inv(); } if (sketch.keyIsDown(A)) { let v = new Vector3(1, 0); v.transform(camera.m); camera.m.set_translate(v); camera.update_inv(); } if (sketch.keyIsDown(D)) { let v = new Vector3(-1, 0); v.transform(camera.m); camera.m.set_translate(v); camera.update_inv(); } if (sketch.keyIsDown(Q)) { camera.m.rotate(basis.k, radians(-1)); camera.update_inv(); } if (sketch.keyIsDown(E)) { camera.m.rotate(basis.k, radians(1)); camera.update_inv(); } if (rotation_checkbox.includes("x")) mesh.m.rotate(basis.i, radians(1)); if (rotation_checkbox.includes("y")) mesh.m.rotate(basis.j, radians(1)); if (rotation_checkbox.includes("z")) mesh.m.rotate(basis.k, radians(1)); sketch.background(220); sketch.fill(0); sketch.stroke(0); sketch.textSize(24); sketch.text("controls: W A S D Q E", 35, 235); mesh.draw(sketch); camera.draw(sketch); camera.draw_projection(sketch, mesh); camera.draw_on_screen(sketch, mesh); }; })2f:T88b,class Vector3 { constructor(x, y, z) { if (z === undefined) z = 0; this.x = x; this.y = y; this.z = z; } transform(m) { m = m.data; let x = this.x; let y = this.y; let z = this.z; this.x = m[0][0] * x + m[0][1] * y + m[0][2] * z + m[0][3]; this.y = m[1][0] * x + m[1][1] * y + m[1][2] * z + m[1][3]; this.z = m[2][0] * x + m[2][1] * y + m[2][2] * z + m[2][3]; } transform4(m) { m = m.data; let x = this.x; let y = this.y; let z = this.z; let w = m[3][0] * x + m[3][1] * y + m[3][2] * z + m[3][3]; this.x = (m[0][0] * x + m[0][1] * y + m[0][2] * z + m[0][3]) / w; this.y = (m[1][0] * x + m[1][1] * y + m[1][2] * z + m[1][3]) / w; this.z = (m[2][0] * x + m[2][1] * y + m[2][2] * z + m[2][3]) / w; } transformed(m) { let r = this.copy(); r.transform(m); return r; } scale(c) { this.x *= c; this.y *= c; this.z *= c; } mul(c) { return new Vector3(this.x * c, this.y * c, this.z * c); } inverted() { let r = this.copy(); r.scale(-1); return r; } minus(other) { return new Vector3(this.x - other.x, this.y - other.y, this.z - other.z); } plus(other) { return new Vector3(this.x + other.x, this.y + other.y, this.z + other.z); } cross(other) { return new Vector3( this.y * other.z - other.y * this.z, this.z * other.x - other.z * this.x, this.x * other.y - other.x * this.y); } copy() { return new Vector3(this.x, this.y, this.z); } length() { return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z) } normalize() { let len = this.length(); if (len) { this.x /= len; this.y /= len; this.z /= len; } else { this.x = 0; this.y = 0; this.z = 1; } } repr() { return "Vector<" + this.x + ';' + this.y + ';' + this.z + ">" } } 30:T14d5,class Matrix { constructor(data) { for (let row of data) if (row.length !== data.length) throw "bad matrix data"; this.data = data; this.rank = data.length; } copy() { const rank = this.rank; let r = new Matrix([]); r.rank = rank; let src = this.data; r.data = new Array(rank); let dst = r.data; for (let i = 0; i < rank; ++i) { dst[i] = new Array(rank); for (let j = 0; j < rank; ++j) dst[i][j] = src[i][j]; } return r; } static identity(rank) { let m = new Matrix([]); let data = Array(rank); m.data = data; for (let i = 0; i < rank; ++i) { data[i] = new Array(rank); for (let j = 0; j < rank; ++j) data[i][j] = 0; data[i][i] = 1; } m.rank = rank; return m; } inverted() { const epsilon = .01; const rank = this.rank; let i; let j; let r = Matrix.identity(this.rank); let M = this.copy().data; let I = r.data; // Gaussian Elimination // (1) 'augment' the matrix (left) by the identity (on the right) // (2) Turn the matrix on the left into the identity by elemetry row ops // (3) The matrix on the right is the inverse (was the identity matrix) let swap_rows = (i, j) => { let tmp = M[i]; M[i] = M[j]; M[j] = tmp; tmp = I[i]; I[i] = I[j]; I[j] = tmp; }; let div_row = (i, c) => { for (j = 0; j < rank; ++j) { M[i][j] /= c; I[i][j] /= c; } }; let sub_row = (i, k, c) => { for (j = 0; j < rank; ++j) { M[i][j] -= M[k][j] * c; I[i][j] -= I[k][j] * c; } }; for (let m = 0; m < rank; ++m) { if (Math.abs(M[m][m]) < epsilon) { for (i = m + 1; i < rank; ++i) { if (Math.abs(M[i][m]) > epsilon) { swap_rows(m, i); break; } } if (i < 0) throw "invert matrix error"; } div_row(m, M[m][m]); for (i = m + 1; i < rank; ++i) { if (M[i][m] !== 0) { sub_row(i, m, M[i][m] / M[m][m]) } } } // at this point M is triangle matrix for (let m = rank - 1; m >= 0; --m) { div_row(m, M[m][m]); for (i = 0; i < m; ++i) { if (M[i][m] !== 0) { sub_row(i, m, M[i][m] / M[m][m]) } } } return r; } static rotation(axis, point, theta) { if (theta === undefined) theta = axis.length(); axis.normalize(); let w = new Matrix([ [0, -axis.z, axis.y], [axis.z, 0, -axis.x], [-axis.y, axis.x, 0]]); let w2 = w.mul_left(w); w.mul_c(Math.sin(theta)); w2.mul_c(1 - Math.cos(theta)); w = w.data; w2 = w2.data; let r = new Matrix([ [1 + w[0][0] + w2[0][0], w[0][1] + w2[0][1], w[0][2] + w2[0][2], 0], [w[1][0] + w2[1][0], w[1][1] + w2[1][1] + 1, w[1][2] + w2[1][2], 0], [w[2][0] + w2[2][0], w[2][1] + w2[2][1], w[2][2] + w2[2][2] + 1, 0], [0, 0, 0, 1], ]); r = r.mul_left(Matrix.translation(point)); r = r.mul_right(Matrix.translation(point.inverted())); return (r); } rotate(axis, theta) { this.data = this.mul_left(Matrix.rotation(axis, new Vector3(this.data[0][3], this.data[1][3], this.data[2][3]), theta)).data; } translate(v) { this.data[0][3] += v.x; this.data[1][3] += v.y; this.data[2][3] += v.z; } set_translate(v) { this.data[0][3] = v.x; this.data[1][3] = v.y; this.data[2][3] = v.z; } static translation(v) { let r = Matrix.identity(4); r.data[0][3] = v.x; r.data[1][3] = v.y; r.data[2][3] = v.z; return r; } mul_c(c) { for (let i = 0; i < this.rank; ++i) for (let j = 0; j < this.rank; ++j) this.data[i][j] *= c; } mul_left(other) { const rank = this.rank; let r = Matrix.identity(rank); let m = r.data; let b = this.data; let a = other.data; for (let i = 0; i < rank; ++i) { for (let j = 0; j < rank; ++j) { m[i][j] = 0; for (let k = 0; k < rank; k++) { m[i][j] += a[i][k] * b[k][j]; } } } return r; } mul_right(other) { return other.mul_left(this); } repr() { let r = "Matrix ["; for (let i = 0; i < this.rank; ++i) { r += "\n"; for (let j = 0; j < this.rank; ++j) { r += Math.round(this.data[i][j] * 100) / 100 + "\t"; } } return r; } } 31:T45d,class Perspective extends Isometric { constructor(n, w, h, f) { super(); if (h === undefined) h = w; if (f === undefined) f = 1000 * n; this.n = n; this.f = f; this.r = w / 2; this.l = -w / 2; this.t = h / 2; this.b = -h / 2; let l = this.l; let r = this.r; let b = this.b; let t = this.t; this.m = new Matrix([ [2 * n / (r - l), 0, (r + l) / (r - l), 0], [0, 2 * n / (t - b), (t + b) / (t - b), 0], [0, 0, -(f + n) / (f - n), -2 * f * n / (f - n)], [0, 0, -1, 0]]); } proj_vertex(v) { if (0) { let n = this.n; let f = this.f; let w = this.r - this.l; let h = this.t - this.b; let c = 2 * n * (f - n) / (v.z * (f + n) - 2 * n * f); v.x *= c / w; v.y *= c / h; } else { v.transform4(this.m); //from world coords to eye coords v.x *= -1; v.y *= -1; } v.z = 0; } } 32:Te58,class Camera { constructor(x, y, projection, screen) { this.m = Matrix.identity(4); this.projection = projection; this.m.translate(new Vector3(x, y, 0)); this.m_inv = this.m.inverted(); this.screen = screen; } update_inv() { this.m_inv = this.m.inverted(); } draw(sketch) { this.draw_frame(sketch); this.draw_fov(sketch); } draw_fov(sketch) { let p0 = new Vector3(0, 0); let pl = new Vector3(this.projection.l, this.projection.n); let pr = new Vector3(this.projection.r, this.projection.n); for (let p of [p0, pl, pr]) { p.scale(this.screen.w); p.transform(this.m); } sketch.line(p0.x, p0.y, pl.x, pl.y); sketch.line(p0.x, p0.y, pr.x, pr.y); } draw_frame(sketch) { let w_2 = this.screen.w / 2; sketch.strokeWeight(.5); sketch.stroke(200, 0, 0); let p1 = new Vector3(-w_2, 0); let p2 = new Vector3(w_2, 0); p1.transform(this.m); p2.transform(this.m); sketch.line(p1.x, p1.y, p2.x, p2.y); p1 = new Vector3(-w_2, 0); p2 = new Vector3(-w_2, 5); p1.transform(this.m); p2.transform(this.m); sketch.line(p1.x, p1.y, p2.x, p2.y); p1 = new Vector3(w_2, 0); p2 = new Vector3(w_2, 5); p1.transform(this.m); p2.transform(this.m); sketch.line(p1.x, p1.y, p2.x, p2.y); } draw_projection(sketch, mesh) { sketch.push(); sketch.drawingContext.setLineDash([5, 5]); sketch.strokeWeight(.3); sketch.stroke(0, 0, 200); for (let v of mesh.vertices) { v = v.transformed(mesh.m); let p = v.transformed(this.m_inv); // now we have p relative to the screen, in other words p contains screen coordinates p.transform(basis_swap_yz); this.projection.proj_vertex(p); // project along z p.x *= this.screen.w / 2; p.transform(basis_swap_yz); p.transform(this.m); // draw projected vertices on the screen sketch.line(v.x, v.y, p.x, p.y); } sketch.pop(); } draw_on_screen(sketch, mesh) { let s = this.screen; let front_edges = new PairSet(mesh.vertices.length, true); let back_edges = new PairSet(mesh.vertices.length, true); let edges_set; let m = mat_mul(basis_swap_yz, this.m_inv, mesh.m); // from world to camera coords let vertices = []; for (let v of mesh.vertices) { v = v.transformed(m); this.projection.proj_vertex(v); vertices.push(v); } s.draw(sketch); sketch.push(); sketch.stroke(0, 200, 0); for (let face of mesh.faces) { let v1 = vertices[face[0]]; let v2 = vertices[face[1]]; let v3 = vertices[face[2]]; let backface = (v1.minus(v2).cross(v2.minus(v3)).z > 0); // because projection gives left-handed basis if (backface) { sketch.strokeWeight(.3); edges_set = back_edges; } else { sketch.strokeWeight(2); edges_set = front_edges; } let len = face.length; for (let k = 0; k < len; ++k) { let i = face[k]; let j = face[(k + 1) % len]; if (edges_set.has(i, j)) continue; edges_set.add(i, j); s.line(sketch, vertices[i], vertices[j]); } } sketch.pop(); } } 33:T2453,class Mesh { constructor(x, y) { this.m = Matrix.identity(4); this.vertices = []; this.faces = []; this.m.translate(new Vector3(x, y, 0)); } scale(c) { for (let v of this.vertices) v.scale(c); } static square(x, y, size) { let mesh = new Mesh(x, y); mesh.vertices.push(new Vector3(-size, -size, 0)); mesh.vertices.push(new Vector3(size, -size, 0)); mesh.vertices.push(new Vector3(size, size, 0)); mesh.vertices.push(new Vector3(-size, size, 0)); mesh.add_face(0, 1, 2, 3); return mesh; } static tetrahedron(x, y, size, t) { let mesh = new Mesh(x, y); mesh.vertices.push(new Vector3(Math.sqrt(8 / 9), 0, -1 / 3)); mesh.vertices.push(new Vector3(-Math.sqrt(2 / 9), Math.sqrt(2 / 3), -1 / 3)); mesh.vertices.push(new Vector3(-Math.sqrt(2 / 9), -Math.sqrt(2 / 3), -1 / 3)); mesh.vertices.push(new Vector3(0, 0, 1)); mesh.add_face([1, 0, 2], t); mesh.add_face([3, 0, 1], t); mesh.add_face([2, 0, 3], t); mesh.add_face([3, 1, 2], t); mesh.scale(size); mesh.scale(1.6); return mesh; } static octahedron(x, y, size, t) { let mesh = new Mesh(x, y); mesh.vertices.push(new Vector3(0, 0, -1)); mesh.vertices.push(new Vector3(0, 0, 1)); mesh.vertices.push(new Vector3(0, -1, 0)); mesh.vertices.push(new Vector3(0, 1, 0)); mesh.vertices.push(new Vector3(-1, 0, 0)); mesh.vertices.push(new Vector3(1, 0, 0)); mesh.add_face([2, 0, 5], t); mesh.add_face([5, 0, 3], t); mesh.add_face([3, 0, 4], t); mesh.add_face([4, 0, 2], t); mesh.add_face([1, 2, 5], t); mesh.add_face([1, 5, 3], t); mesh.add_face([1, 3, 4], t); mesh.add_face([1, 4, 2], t); mesh.scale(size); mesh.scale(1.4); return mesh; } static icosahedron(x, y, size, t) { let mesh = new Mesh(x, y); let a = (1.0 + Math.sqrt(5.0)) / 2.0; mesh.vertices.push(new Vector3(-1, a, 0)); mesh.vertices.push(new Vector3(1, a, 0)); mesh.vertices.push(new Vector3(-1, -a, 0)); mesh.vertices.push(new Vector3(1, -a, 0)); mesh.vertices.push(new Vector3(0, -1, a)); mesh.vertices.push(new Vector3(0, 1, a)); mesh.vertices.push(new Vector3(0, -1, -a)); mesh.vertices.push(new Vector3(0, 1, -a)); mesh.vertices.push(new Vector3(a, 0, -1)); mesh.vertices.push(new Vector3(a, 0, 1)); mesh.vertices.push(new Vector3(-a, 0, -1)); mesh.vertices.push(new Vector3(-a, 0, 1)); // 5 faces around point 0 mesh.add_face([0, 11, 5], t); mesh.add_face([0, 5, 1], t); mesh.add_face([0, 1, 7], t); mesh.add_face([0, 7, 10], t); mesh.add_face([0, 10, 11], t); // 5 adjacent faces mesh.add_face([1, 5, 9], t); mesh.add_face([5, 11, 4], t); mesh.add_face([11, 10, 2], t); mesh.add_face([10, 7, 6], t); mesh.add_face([7, 1, 8], t); // 5 faces around point 3 mesh.add_face([3, 9, 4], t); mesh.add_face([3, 4, 2], t); mesh.add_face([3, 2, 6], t); mesh.add_face([3, 6, 8], t); mesh.add_face([3, 8, 9], t); // 5 adjacent faces mesh.add_face([4, 9, 5], t); mesh.add_face([2, 4, 11], t); mesh.add_face([6, 2, 10], t); mesh.add_face([8, 6, 7], t); mesh.add_face([9, 8, 1], t); mesh.scale(size); mesh.scale(0.7); return mesh; } static dodecahedron(x, y, size) { let mesh = new Mesh(x, y); let phi = (1 + Math.sqrt(5)) / 2; mesh.vertices.push(new Vector3(-1, -1, -1)); mesh.vertices.push(new Vector3(1, -1, -1)); mesh.vertices.push(new Vector3(-1, 1, -1)); mesh.vertices.push(new Vector3(1, 1, -1)); mesh.vertices.push(new Vector3(-1, -1, 1)); mesh.vertices.push(new Vector3(1, -1, 1)); mesh.vertices.push(new Vector3(-1, 1, 1)); mesh.vertices.push(new Vector3(1, 1, 1)); mesh.vertices.push(new Vector3(0, -1 / phi, -phi)); mesh.vertices.push(new Vector3(0, -1 / phi, phi)); mesh.vertices.push(new Vector3(0, 1 / phi, -phi)); mesh.vertices.push(new Vector3(0, 1 / phi, phi)); mesh.vertices.push(new Vector3(-1 / phi, -phi, 0)); mesh.vertices.push(new Vector3(-1 / phi, phi, 0)); mesh.vertices.push(new Vector3(1 / phi, -phi, 0)); mesh.vertices.push(new Vector3(1 / phi, phi, 0)); mesh.vertices.push(new Vector3(-phi, 0, -1 / phi)); mesh.vertices.push(new Vector3(phi, 0, -1 / phi)); mesh.vertices.push(new Vector3(-phi, 0, 1 / phi)); mesh.vertices.push(new Vector3(phi, 0, 1 / phi)); mesh.add_face([15, 13, 6, 11, 7]); mesh.add_face([13, 15, 3, 10, 2]); mesh.add_face([14, 12, 0, 8, 1]); mesh.add_face([12, 14, 5, 9, 4]); mesh.add_face([18, 4, 9, 11, 6]); mesh.add_face([16, 2, 10, 8, 0]); mesh.add_face([11, 9, 5, 19, 7]); mesh.add_face([8, 10, 3, 17, 1]); mesh.add_face([16, 18, 6, 13, 2]); mesh.add_face([18, 16, 0, 12, 4]); mesh.add_face([17, 19, 5, 14, 1]); mesh.add_face([19, 17, 3, 15, 7]); mesh.scale(size); mesh.scale(0.7); return mesh; } static cube(x, y, size, t) { let mesh = new Mesh(x, y); mesh.vertices.push(new Vector3(-1, -1, -1)); mesh.vertices.push(new Vector3(1, -1, -1)); mesh.vertices.push(new Vector3(1, 1, -1)); mesh.vertices.push(new Vector3(-1, 1, -1)); mesh.vertices.push(new Vector3(-1, -1, 1)); mesh.vertices.push(new Vector3(1, -1, 1)); mesh.vertices.push(new Vector3(1, 1, 1)); mesh.vertices.push(new Vector3(-1, 1, 1)); mesh.add_face([3, 2, 1, 0], t); mesh.add_face([4, 5, 6, 7], t); mesh.add_face([1, 5, 4, 0], t); mesh.add_face([2, 6, 5, 1], t); mesh.add_face([0, 4, 7, 3], t); mesh.add_face([7, 6, 2, 3], t); mesh.scale(size); mesh.scale(0.8); return mesh; } add_face(indices, tessellation) { if (tessellation === undefined) tessellation = 0; let radius = this.vertices[0].length(); if (tessellation <= 0 || (indices.length !== 3 && indices.length !== 4)) return this.faces.push(indices); if (indices.length === 3) { let a = indices[0]; let b = indices[1]; let c = indices[2]; let ab = this.vertices.push(this.vertices[a].plus(this.vertices[b])) - 1; let bc = this.vertices.push(this.vertices[b].plus(this.vertices[c])) - 1; let ca = this.vertices.push(this.vertices[c].plus(this.vertices[a])) - 1; for (let i of [ab, bc, ca]) { this.vertices[i].normalize(); this.vertices[i].scale(radius); } this.add_face([a, ab, ca], tessellation - 1); this.add_face([ab, b, bc], tessellation - 1); this.add_face([ca, bc, c], tessellation - 1); this.add_face([ab, bc, ca], tessellation - 1); } else if (indices.length === 4) { let a = indices[0]; let b = indices[1]; let c = indices[2]; let d = indices[3]; let ab = this.vertices.push(this.vertices[a].plus(this.vertices[b])) - 1; let bc = this.vertices.push(this.vertices[b].plus(this.vertices[c])) - 1; let cd = this.vertices.push(this.vertices[c].plus(this.vertices[d])) - 1; let da = this.vertices.push(this.vertices[d].plus(this.vertices[a])) - 1; let e = this.vertices.push( this.vertices[a] .plus(this.vertices[b]) .plus(this.vertices[c]) .plus(this.vertices[d]) ) - 1; for (let i of [ab, bc, cd, da, e]) { this.vertices[i].normalize(); this.vertices[i].scale(radius); } this.add_face([a, ab, e, da], tessellation - 1); this.add_face([ab, b, bc, e], tessellation - 1); this.add_face([e, bc, c, cd], tessellation - 1); this.add_face([da, e, cd, d], tessellation - 1); } } * edges() { let edges = new PairSet(this.vertices.length, true); for (let f of this.faces) { let len = f.length; for (let i = 0; i < len; ++i) { let f1 = f[i]; let f2 = f[(i + 1) % len]; if (edges.has(f1, f2)) continue; edges.add(f1, f2); yield [f1, f2]; } } } draw(sketch) { sketch.stroke(0); sketch.strokeWeight(2); for (let edge of this.edges()) { let p1 = this.vertices[edge[0]].copy(); let p2 = this.vertices[edge[1]].copy(); p1.transform(this.m); p2.transform(this.m); sketch.line(p1.x, p1.y, p2.x, p2.y); } } } 34:[] 2c:{"id":"c9d0f871f5d26a78","slug":"3d-projection-demo","title":"3d projection demo","thumbnail":"fc4486e4f80ad80911b83cb380dbf8e9df96386fda2bfe0a46348fbc11a05bd5","access_level":"public","create_time":"$D2019-10-06T18:58:21.271Z","update_time":"$D2019-10-10T16:50:34.906Z","view_time":null,"first_public_time":"$D2019-10-06T19:31:32.461Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"e00581e38835aedc","login":"rugnar","name":"Rugnar Lodbrok","avatar_url":"https://avatars-next.observableusercontent.com/8bf2375164505845a1955beb2a881f758bd6334e9385af801bf677fb9b007ec0","tier":"starter_2024"},"version":328,"publish_version":328,"role":null,"authored":false,"authors":[{"type":"individual","id":"c76a1474d5df3791","login":"rugnar","name":"Rugnar Lodbrok","avatar_url":"https://avatars-next.observableusercontent.com/8bf2375164505845a1955beb2a881f758bd6334e9385af801bf677fb9b007ec0","tier":null}],"members":[{"type":"individual","id":"c76a1474d5df3791","login":"rugnar","name":"Rugnar Lodbrok","avatar_url":"https://avatars-next.observableusercontent.com/8bf2375164505845a1955beb2a881f758bd6334e9385af801bf677fb9b007ec0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"3d projection demo","cells":[{"id":0,"value":"md`# 3d projection demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof fov = slider({\n min: 1, \n max: 179, \n value: 80,\n step: 1, \n //format: \".0\",\n description: \"FOV; Field of view in degrees\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"viewof rotation_checkbox = checkbox({\n //title: \"Colors\",\n description: \"object rotation\",\n options: [\n { value: \"x\", label: \"X\" },\n { value: \"y\", label: \"Y\" },\n { value: \"z\", label: \"Z\" },\n ],\n value: [\"z\"],\n //submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"viewof perspective_flag = checkbox({\n //title: \"Colors\",\n description: \"perspective projection\",\n options: [\n { value: \"p\", label: \"perspective\" },\n ],\n value: [\"p\"],\n //submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"viewof mesh_type = select({\n description: \"Please pick a mesh\",\n options: [\"tetrahedron\", \"octahedron\", \"cube\", \"icosahedron\", \"dodecahedron\"],\n value: \"cube\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"viewof tessellation = slider({\n min: 0, \n max: 3, \n value: 0,\n step: 1, \n //format: \".0\",\n description: \"tessellation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"function mat_mul() {\n let len = arguments.length;\n if (len < 2)\n throw \"mat_mul takes at least 2 args\";\n let r = arguments[len - 1];\n for (let i = len - 2; i >= 0; --i)\n r = r.mul_left(arguments[i]);\n return r;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"basis_rotate_cw = new Matrix([\n [0, 0, 1, 0],\n [1, 0, 0, 0],\n [0, 1, 0, 0],\n [0, 0, 0, 1]]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"basis_rotate_ccw = new Matrix([\n [0, 1, 0, 0],\n [0, 0, 1, 0],\n [1, 0, 0, 0],\n [0, 0, 0, 1]]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"basis_swap_yz = new Matrix([\n [-1, 0, 0, 0],\n [0, 0, 1, 0],\n [0, 1, 0, 0],\n [0, 0, 0, 1]]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"basis = ({\n i: new Vector3(1, 0, 0),\n j: new Vector3(0, 1, 0),\n k: new Vector3(0, 0, 1),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"class Isometric {\n constructor(w, h) {\n this.w = w;\n this.h = h;\n }\n\n proj_vertex(v) {\n v.x /= this.w/2;\n v.y /= this.h/2;\n v.z = 0;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"class CamScreen {\n constructor(x, y, w, h) {\n this.w = w;\n this.h = h;\n this.m = Matrix.translation(new Vector3(x, y));\n this.m.data[0][0] = this.w / 2;\n this.m.data[1][1] = -this.h / 2;\n this.m.translate(new Vector3(w / 2, h / 2));\n }\n\n draw(sketch) {\n let points = [];\n points.push(new Vector3(-1, -1));\n points.push(new Vector3(1, -1));\n points.push(new Vector3(1, 1));\n points.push(new Vector3(-1, 1));\n sketch.strokeWeight(0);\n sketch.fill(0);\n sketch.beginShape();\n for (let p of points) {\n p.transform(this.m);\n sketch.vertex(p.x, p.y);\n }\n sketch.endShape(sketch.CLOSE);\n }\n\n line(sketch, p1, p2) {\n p1 = p1.copy();\n p2 = p2.copy();\n p1.transform(this.m);\n p2.transform(this.m);\n sketch.line(p1.x, p1.y, p2.x, p2.y);\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"class PairSet {\n constructor(max_value, commutative) {\n this.max_value = max_value;\n this.commutative = commutative;\n this.set = new Set();\n }\n\n add(a, b) {\n let set = this.set;\n let n = this.max_value;\n set.add(a + b * n);\n if (this.commutative)\n set.add(a * n + b)\n }\n\n has(a, b) {\n return this.set.has(a + this.max_value * b);\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"function radians(degrees) {\n return degrees * Math.PI / 180.;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {p5} from \"@tmcw/p5\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"import {slider, checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2d:"$2c:body"