2a:null 2b:["$","title",null,{"children":"Playing with 3D | Max Ott | Observable"}] 30:[] 2e:{"id":"e305e7a9c69d8214","slug":"playing-with-3d","title":"Playing with 3D","thumbnail":"4561d7ad3451f9a0733435b74f55cd8e44c19fe308d3f762ea7f7d53b3fd8aae","access_level":"public","create_time":"$D2018-05-30T10:34:04.199Z","update_time":"$D2021-05-14T04:51:02.553Z","view_time":null,"first_public_time":"$D2018-05-30T12:51:09.876Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7e620f674d45e3eb","login":"maxott","name":"Max Ott","avatar_url":"https://avatars-next.observableusercontent.com/dc5f3355ae49c8cbb820fc5d6a1b5a28463761ffe7cd58042d52c1d875890554","tier":"starter_2024"},"version":690,"publish_version":690,"role":null,"authored":false,"authors":[{"type":"individual","id":"5944e85cfceb3119","login":"maxott","name":"Max Ott","avatar_url":"https://avatars-next.observableusercontent.com/dc5f3355ae49c8cbb820fc5d6a1b5a28463761ffe7cd58042d52c1d875890554","tier":null}],"members":[{"type":"individual","id":"5944e85cfceb3119","login":"maxott","name":"Max Ott","avatar_url":"https://avatars-next.observableusercontent.com/dc5f3355ae49c8cbb820fc5d6a1b5a28463761ffe7cd58042d52c1d875890554","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Playing with 3D","cells":[{"id":0,"value":"md`# Playing with 3D`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"md`Let's start with a simple 2D ${point2DSelector}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"viewof point2DSelector = {\n const categories = [\n {label: 'Rectangle', value: 'rectangle'},\n {label: 'Circle', value: 'circle'},\n //{label: 'Axis', value: 'axis'}\n ]\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"chart1 = makeScaledChart(points2D)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"md`## Stretch\n\nLet's stretch the above rectangle in the x axis by ${stretchXby} using\nthe transformation matrix:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"show2Matrix([['k', 0, 0],[0, 1, 0], [0,0,1]], stretch2D(stretchXby))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"viewof stretchSlider = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"chart2 = showTransformation(stretch2D(stretchXby))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"md`## Squeeze\n\nSame for squeezing with:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"show2Matrix([['k', 0, 0],['0', '1/k', 0], [0,0,1]], squeeze2D(squeezeXby))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"viewof squeezeSlider = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"chartSqeeze = showTransformation(squeeze2D(squeezeXby))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"md`## Rotate\n\nWith a bit of trigonometry we can now rotate the\nrectangle by \n${Math.round(180 / Math.PI * rotateBy)} degree.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":201,"value":"show2Matrix([['\\\\cos \\\\theta', '\\\\sin \\\\theta', 0],\n ['- \\\\sin \\\\theta', '\\\\cos \\\\theta', 0],\n [0,0,1]], rotate2D(rotateBy))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":203,"value":"viewof rotateSlider = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"chartRotate = showTransformation(rotate2D(rotateBy))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"md`## Combining Operations\n\nAs we have been defining the transformations using \n[homogeneous coordinates](https://en.wikipedia.org/wiki/Homogeneous_coordinates)\nwe can combine effects by simply multiplying the transformation matrices.\n\nIn the following graph we combine the above stretch and rotate:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"show2Matrix([['k_{stretch} * \\\\cos \\\\theta', '\\\\sin \\\\theta', 0],\n ['-k_{stretch} * \\\\sin \\\\theta', '\\\\cos \\\\theta', 0],\n [0,0,1]], tmMul(rotate2D(rotateBy), stretch2D(stretchXby)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"chartComb = {\n const tm = tmMul(rotate2D(rotateBy), stretch2D(stretchXby));\n return showTransformation(tm);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":408,"value":"md`## Now to 3d`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":220,"value":"viewof point3DSelector = {\n const categories = [\n {label: 'Axis', value: 'axis'}\n ]\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":515,"value":"viewof xRot3D = slider({\n min: 0, \n max: 2 * Math.PI,\n title: \"X Rotation\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":512,"value":"viewof yRot3D = slider({\n min: 0, \n max: 2 * Math.PI,\n title: \"Y Rotation\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":639,"value":"viewof zRot3D = slider({\n min: 0, \n max: 2 * Math.PI,\n title: \"Z Rotation\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":554,"value":"viewof cameraD = slider({\n min: -10, \n max: 10,\n title: \"Camera Projection\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":481,"value":"{ \n const r1M = tmMul(rotateX3D(xRot3D), rotateY3D(yRot3D));\n const rotateM = tmMul(r1M, rotateZ3D(zRot3D));\n return showRotated3d(rotateM, cameraD);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":610,"value":"{\n function normalize2D(v) {\n const s = 1.0 / v[2];\n return [s * v[0], s * v[1], s * v[2]];\n }\n const r1M = tmMul(rotateX3D(xRot3D), rotateY3D(yRot3D));\n const rotateM = tmMul(r1M, rotateZ3D(zRot3D));\n const cameraM = cameraMatrix(cameraD);\n const p = points3D\n .map((v) => matrixMul(rotateM, v))\n // .map((v) => matrixMul(cameraM, v))\n // .map(normalize2D)\n ;\n return showMatrix(p);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":474,"value":"md`## Support Functions`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"stretchXby = stretchSlider / 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"stretch2D = k => [[k, 0, 0], [0, 1, 0], [0, 0, 1]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"squeezeXby = squeezeSlider / 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":205,"value":"rotateBy = rotateSlider / 100 * 2 * Math.PI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":155,"value":"squeeze2D = (k) => [[k, 0, 0], [0, 1 / k, 0], [0, 0, 1]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"rotate2D = (a) => [[Math.cos(a), Math.sin(a), 0], [-1 * Math.sin(a), Math.cos(a), 0], [0, 0, 1]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"function matrixMul(m, v) {\n const res = [];\n const r = m.length;\n const c = v.length;\n var i, j;\n for (i = 0; i < r; i++) {\n const rv = m[i];\n var e = 0;\n for (j = 0; j < c; j++) {\n e += rv[j] * v[j];\n }\n res.push(e);\n }\n return res;\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":248,"value":"function tmMul(m1, m2) {\n const tm = transposeM(m2);\n const res = [];\n const l = m1.length;\n var i;\n for (i = 0; i < l; i++) {\n const v = matrixMul(m1, tm[i]);\n res.push(v);\n }\n return transposeM(res);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"matrixMul(cameraMatrix(3), [1, 1, 1, 1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":432,"value":"function cameraMatrix(d) {\n return [[1, 0, 0, 0], [0, 1, 0, 0], [0, 0, -1.0 / d, 0]]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"function transposeM(m) {\n const l = m.length;\n const res = [];\n var i, j;\n for (i = 0; i < l; i++) {\n const r = [];\n for (j = 0; j < l; j++) {\n r.push(m[j][i]);\n }\n res.push(r);\n }\n return res; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"rotateZ3D = (a) => [[Math.cos(a), -1 * Math.sin(a), 0, 0], [Math.sin(a), Math.cos(a), 0, 0], [0, 0, 1, 0], [0, 0, 0, 1]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":492,"value":"rotateX3D = (a) => [[1, 0, 0, 0], [0, Math.cos(a), -1 * Math.sin(a), 0], [0, Math.sin(a), Math.cos(a), 0], [0, 0, 0, 1]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":570,"value":"rotateY3D = (a) => [[Math.cos(a), 0, Math.sin(a), 0], [0, 1, 0, 0], [-1 * Math.sin(a), 0, Math.cos(a), 0], [0, 0, 0, 1]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":267,"value":"transposeM([[1,0,0],[0,1,0],[0,0,1]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"tmMul([[1,2,0],[0,1,0],[0,0,1]], [[1,0,0],[0,1,0],[0,0,1]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"matrixMul([[1,2,0],[0,1,0],[0,0,1]], [0,1,0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"function makeChart(points, opts) {\n const svg = d3.select(DOM.svg(opts.width || width, opts.height));\n const node = svg.append(\"g\")\n .attr(\"class\", \"nodes\")\n .selectAll(\"circle\")\n .data(points)\n .enter().append(\"circle\")\n .attr(\"cx\", d => opts.scale * d[0] / d[2] + opts.xOffset)\n .attr(\"cy\", d => -1 * opts.scale * d[1] / d[2] + opts.yOffset)\n .attr(\"r\", opts.radius)\n .attr(\"fill\", (d, i) => i == 0 ? \"#ffad16\" : '#4169E1')\n .attr(\"stroke\", \"#333333\")\n .attr(\"stroke-width\", 1)\n .style(\"cursor\", \"pointer\")\n .append(\"svg:title\")\n .text(d => `${d[0].toFixed(2)} @ ${d[1].toFixed(2)}`)\n ;\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"function makeScaledChart(points, height = 200) {\n const radius = 5;\n const border = 30;\n const w = Math.min(width, 2 * height);\n const opts = {\n height, width: w,\n radius,\n scale: (Math.min(w, height) - 2 * border - 4 * radius) / 2,\n xOffset: w / 2,\n yOffset: height / 2,\n }\n return makeChart(points, opts);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":317,"value":"points2D = {\n switch(point2DSelector) {\n case 'circle': return makeCircle(14);\n case 'rectangle': return makeRect(5);\n case 'axis': return makeAxis(5);\n default: return makeRect(5);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":404,"value":"points3D = {\n switch(point2DSelector) {\n case 'axis': return makeAxis(5);\n default: return makeAxis(5);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":239,"value":"function showTransformation(tm) {\n const pa = points2D.map(p => matrixMul(tm, p));\n return makeScaledChart(pa);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"rectPoints = makeRect(5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"function makeRect(aside) {\n var a = [];\n var offset = (aside - 1) / 2.0;\n var x, y;\n \n function p(x, y) {\n a.push([\n (x - offset) / offset,\n (y -offset) / offset,\n 1,\n ]);\n }\n \n for (y = 0; y < aside; y++) {\n if (y == 0 || y == aside - 1) {\n for (x = 0; x < aside; x++) {\n p(x, y);\n }\n } else {\n p(0, y);\n p(aside - 1, y);\n }\n }\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":313,"value":"function makeCircle(count) {\n var circle = [];\n var i;\n var inc = 2 * Math.PI / count;\n var angle = 0;\n for (i = 0; i < count; i++, angle += inc) {\n circle.push([\n Math.sin(angle),\n Math.cos(angle),\n 1,\n ]);\n }\n return circle;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"function makeAxis(aside) {\n var a = [];\n var offset = (aside - 1) / 2.0;\n var d, b, p;\n const scale = 1.0 / aside;\n \n function add(x, y, z) {\n a.push([x * scale, y * scale, z * scale + 0.5, 1]);\n // a.push([\n // (x - offset) / offset,\n // (y - offset) / offset,\n // (z - offset) / offset,\n // 1\n // ]);\n }\n\n for (d = 0; d < 3; d++) {\n for (b = 0; b < aside; b++) {\n p = [0, 0, 0];\n p[d] = 0.5 * b;\n add(...p);\n }\n }\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":501,"value":"function showRotated3d(rotateM, cameraD) {\n const cameraM = cameraMatrix(cameraD);\n const p = points3D\n .map((v) => matrixMul(rotateM, v))\n .map((v) => matrixMul(cameraM, v));\n return makeScaledChart(p)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"function showMatrix(m) {\n const tm = m.map(r => r.map(n => n.toFixed(3)).join(' & ')).join(' \\\\\\\\ ')\n return tex`\n \\begin{bmatrix} \n ${tm}\n \\end{bmatrix}\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":301,"value":"fixedString = (o) => isFloat(o) ? o.toFixed(3) : o","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":185,"value":"function show2Matrix(m1, m2) {\n const tm1 = m1.map(r => r.map(fixedString).join(' & ')).join(' \\\\\\\\ ')\n const tm2 = m2.map(r => r.map(fixedString).join(' & ')).join(' \\\\\\\\ ')\n return tex`\n \\begin{bmatrix} \n ${tm1}\n \\end{bmatrix}\n \\begin{bmatrix} \n ${tm2}\n \\end{bmatrix}\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":306,"value":"isFloat = (n) => (! isNaN(n) && Number(n) === n && n % 1 !== 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"