24:null 25:["$","title",null,{"children":"Steradian | Harsh Tyagi | Observable"}] 28:{"id":"9e9d84edf5c920f4","slug":"untitled/2","title":"Steradian","thumbnail":"497b871813876009d82dd689090ce10eb67cca3096a3f0d4704290df6e6fe427","access_level":"public","create_time":"$D2020-04-08T20:13:56.418Z","update_time":"$D2020-06-02T21:18:45.729Z","view_time":null,"first_public_time":"$D2020-04-08T21:22:54.403Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"53509e66a4d8ef47","login":"harshtyagi","name":"Harsh Tyagi","avatar_url":"https://avatars-next.observableusercontent.com/d4df336700730e43a2d75c4e5f0aa1903da2b71b4ee95c7bcc590d0a70a42f96","tier":"starter_2024"},"version":169,"publish_version":169,"role":null,"authored":false,"authors":[{"type":"individual","id":"7ad7fb645bf8b903","login":"harshtyagi","name":"Harsh Tyagi","avatar_url":"https://avatars-next.observableusercontent.com/d4df336700730e43a2d75c4e5f0aa1903da2b71b4ee95c7bcc590d0a70a42f96","tier":null}],"editors":[{"type":"individual","id":"7ad7fb645bf8b903","login":"harshtyagi","name":"Harsh Tyagi","avatar_url":"https://avatars-next.observableusercontent.com/d4df336700730e43a2d75c4e5f0aa1903da2b71b4ee95c7bcc590d0a70a42f96","tier":null}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"135d7ea38b7f3e58","slug":"animations","title":"Animations","owner":{"id":"53509e66a4d8ef47","login":"harshtyagi","name":"Harsh Tyagi"}},"type":"notebook"} 2a:T76f,steradian = { var canvas = DOM.canvas(500, 500); var context = canvas.getContext('2d'); context.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre context.strokeStyle = '#444444'; var modelSize = canvas.width / 4; var scale = modelSize / 0.8; var cx = .001, cy = .001; var lx = null, ly = null; var x = 0, y = 0; var decay = 0.95; 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 = (.05*mouseX - canvasX) / canvasWidth; //change mouseX multiplier to change sensitivity of X axis var py = (.05*mouseY - canvasY) / canvasHeight; //change mouseY multiplier to change sensitivity of Y axis if (lx && ly) { cx = (px - lx); cy = (py - ly); } lx = px; ly = py; }; var leave = function() { lx = null; ly = null; }; canvas.addEventListener('click', move); //mousemove canvas.addEventListener('touch', move); // canvas.addEventListener('touchend', leave); // canvas.addEventListener('mousemove', move); // canvas.addEventListener('mouseleave', leave); // canvas.addEventListener("dragstart", move); // canvas.addEventListener("dragend", 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; }2b: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(); }2c: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; }2d:T41b,modelPolygons = [ new Polygon([ modelVerts[0], modelVerts[1], modelVerts[5], modelVerts[4] ]), // FRONT new Polygon([ modelVerts[2], modelVerts[3], modelVerts[7], modelVerts[6] ]), // REAR new Polygon([ modelVerts[0], modelVerts[1], modelVerts[3], modelVerts[2] ]), // BOTTOM new Polygon([ modelVerts[4], modelVerts[5], modelVerts[7], modelVerts[6] ]), // TOP new Polygon([ modelVerts[0], modelVerts[2], modelVerts[6], modelVerts[4] ]), // LEFT new Polygon([ modelVerts[1], modelVerts[3], modelVerts[7], modelVerts[5] ]), // RIGHT new Polygon([ modelVerts[8], modelVerts[9], modelVerts[10], modelVerts[11] ]), // ANGLE FACE new Polygon([ modelVerts[12], modelVerts[8], modelVerts[10] ]), // ANGLE FRONT new Polygon([ modelVerts[12], modelVerts[8], modelVerts[9] ]), // ANGLE TOP new Polygon([ modelVerts[12], modelVerts[9], modelVerts[11] ]), // ANGLE BACK new Polygon([ modelVerts[12], modelVerts[10], modelVerts[11] ]) // ANGLE BOTTOM ]2e:[] 29:{"title":"Steradian","cells":[{"id":84,"value":"md `# Steradian`","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"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":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$2a","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"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"},{"id":8,"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"},{"id":10,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$2c","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"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"},{"id":16,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"modelVerts = vertices","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"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 new Vertex( 0.3, 0.5, -0.1),\n new Vertex( 0.3, 0.5, 0.1),\n new Vertex( 0.5, 0.3, -0.1),\n new Vertex( 0.5, 0.3, 0.1),\n new Vertex( 0, 0, 0)\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"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"},{"id":25,"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 new Polygon([vertices[8], vertices[9], vertices[10], vertices[11]]), //Face of the angle\n new Polygon([vertices[12], vertices[8], vertices[10]]), //Angle side front\n new Polygon([vertices[12], vertices[8], vertices[9]]), //Angle side top\n new Polygon([vertices[12], vertices[9], vertices[11]]), //Angle side back\n new Polygon([vertices[12], vertices[10], vertices[11]]) //Angle side bottom\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"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"}],"files":"$W2e","stdlib":"1","titling":"auto"}