2e:null 2f:["$","title",null,{"children":"Projection of 3D Models using JavaScript and HTML5 Canvas | Kelley van Evert | Observable"}] 34:T644,{ var canvas = DOM.canvas(640, 350); var context = canvas.getContext('2d'); context.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre context.strokeStyle = '#222222'; var modelSize = canvas.width / 4; var scale = modelSize / 2; var cx = 0.001, cy = 0.001; var lx = null, ly = null; var x = 0, y = 0; var decay = 0.98; var move = function(e) { e.preventDefault(); var mouseX = e.pageX; var mouseY = e.pageY; var canvasX = canvas.offsetLeft; var canvasY = canvas.offsetTop; var canvasWidth = canvas.offsetWidth; var canvasHeight = canvas.offsetHeight; var px = (mouseX - canvasX) / canvasWidth; var py = (mouseY - canvasY) / canvasHeight; if (lx && ly) { cx = (px - lx); cy = (py - ly); } lx = px; ly = py; }; var leave = function() { lx = null; ly = null; }; canvas.addEventListener('mousemove', move); canvas.addEventListener('touchmove', move); canvas.addEventListener('mouseleave', leave); canvas.addEventListener('touchend', leave); render(function() { cx *= decay; cy *= decay; x += cx; y += cy; context.clearRect(- canvas.width / 2, - canvas.height / 2, canvas.width, canvas.height); var transform = Mat3.rotationX(-y * 2 * Math.PI) .multiply(Mat3.rotationY(x * 2 * Math.PI)); var fx = function(vertex) { return vertex.x * scale; }; var fy = function(vertex) { return vertex.y * scale; }; drawAxisIndicator(context, transform); for (var i = 0; i < modelPolygons.length; ++i) { drawPolygon2(context, modelPolygons[i], transform, fx, fy); } }); return canvas; }35:T731,Mat3 = { function Mat3(elements) { if (elements.length !== 9) { throw new Error('Mat3 must have 9 elements'); } this.element = function(x, y) { if (x < 0 || x > 2) { throw new Error('x must be in the range 0 -2'); } if (y < 0 || y > 2) { throw new Error('y must be in the range 0 - 2'); } return elements[y * 3 + x]; }; this.multiply = function(other) { if (!(other instanceof Vec3) && !(other instanceof Mat3)) { throw new Error('vector must be either a Vec3 or Mat3'); } if (other instanceof Vec3) { var elements = []; for (var y = 0; y < 3; ++y) { var sum = 0; for (var x = 0; x < 3; ++x) { sum += other.element(x) * this.element(x, y); } elements.push(sum); } return new Vec3(elements); } else { var elements = []; for (var z = 0; z < 3; ++z) { for (var y = 0; y < 3; ++y) { var sum = 0; for (var x = 0; x < 3; ++x) { sum += other.element(y, x) * this.element(x, z); } elements.push(sum); } } return new Mat3(elements); } }; } Mat3.identity = function() { return new Mat3([ 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0 ]); } Mat3.rotationX = function(angle) { var a = Math.cos(angle); var b = Math.sin(angle); return new Mat3([ 1.0, 0.0, 0.0, 0.0, a, -b, 0.0, b, a, ]); }; Mat3.rotationY = function(angle) { var a = Math.cos(angle); var b = Math.sin(angle); return new Mat3([ a, 0.0, b, 0.0, 1.0, 0.0, -b, 0.0, a, ]); }; Mat3.rotationZ = function(angle) { var a = Math.cos(angle); var b = Math.sin(angle); return new Mat3([ a, -b, 0.0, b, a, 0.0, 0.0, 0.0, 1.0, ]); }; Mat3.isometric = function(angle) { var a = Math.cos(angle); var b = Math.sin(angle); return new Mat3([ a, 0, a, -b, 1, b, 0, 0, 0 ]); }; return Mat3; }36:T424, function drawAxisIndicator(context, matrix) { context.save(); context.textBaseline = 'middle'; context.textAlign = 'center'; context.strokeStyle = '#F06'; context.fillStyle = '#F06'; var x = new Vec3([30.0, 0.0, 0.0]).multiply(matrix); context.fillText('X', x.element(0), -1 * x.element(1)); drawLineFromVectors( context, new Vec3([0.0, 0.0, 0.0]).multiply(matrix), new Vec3([20.0, 0.0, 0.0]).multiply(matrix) ); context.strokeStyle = '#F90'; context.fillStyle = '#F90'; var y = new Vec3([0.0, 30.0, 0.0]).multiply(matrix); context.fillText('Y', y.element(0), -1 * y.element(1)); drawLineFromVectors( context, new Vec3([0.0, 0.0, 0.0]).multiply(matrix), new Vec3([0.0, 20.0, 0.0]).multiply(matrix) ); context.strokeStyle = '#09C'; context.fillStyle = '#09C'; var z = new Vec3([0.0, 0.0, 30.0]).multiply(matrix); context.fillText('Z', z.element(0), -1 * z.element(1)); drawLineFromVectors( context, new Vec3([0.0, 0.0, 0.0]).multiply(matrix), new Vec3([0.0, 0.0, 20.0]).multiply(matrix) ); context.restore(); }37:[] 32:{"id":"faeff14d1da6cfe3","slug":"projection-of-3d-models-using-javascript-and-html5-canvas","title":"Projection of 3D Models using JavaScript and HTML5 Canvas","thumbnail":"4d43eca337e89a1a0cb386781bea3a31b3da040f1d5cfb07545e517f58171e45","access_level":"public","create_time":"$D2018-02-23T19:49:44.635Z","update_time":"$D2018-03-11T15:57:33.867Z","view_time":null,"first_public_time":"$D2018-02-23T21:00:03.470Z","has_unpublished_edits":null,"fork":false,"stars":49,"starred":false,"owner":{"type":"team","id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":"starter_2024"},"version":345,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null}],"members":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null,"role":"editor"}],"comments":[{"id":"17d586b8547708f5","reply_to_id":null,"content":"Kelley:\n\nPlease add a name to this cell. I would like to reference it via an import (see: https://observablehq.com/@mariodelgadosr/prerequisites ) \n\nRight now I made a fork of this notebook and am referencing that, but it would be more elegant to simply refer directly to this cell.\n\nGreat work!","create_time":"$D2021-10-25T12:16:56.685Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":37,"collection":{"id":"292860b4abec108d","slug":"visualizations","title":"Visualizations","owner":{"id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert"}},"type":"notebook","body":{"title":"Projection of 3D Models using JavaScript and HTML5 Canvas","cells":[{"id":0,"value":"md`# Projection of 3D Models using JavaScript and HTML5 Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`This is an interactive clone of [Stuart Wakefield](http://stuartwakefield.co.uk/)'s lovely [article](http://stuartw.io/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`Imagine you are in a situation where you have a 3D object you want to display. There are a number of ways this object can be displayed, I'm going to run you through the maths and code to do so.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`## 1. Orthogonal projection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`This is one of the most basic projection techniques, it simply discards one of the axis information to create a two-dimensional representation of one of the faces, a fancy way of saying sides, of the object.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`In the following, very interesting, example of a cube, the z-axis information is discarded to show the front face of the object.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"{\n\tvar canvas = DOM.canvas(640, 300);\n\tvar context = canvas.getContext('2d');\n\n\tcontext.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre\n\tcontext.strokeStyle = '#222222';\n\n\tvar modelSize = canvas.width / 4;\n\tvar scale = modelSize / 2;\n\tvar fx = orthogonal.gx(scale);\n\tvar fy = orthogonal.gy(scale);\n\n\tfor (var i = 0; i < modelPolygons.length; ++i) {\n\t\tdrawPolygon(context, modelPolygons[i], fx, fy);\n\t}\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`I won't show the projections for the other faces, you'll just have to imagine what they would look like.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`First, the vertices. These are the corner points for the cube, at this point there is no sense of scale so all of the values can simply be between -1.0 and 1.0 to keep it simple and easy to scale up later.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"vertices = [\n new Vertex(-1.0, -1.0, -1.0), // Front-Bottom-Left\n new Vertex( 1.0, -1.0, -1.0), // Front-Bottom-Right\n new Vertex(-1.0, -1.0, 1.0), // Rear-Bottom-Left\n new Vertex( 1.0, -1.0, 1.0), // Rear-Bottom-Right\n new Vertex(-1.0, 1.0, -1.0), // Front-Top-Left\n new Vertex( 1.0, 1.0, -1.0), // Front-Top-Right\n new Vertex(-1.0, 1.0, 1.0), // Rear-Top-Left\n new Vertex( 1.0, 1.0, 1.0) // Rear-Top-Right\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`The code for a **Vertex** object:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"class Vertex {\n constructor (x, y, z) {\n this.x = x;\n this.y = y;\n this.z = z;\n }\n \n static transform (vertex, matrix) {\n\treturn Vertex.fromVec3(\n\t\tmatrix.multiply(\n\t\t\tVertex.toVec3(vertex)\n\t\t)\n\t);\n }\n\n static toVec3 (vertex) {\n\treturn new Vec3([vertex.x, vertex.y, vertex.z]);\n }\n\n static fromVec3 (vector) {\n\treturn new Vertex(vector.element(0), vector.element(1), vector.element(2));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`Then, the vertices are mapped into faces.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"faces = [\n new Polygon([vertices[0], vertices[1], vertices[5], vertices[4]]), // Front\n new Polygon([vertices[2], vertices[3], vertices[7], vertices[6]]), // Rear\n new Polygon([vertices[0], vertices[1], vertices[3], vertices[2]]), // Bottom\n new Polygon([vertices[4], vertices[5], vertices[7], vertices[6]]), // Top\n new Polygon([vertices[0], vertices[2], vertices[6], vertices[4]]), // Left\n new Polygon([vertices[1], vertices[3], vertices[7], vertices[5]]) // Right\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`The code for a **Polygon** object:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"function Polygon(vertices) {\n this.count = function() {\n return vertices.length;\n };\n this.vertex = function(i) {\n if (i < 0) {\n throw new Error('Vertex index must be a positive integer')\n }\n if (i >= vertices.length) {\n throw new Error('Vertex index out of bounds');\n }\n return vertices[i];\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`The code that runs the rendering.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"{\n var canvas = DOM.canvas(500, 300);\n var context = canvas.getContext('2d');\n\n // Make the cube half the width of the canvas\n var size = canvas.width / 2;\n\n var fx = function(vertex) {\n return vertex.x * size / 2;\n };\n var fy = function(vertex) {\n return vertex.y * size / 2;\n };\n\n // Makes 0 the center of the canvas\n context.translate(canvas.width / 2, canvas.height / 2);\n\n for (var i = 0; i < faces.length; ++i) {\n drawPolygon(context, faces[i], fx, fy);\n }\n \n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md`The code that draws the polygons.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"function drawPolygon(context, polygon, fx, fy) {\n context.beginPath();\n\n // The -1 * is used to flip the y coordinate as y value increases\n // as you move down the canvas.\n context.moveTo(fx(polygon.vertex(0)), -1 * fy(polygon.vertex(0)));\n for (var i = 1; i < polygon.count(); ++i) {\n context.lineTo(fx(polygon.vertex(i)), -1 * fy(polygon.vertex(i)));\n }\n context.closePath();\n context.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"md`To draw a simple square that was a lot of hard work, this work will pay off later though!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"orthogonal = ({\n gx: (scale) => (vertex) => vertex.x * scale,\n gy: (scale) => (vertex) => vertex.y * scale,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`## 2. Oblique projection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`This projection technique is a bit more complicated than the last example, but not by much. The z-axis is represented, to give a feel for the three-dimensional shape. Oblique projection is one form of parallel projection and mathematically can be described as:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"tex.block`(x,y) = (x + az, y + bz)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`The **a** and **b** terms specify the ratio to apply to **z**, different oblique projections use different ratios.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"oblique = ({\n gx: (scale, zc) => (vertex) => (vertex.x + vertex.z * zc) * scale,\n gy: (scale, zc) => (vertex) => (vertex.y + vertex.z * zc) * scale,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"{\t\t\n\tvar canvas = DOM.canvas(640, 250);\n\tvar context = canvas.getContext('2d');\n\n\tcontext.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre\n\tcontext.strokeStyle = '#222222';\n\n\tvar modelSize = canvas.width / 4;\n\tvar scale = modelSize / 2;\n\tvar c = 0.2;\n\tvar fx = oblique.gx(scale, c);\n\tvar fy = oblique.gy(scale, c);\n\n\tfor (var i = 0; i < modelPolygons.length; ++i) {\n\t\tdrawPolygon(context, modelPolygons[i], fx, fy);\n\t}\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`### 2.1. Cavalier projection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`Cavalier projection is an oblique projection where the z length is preserved.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"tex.block`\\begin{aligned}\n a &= \\cos \\theta \\\\\n b &= \\sin \\theta \\\\\n (x,y) &= (x+az, y+bz) \\\\\n &= (x+ z\\cos \\theta, y+z\\sin \\theta)\n\\end{aligned}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`The following diagram is a Cavalier projection at an angle of 30°.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"{\n\tvar canvas = DOM.canvas(640, 350);\n\tvar context = canvas.getContext('2d');\n\n\tcontext.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre\n\tcontext.strokeStyle = '#222222';\n\n\tvar modelSize = canvas.width / 4;\n\tvar scale = modelSize / 2;\n\tvar angle = Math.PI / 6; // 30 degrees\n\tvar a = Math.cos(angle);\n\tvar b = Math.sin(angle);\n\tvar fx = oblique.gx(scale, a);\n\tvar fy = oblique.gy(scale, b);\n\n\tfor (var i = 0; i < modelPolygons.length; ++i) {\n\t\tdrawPolygon(context, modelPolygons[i], fx, fy);\n\t}\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md`### 2.2. Cabinet projection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"md`The length along the z axis is shortened by a half or two thirds to provide a more realistic representation of the proportions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"tex.block`\\begin{aligned}\n a &= \\frac{1}{2} \\times \\cos \\theta \\\\\n b &= \\frac{1}{2} \\times \\sin \\theta \\\\\n (x,y) &= (x+az, y+bz) \\\\\n &= \\left(x+ z\\left(\\frac{1}{2} \\times\\cos \\theta\\right),\n y+z\\left(\\frac{1}{2} \\times\\sin \\theta\\right)\\right)\n\\end{aligned}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"{\n\tvar canvas = DOM.canvas(640, 300);\n\tvar context = canvas.getContext('2d');\n\n\tcontext.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre\n\tcontext.strokeStyle = '#222222';\n\n\tvar modelSize = canvas.width / 4;\n\tvar scale = modelSize / 2;\n\tvar angle = Math.PI / 6; // 30 degrees\n\tvar a = Math.cos(angle) / 2;\n\tvar b = Math.sin(angle) / 2;\n\tvar fx = oblique.gx(scale, a);\n\tvar fy = oblique.gy(scale, b);\n\n\tfor (var i = 0; i < modelPolygons.length; ++i) {\n\t\tdrawPolygon(context, modelPolygons[i], fx, fy);\n\t}\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"tex.block`\\begin{aligned}\n a &= \\frac{2}{3} \\times \\cos \\theta \\\\\n b &= \\frac{2}{3} \\times \\sin \\theta \\\\\n (x,y) &= (x+az, y+bz) \\\\\n &= \\left(x+ z\\left(\\frac{2}{3} \\times\\cos \\theta\\right),\n y+z\\left(\\frac{2}{3} \\times\\sin \\theta\\right)\\right)\n\\end{aligned}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"{\n\tvar canvas = DOM.canvas(640, 300);\n\tvar context = canvas.getContext('2d');\n\n\tcontext.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre\n\tcontext.strokeStyle = '#222222';\n\n\tvar modelSize = canvas.width / 4;\n\tvar scale = modelSize / 2;\n\tvar angle = Math.PI / 6; // 30 degrees\n\tvar a = Math.cos(angle) * 2 / 3;\n\tvar b = Math.sin(angle) * 2 / 3;\n\tvar fx = oblique.gx(scale, a);\n\tvar fy = oblique.gy(scale, b);\n\n\tfor (var i = 0; i < modelPolygons.length; ++i) {\n\t\tdrawPolygon(context, modelPolygons[i], fx, fy);\n\t}\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"md`## 2. Axonometric projection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`### 2.1. Isometric projection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"tex.block`\\begin{aligned}\n a &= \\cos \\theta \\\\\n b &= \\sin \\theta \\\\\n (x,y) &= (ax+az, y+bz-bx) \\\\\n &= (x\\cos \\theta+ z\\cos \\theta, y+z\\sin \\theta - x\\sin\\theta)\n\\end{aligned}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md`The math expression above expressed in JavaScript:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"isometric = ({\n gx: (scale, c) => (vertex) => (vertex.x * c + vertex.z * c) * scale,\n gy: (scale, c) => (vertex) => (vertex.y + vertex.z * c - vertex.x * c) * scale,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md`The resulting projection:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"{\n\tvar canvas = DOM.canvas(640, 400);\n\tvar context = canvas.getContext('2d');\n\n\tcontext.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre\n\tcontext.strokeStyle = '#222222';\n\n\tvar modelSize = canvas.width / 4;\n\tvar scale = modelSize / 2;\n\tvar angle = Math.PI / 6; // 30 degrees\n\tvar a = Math.cos(angle);\n\tvar b = Math.sin(angle);\n\n\tvar fx = isometric.gx(scale, a);\n\tvar fy = isometric.gy(scale, b);\n\n\tfor (var i = 0; i < modelPolygons.length; ++i) {\n\t\tdrawPolygon(context, modelPolygons[i], fx, fy);\n\t}\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md`Projection can also be expressed more elegantly using a transformation matrix.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"tex.block`P = \\begin{bmatrix}\n \\cos\\theta & 0 & \\cos\\theta \\\\\n -\\sin\\theta & 1 & \\sin\\theta \\\\\n 0 & 0 & 0\n\\end{bmatrix}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md`The matrix is created using a simple Matrix class that supports 3 × 3 matrices:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"md`

{\n  var a = Math.cos(angle);\n  var b = Math.sin(angle);\n  return new Mat3([\n     a, 0, a,\n    -b, 1, b,\n     0, 0, 0\n  ]);\n}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md`The resulting projection:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"{\n\tvar canvas = DOM.canvas(640, 400);\n\tvar context = canvas.getContext('2d');\n\n\tcontext.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre\n\tcontext.strokeStyle = '#222222';\n\n\tvar modelSize = canvas.width / 4;\n\tvar scale = modelSize / 2;\n\tvar angle = Math.PI / 6; // 30 degrees\n\tvar transform = Mat3.isometric(angle);\n\n\tvar fx = function(vertex) { return vertex.x * scale; };\n\tvar fy = function(vertex) { return vertex.y * scale; };\n\n\tfor (var i = 0; i < modelPolygons.length; ++i) {\n\t\tdrawPolygon2(context, modelPolygons[i], transform, fx, fy);\n\t}\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`## 3. Rotation transformations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`Using a matrix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"tex.block`\\begin{aligned}\n R_x(\\theta) &= \\begin{bmatrix}\n 1 & 0 & 0 \\\\\n 0 & \\cos\\theta & -\\sin\\theta \\\\\n 0 & \\sin\\theta & \\cos\\theta\n \\end{bmatrix} \\\\\n R_y(\\theta) &= \\begin{bmatrix}\n \\cos\\theta & 0 & \\sin\\theta \\\\\n 0 & 1 & 0 \\\\\n -\\sin\\theta & 0 & \\cos\\theta\n \\end{bmatrix} \\\\\n R_z(\\theta) &= \\begin{bmatrix}\n \\cos\\theta & -\\sin\\theta & 0 \\\\\n \\sin\\theta & \\cos\\theta & 0\\\\\n 0 & 0 & 1\n \\end{bmatrix}\n\\end{aligned}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"{\n\tvar canvas = DOM.canvas(640, 300);\n\tvar context = canvas.getContext('2d');\n\n\tcontext.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre\n\tcontext.strokeStyle = '#222222';\n\n\tvar modelSize = canvas.width / 4;\n\tvar scale = modelSize / 2;\n\tvar step = 0;\n \n\trender(function() {\n\t\tcontext.clearRect(- canvas.width / 2, - canvas.height / 2, canvas.width, canvas.height);\n\t\tvar transform = Mat3.rotationX(Math.PI * step++ / 128);\n\n\t\tvar fx = function(vertex) {\n\t\t\treturn vertex.x * scale;\n\t\t};\n\n\t\tvar fy = function(vertex) {\n\t\t\treturn vertex.y * scale;\n\t\t};\n\n\t\tdrawAxisIndicator(context, transform);\n\n\t\tfor (var i = 0; i < modelPolygons.length; ++i) {\n\t\t\tdrawPolygon2(context, modelPolygons[i], transform, fx, fy);\n\t\t}\n\t});\n \n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"{\n\tvar canvas = DOM.canvas(640, 300);\n\tvar context = canvas.getContext('2d');\n\n\tcontext.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre\n\tcontext.strokeStyle = '#222222';\n\n\tvar modelSize = canvas.width / 4;\n\tvar scale = modelSize / 2;\n\tvar step = 0;\n\n\trender(function() {\n\t\tcontext.clearRect(- canvas.width / 2, - canvas.height / 2, canvas.width, canvas.height);\n\t\tvar transform = Mat3.rotationY(Math.PI * step++ / 128);\n\n\t\tvar fx = function(vertex) {\n\t\t\treturn vertex.x * scale;\n\t\t};\n\n\t\tvar fy = function(vertex) {\n\t\t\treturn vertex.y * scale;\n\t\t};\n\n\t\tdrawAxisIndicator(context, transform);\n\n\t\tfor (var i = 0; i < modelPolygons.length; ++i) {\n\t\t\tdrawPolygon2(context, modelPolygons[i], transform, fx, fy);\n\t\t}\n\t});\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"{\n\tvar canvas = DOM.canvas(640, 300);\n\tvar context = canvas.getContext('2d');\n\n\tcontext.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre\n\tcontext.strokeStyle = '#222222';\n\n\tvar modelSize = canvas.width / 4;\n\tvar scale = modelSize / 2;\n\tvar step = 0;\n\n\trender(function() {\n\t\tcontext.clearRect(- canvas.width / 2, - canvas.height / 2, canvas.width, canvas.height);\n\t\tvar transform = Mat3.rotationZ(Math.PI * step++ / 128);\n\n\t\tvar fx = function(vertex) {\n\t\t\treturn vertex.x * scale;\n\t\t};\n\n\t\tvar fy = function(vertex) {\n\t\t\treturn vertex.y * scale;\n\t\t};\n\n\t\tdrawAxisIndicator(context, transform);\n\n\t\tfor (var i = 0; i < modelPolygons.length; ++i) {\n\t\t\tdrawPolygon2(context, modelPolygons[i], transform, fx, fy);\n\t\t}\n\t});\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md`Translation around multiple axis can be achieved simply by multiplying rotation matrices together to produce the transform matrix, which creates a traditional, roll, pitch, yaw rotation model.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"tex.block`R_x(\\alpha)R_y(\\beta)R_z(\\gamma)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"{\n\tvar canvas = DOM.canvas(640, 300);\n\tvar context = canvas.getContext('2d');\n\n\tcontext.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre\n\tcontext.strokeStyle = '#222222';\n\n\tvar modelSize = canvas.width / 4;\n\tvar scale = modelSize / 2;\n\tvar step = 0;\n\n\trender(function() {\n\t\tcontext.clearRect(- canvas.width / 2, - canvas.height / 2, canvas.width, canvas.height);\n\t\tvar transform = Mat3.rotationZ(Math.PI * step / 128)\n\t\t\t.multiply(Mat3.rotationY(Math.PI * step / 256))\n\t\t\t.multiply(Mat3.rotationX(Math.PI * step++ / 512));\n\n\t\tvar fx = function(vertex) {\n\t\t\treturn vertex.x * scale;\n\t\t};\n\n\t\tvar fy = function(vertex) {\n\t\t\treturn vertex.y * scale;\n\t\t};\n\n\t\tdrawAxisIndicator(context, transform);\n\n\t\tfor (var i = 0; i < modelPolygons.length; ++i) {\n\t\t\tdrawPolygon2(context, modelPolygons[i], transform, fx, fy);\n\t\t}\n\t});\n \n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"md`## Bibliography\n\n- Carlbrom, I., & Paciorek, J. *[Planar Geometric Projections and Viewing Transformations](http://www.cs.uns.edu.ar/cg/clasespdf/p465carlbom.pdf)*. ACM Computing Surveys, Vol. 10, No. 4. 1978.\n- *Multiple authors*. *[3D projection](http://en.wikipedia.org/wiki/3D_projection)*. Wikipedia. 2014.\n- *Multiple authors*. *[Rotation matrix](http://en.wikipedia.org/wiki/Rotation_matrix)*. Wikipedia. 2014.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`

\n\n### Other stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"modelVerts = vertices","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"modelPolygons = [\n\tnew Polygon([\n\t\tmodelVerts[0],\n\t\tmodelVerts[1],\n\t\tmodelVerts[5],\n\t\tmodelVerts[4]\n\t]), // FRONT\n\tnew Polygon([\n\t\tmodelVerts[2],\n\t\tmodelVerts[3],\n\t\tmodelVerts[7],\n\t\tmodelVerts[6]\n\t]), // REAR\n\tnew Polygon([\n\t\tmodelVerts[0],\n\t\tmodelVerts[1],\n\t\tmodelVerts[3],\n\t\tmodelVerts[2]\n\t]), // BOTTOM\n\tnew Polygon([\n\t\tmodelVerts[4],\n\t\tmodelVerts[5],\n\t\tmodelVerts[7],\n\t\tmodelVerts[6]\n\t]), // TOP\n\tnew Polygon([\n\t\tmodelVerts[0],\n\t\tmodelVerts[2],\n\t\tmodelVerts[6],\n\t\tmodelVerts[4]\n\t]), // LEFT\n\tnew Polygon([\n\t\tmodelVerts[1],\n\t\tmodelVerts[3],\n\t\tmodelVerts[7],\n\t\tmodelVerts[5]\n\t]) // RIGHT\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"function Vec3(elements) {\n\n\tif (elements.length !== 3) {\n\t\tthrow new Error('Vec3 must have 3 elements');\n\t}\n\n\tthis.element = function(i) {\n\n\t\tif (i < 0 || i > 2) {\n\t\t\tthrow new Error('i must be in the range 0 - 2');\n\t\t}\n\n\t\treturn elements[i];\n\t};\n\n\tthis.multiply = function(matrix) {\n\n//\t\tif (!(matrix instanceof Mat3)) {\n//\t\t\tthrow new Error('matrix must be a Mat3');\n//\t\t}\n\n\t\treturn matrix.multiply(this);\n\t}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"function drawPolygon2(context, polygon, matrix, fx, fy) {\n\tcontext.beginPath();\n\tvar vertex = Vertex.transform(polygon.vertex(0), matrix);\n\tcontext.moveTo(fx(vertex), -1 * fy(vertex));\n\tfor (var i = 1; i < polygon.count(); ++i) {\n\t\tvertex = Vertex.transform(polygon.vertex(i), matrix);\n\t\tcontext.lineTo(fx(vertex), -1 * fy(vertex));\n\t}\n\tcontext.closePath();\n\tcontext.stroke();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"\nfunction drawLineFromVectors(context, a, b) {\n\tcontext.beginPath();\n\tcontext.moveTo(a.element(0), -1 * a.element(1));\n\tcontext.lineTo(b.element(0), -1 * b.element(1));\n\tcontext.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"function render (f) {\n var step = () => {\n f();\n window.requestAnimationFrame(step);\n };\n window.requestAnimationFrame(step);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"