2b:null 2c:["$","title",null,{"children":"3D Origami w/ force layouting? | Kelley van Evert | Observable"}] 31:T867,md`So, the idea is to model the Dragon's Egg (see photo, my work btw ◔⌣◔). I don't really know if I want to, or even could, get my head around the specifics of the geometry involved. I did so earlier for a small sub-problem (see my [Origami with THREE.js](https://beta.observablehq.com/@kelleyvanevert/origami-with-three-js) notebook), but this gets really involved and there will be lots of ${tex`\sin`} and ${tex`\cos`} :( But especially for more complicated origami, the paper can 'globally/softly' fold multiple ways, which I think is really complex, mathematically speaking. Moreover, it's highly specific to the origami structure you're making, and I'd like it to be just a bit more general. One option, that struck me recently, was to 'kinda put the corners & creases in about the right position', and then just let a 3D force layout do the rest. This would definitely work for the structure above, because an initial, approximate arrangement for the corners & creases is easily given: just a single trigonometric function to place coordinates on a perfect sphere, and then some logic to place the corners & creases. ** Status: ** - The data's all there, you can retrieve d3 force layout compliant data with: { nodes, links } = egg(NX, NY) ..where NX and NY are the dimensions of your egg (the amount of 'pockets', horizontally and vertically). - There's a simulation in place, and I can get it to do approximately what it's supposed to do, but it's not really accurate yet. Tweaking the parameters is a bitch. The vertical top/bottom nose shape of the simulated egg is correct though, I know from physical experience. I'm not entirely sure that it should necessarily deform into a 'flatter' structure as in the photo --- in my experience the size of the holes at the top and bottom inversely relate to the degree in which the structure wants to be flat, but the paper has no preference of its own. I guess the way to put such a preference in the simulation would be to 'knot' the holes together as well. BTW, the dragon egg's links have proportional lengths of ${tex`1 : \sqrt{2} : 2`}.

`32:T960,viewof sim = { const { nodes, links, origLinks } = simdata; const f = d3.format(".1f"); const D = 40; const err = links => { var current = links.map(({ source, target }) => Math.sqrt(sdist(source, target))/D); var target = links.map(link => link.len); var off = d3.mean(target) - d3.mean(current); return target.map((t, i) => Math.abs(t - current[i])).reduce((a,b) => a+b, 0); }; const simulation = d3_3d_force.forceSimulation(nodes, 3).velocityDecay(.9).alpha(1.5).alphaDecay(0.01) .force("link", d3_3d_force.forceLink(links).distance(o => D * o.len).iterations(20).strength(.6)); const cats = [['h', 'v'], ['push'], ['h', 'v', 'push'], ['h'], ['v']]; function lines (links, cats = ['h', 'v']) { return links.map((link, i) => { if (cats.indexOf(link.cat) < 0) return false; var a = link.source; var b = link.target; var line = [[a.x, a.y, a.z], [b.x, b.y, b.z]]; var off = link.len - Math.sqrt(sdist(a, b))/D; // +- (-1 .. 1) line.stroke = d3.interpolateViridis((off+1)/2); return line; }).filter(line => !!line); } const svg = draw(lines(links), { S: 440 }); const svg2 = draw(lines(origLinks), { S: 440 }); const Espan = DOM.element('span'); const root = html`

Simulated (E: ${Espan})

${svg}

Unsimulated (E: ${f(err(origLinks))})

${svg2}

`; { var ci = 0; function alternate2 () { draw(lines(origLinks, cats[ci++ % cats.length]), { svg: svg2 }); } svg2.onclick = alternate2; } var it = 0; function manualtick () { simulation.tick(); draw(lines(links), { svg }); root.dispatchEvent(new CustomEvent('input')); Espan.innerHTML = f(err(links)); svg.style.background = simulation.alpha() < simulation.alphaMin() ? '#fff' : '#dbddf9'; if (simulation.alpha() < simulation.alphaMin() || it++ > 1000) { var ci = 0; function alternate () { draw(lines(links, cats[ci++ % cats.length]), { svg }); } svg.onclick = alternate; alternate(); } else { requestAnimationFrame(manualtick); } } setTimeout(manualtick, 50); root.value = simulation; return root; }33:Tdb5,function egg (X, Y, params) { const { tieKnots } = _.defaults(params, { tieKnots: false, // additionally, 'tie' the knots together }); const S = 130; const nodes = []; const mknode = (x, y, rp = 1) => { var r = S * Math.sin(y/Y * Math.PI); var node = { x: rp * r * Math.cos(x/X * 2*Math.PI), y: rp * -S * Math.cos(y/Y * Math.PI), z: rp * r * Math.sin(x/X * 2*Math.PI), }; node.index = nodes.push(node) - 1; return node; }; // In order to create every node just once, we're going to get // quite particular on creating them. // First pass: define the 'blocks' on which the egg is composed, // whereby each block owns but 2 outer nodes (or 4 if in the bottom // row), and 1 pushed-in node. The other nodes are 'retrieved' // from neighbouring nodes. const blocks = []; const getb = (x, y) => blocks[(x+X) % X][y % Y]; for (var x = 0; x < X; x++) { blocks[x] = []; for (var y = 0; y < Y; y++) { blocks[x][y] = { x, y, tl: mknode(x + (y%2)/2, y+.1), cd: mknode(x+.5 + (y%2)/2, y+.4), push: mknode(x+.5 + (y%2)/2, y+.5, .75), get bl () { return this._bl || getb(this.x-((this.y+1)%2), this.y+1).cd; }, get tr () { return getb(this.x+1, this.y).tl; }, get br () { return getb(this.x+1, this.y).bl; }, get cu () { return this._cu || getb(this.x+(this.y%2), this.y+1).tl; }, } if (y == Y-1) { // override if bottom row blocks[x][y]._bl = mknode(x + (y%2)/2, y+.8); blocks[x][y]._cu = mknode(x+.5 + (y%2)/2, y+.7); } } } // Second pass: links (lines) are created, now that we know that // all nodes are indeed available. const links = []; for (var x = 0; x < X; x++) { for (var y = 0; y < Y; y++) { links.push({ cat: 'h', source: getb(x,y).tl, target: getb(x,y).cd, len: 1 }); links.push({ cat: 'h', source: getb(x,y).cd, target: getb(x,y).tr, len: 1 }); links.push({ cat: 'v', source: getb(x,y).tl, target: getb(x,y).bl, len: 2 }); if (y == Y-1) { links.push({ cat: 'h', source: getb(x,y).bl, target: getb(x,y).cu, len: 1 }); links.push({ cat: 'h', source: getb(x,y).cu, target: getb(x,y).br, len: 1 }); } // push in links.push({ cat: 'push', source: getb(x,y).tl, target: getb(x,y).push, len: Math.sqrt(2) }); links.push({ cat: 'push', source: getb(x,y).cd, target: getb(x,y).push, len: 1 }); links.push({ cat: 'push', source: getb(x,y).tr, target: getb(x,y).push, len: Math.sqrt(2) }); links.push({ cat: 'push', source: getb(x,y).br, target: getb(x,y).push, len: Math.sqrt(2) }); links.push({ cat: 'push', source: getb(x,y).cu, target: getb(x,y).push, len: 1 }); links.push({ cat: 'push', source: getb(x,y).bl, target: getb(x,y).push, len: Math.sqrt(2) }); } } if (tieKnots) { for (var x = 0; x < X; x++) { // top links.push({ cat: 'tie', source: getb(x,0).tl, target: getb(x,0).tr, len: 0 }); for (var x2 = x+1; x2 < X; x2++) { links.push({ cat: 'tie', source: getb(x,0).tl, target: getb(x2,0).tl, len: 0 }); } // bottom links.push({ cat: 'tie', source: getb(x,Y-1).bl, target: getb(x,Y-1).br, len: 0 }); for (var x2 = x+1; x2 < X; x2++) { links.push({ cat: 'tie', source: getb(x,Y-1).bl, target: getb(x2,Y-1).bl, len: 0 }); } } } return { nodes, links }; }34:T62b,{ const S = 130; const X = 8; const Y = 4; const lines = []; const p = (x, y) => { var r = S * Math.sin(y/Y * Math.PI); return [ r * Math.cos(x/X * 2*Math.PI), -S * Math.cos(y/Y * Math.PI), r * Math.sin(x/X * 2*Math.PI), ]; }; const stroke = (line, stroke) => { line.stroke = stroke; return line; }; function pushin (x, y) { var center = p(x+.5, y+.5).map(v => v * .75); lines.push([p(x , y+.1), center]); // top left -> center, length: sqrt(2) lines.push([p(x+.5, y+.4), center]); // \down/ -> center, length: 1 lines.push([p(x+ 1, y+.1), center]); // top right -> center, length: sqrt(2) lines.push([p(x+ 1, y+.9), center]); // bottom right -> center, length: sqrt(2) lines.push([p(x+.5, y+.6), center]); // /up\ -> center, length: 1 lines.push([p(x , y+.9), center]); // bottom left -> center, length: sqrt(2) } for (var x = 0; x < X; x++) { for (var y = 0; y < Y; y++) { lines.push(stroke([ p(x , y+.1), // top left p(x+.5, y+.4), // \down/ p(x+ 1, y+.1), // top right p(x+ 1, y+.9), // bottom right p(x+.5, y+.6), // /up\ p(x , y+.9), // bottom left // don't close: it loops around ], '#aaa')); lines.push(stroke([ p(x+.5, y+.6-1), // previous /up\ p(x+.5, y+.4 ), // current \down/ ], '#aaa')); // push-in #1 //pushin(x, y); // push-in #2 //pushin(x+.5, y+.5); } } return draw(lines); }35:T604,{ return; const nodes = [0,1,2,3,4,5,6,7].map(i => ({ x: Math.random() * 50, y: Math.random() * 50, z: Math.random() * 50, index: i })); const links = [ { source: 0, target: 1 }, { source: 0, target: 2 }, { source: 1, target: 3 }, { source: 2, target: 3 }, { source: 4, target: 5 }, { source: 4, target: 6 }, { source: 5, target: 7 }, { source: 6, target: 7 }, { source: 0, target: 4 }, { source: 1, target: 5 }, { source: 2, target: 6 }, { source: 3, target: 7 }, ]; const simulation = d3_3d_force.forceSimulation(nodes, 3) .force("link", d3_3d_force.forceLink(links).distance(50)) .force("charge", d3_3d_force.forceManyBody().strength(-1500)) .force("center", d3_3d_force.forceCenter(0, 0, 0)); const polygons = function () { return [ [0, 1, 5, 4], // FRONT [2, 3, 7, 6], // REAR [0, 1, 3, 2], // BOTTOM [4, 5, 7, 6], // TOP [0, 2, 6, 4], // LEFT [1, 3, 7, 5], // RIGHT ].map(indices => indices.concat([indices[0]]).map(i => [nodes[i].x, nodes[i].y, nodes[i].z])); }; const svg = draw(polygons(), { S: 300 }); var i = 0; function manualtick () { simulation.tick(); draw(polygons(), { svg }); svg.style.background = simulation.alpha() < simulation.alphaMin() ? '#fff' : '#c00'; if (simulation.alpha() < simulation.alphaMin() || i++ > 1000) { // stop } else { requestAnimationFrame(manualtick); } } setTimeout(manualtick, 50); return svg; }36:T65b,// Assumes the drawing to be somewhat contained in // the area between [-100,-100,-100] and [100,100,100]. function draw (lines, params) { var { rot, S, svg } = _.defaults(params, { S: 450, // width / height of the svg rot: 30, // initial rotation }); var reusing = !!svg; var g; if (!reusing) { svg = d3.select(DOM.svg(S, S)); g = svg.append('g') .attr('class', 'drawing') .attr('transform', `translate(${S/2} ${S/2}) scale(${(S*1.2) / 400})`); const defs = svg.append("defs"); for (var i = 0; i < 3; i++) { defs.append("filter").attr("id", `blur-${i}`) .append("feGaussianBlur") .attr("stdDeviation", i/2); } } else { svg = d3.select(svg); g = svg.select('g.drawing'); } const dline = d3.line(); var drot = 0; function redraw () { const T = quaternion().rx(20).ry(drot + rot).asMatrix(); const paths = g.selectAll('path.line') .data(lines.map(line => line.map(p => project(p, T)))); paths.exit().remove(); const all = paths.enter().append('path').attr('class', 'line') .attr('fill', 'none') .attr('stroke-width', '1.5') .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .merge(paths) .attr('d', dline) .attr('stroke', (d, i) => lines[i].stroke || '#000') .attr("filter", (d, i) => lines[i].blur ? `url(#blur-${lines[i].blur})` : ''); } // mouse interactivity svg.call(d3.zoom().scaleExtent([1,1]).on('zoom', (e) => { drot = -d3.event.transform.x / 2.4; redraw(); })); redraw(); return svg.node(); }37:[] 2f:{"id":"2e977cfcfddd165c","slug":"3d-origami-w-force-layout","title":"3D Origami w/ force layouting?","thumbnail":"55346e08698955ab39bf9f2089ea77170476129b8b30bf015c37551209abf78a","access_level":"public","create_time":"$D2018-03-13T13:09:33.541Z","update_time":"$D2019-06-12T21:10:08.030Z","view_time":null,"first_public_time":"$D2018-03-13T18:34:57.615Z","fork":{"id":"31c29691005721ee","slug":"3d-l-systems","title":"3D L-systems","owner":{"id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert"}},"stars":5,"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":2975,"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":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"eb10ef0146cb05b4","slug":"origami","title":"Origami","owner":{"id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert"}},"type":"notebook","body":{"title":"3D Origami w/ force layouting?","cells":[{"id":0,"value":"md`# 3D Origami w/ force layouting?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1650,"value":"md`![](https://i.imgur.com/FCL85kO.jpg)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2453,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2508,"value":"md`** This is me trying to get the simulation right: **\n\n(Click the image to toggle categories of links, and swipe left and right to rotate.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2598,"value":"viewof tieKnots = radio({\n description: 'Tie knots to close the top and bottom holes?',\n options: [\n { value: 'yes', label: 'Yes' },\n { value: 'no', label: 'No' },\n ],\n value: 'no'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2623,"value":"viewof rerunBtn = button('Rerun simulation')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2726,"value":"md`- There are a total of ${simdata.links.length} links in the system, with a total length of ±${Math.floor(simdata.links.map(link => link.len).reduce((a,b) => a+b, 0))}. The stated errors are in the same unit.\n- Note the difference in results depending on whether you tie the holes together in a knot or not. (The checkbox above.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2744,"value":"tex.block`\\alpha = ${f5(sim.alpha())} ${sim.alpha() > 0.001 ? '>' : '<'} 0.001`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2383,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2748,"value":"simdata = {\n rerunBtn;\n const data = egg(14, 7, { tieKnots: tieKnots == 'yes' });\n data.origLinks = egg(14, 7, { tieKnots: tieKnots == 'yes' }).links;\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2786,"value":"function err (links) {\n var current = links.map(({ source, target }) => Math.sqrt(sdist(source, target))/40);\n var target = links.map(link => link.len);\n return target.map((t, i) => Math.abs(t - current[i])).reduce((a,b) => a+b, 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2829,"value":"{\n const f = d3.format('.2f');\n const links = simdata.links;\n const table = d3.select(DOM.element('table'));\n var data = _.sortBy(links.map(({ source, target, len }) => ({\n target: len,\n current: Math.sqrt(sdist(source, target))/40,\n })), o => o.diff = o.target - o.current);\n var tr = table.selectAll('tr').data([\n data.map(o => o.target),\n data.map(o => o.current),\n data.map(o => o.diff)\n ]).enter()\n .append('tr');\n tr.append('td').text((d,i) => [\"Target\", \"Current\", \"E\"][i]);\n tr.selectAll('td.data').data(d => d).enter()\n .append('td').style('border-right', '1px solid #ddd').text(f);\n \n return html`Errors (Rerun may be necessary)

${table.node()}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2890,"value":"{\n return 'not today';\n const c = { x:0,y:0,z:100 };\n function lines (links) {\n return links.map((link, i) => {\n var a = link.source;\n var b = link.target;\n var line = [[a.x, a.y, a.z], [b.x, b.y, b.z]];\n line.dtc = Math.sqrt(sdist(c, a)); // distance to camera\n line.stroke = d3.interpolateGreys(line.dtc / 250);\n return line;\n }).filter(line => !!line);\n }\n \n const l = _.sortBy(lines(simdata.links), line => line.dtc);\n const blurScale = d3.scaleLinear().domain(d3.extent(l.map(o => o.dtc))).range([0,2.5]);\n l.forEach(o => o.blur = 2-Math.floor(blurScale(o.dtc)));;\n \n return draw(l, { rot: 0 });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2510,"value":"md`

\n\n** Here is the egg's data, placed in 3D only by a rough approximation: **\n\n(Click the image to toggle categories of links, and swipe left and right to rotate.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2232,"value":"{\n function lines (cats) {\n return eggdata.links.map((link, i) => {\n if (cats.indexOf(link.cat) < 0) return false;\n var a = link.source;\n var b = link.target;\n return [[a.x, a.y, a.z], [b.x, b.y, b.z]];\n }).filter(line => !!line);\n }\n \n const svg = draw([], { S: 600 });\n \n var i = 0;\n const cats = [['push'], ['h', 'v', 'push'], ['h', 'v'], ['h'], ['v']];\n function alternate () {\n draw(lines(cats[i++ % cats.length]), { S: 600, svg });\n }\n svg.onclick = alternate;\n \n alternate();\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2717,"value":"function sdist (a, b) {\n return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2) + Math.pow(a.z - b.z, 2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2409,"value":"eggdata = egg(12, 8)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2158,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2620,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2049,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2518,"value":"md`Some testing stuff...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2001,"value":"{\n const S = 130;\n \n const X = 20;\n const Y = 6;\n const lines = [];\n \n const p = (x, y) => {\n var r = S * Math.sin(y/Y * Math.PI);\n return [\n r * Math.cos(x/X * 2*Math.PI),\n -S * Math.cos(y/Y * Math.PI),\n r * Math.sin(x/X * 2*Math.PI),\n ];\n };\n const stroke = (line, stroke) => {\n line.stroke = stroke;\n return line;\n };\n \n for (var x = 0; x < X+1; x++) {\n for (var y = 0; y < Y; y++) {\n lines.push(stroke([\n p(x, y),\n p(x+1, y+1),\n ], d3.interpolateSpectral(((x-y+X)%X) / X)));\n }\n }\n return draw(lines);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1874,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1947,"value":"draw(cube, { S: 300 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2965,"value":"cube","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1259,"value":"md`### 3D stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1727,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1722,"value":"function fit (lines, t = { min: [-100,-100,-100], max: [100,100,100] }) {\n // b, t :: { min: [x,y,z], max: [x,y,z] }\n const b = bounds(lines);\n \n const curr_center = [\n b.max[0] - (b.max[0] - b.min[0]) / 2,\n b.max[1] - (b.max[1] - b.min[1]) / 2,\n b.max[2] - (b.max[2] - b.min[2]) / 2,\n ];\n \n const scale = Math.min(\n (t.max[0] - t.min[0]) / (b.max[0] - b.min[0]),\n (t.max[1] - t.min[1]) / (b.max[1] - b.min[1]),\n (t.max[2] - t.min[2]) / (b.max[2] - b.min[2])\n );\n \n const target_center = [\n t.max[0] - (t.max[0] - t.min[0]) / 2,\n t.max[1] - (t.max[1] - t.min[1]) / 2,\n t.max[2] - (t.max[2] - t.min[2]) / 2,\n ];\n \n const aux = glm.vec3.create();\n return lines.map(line => {\n return line.map(p => {\n return glm.vec3.clone(glm.vec3.add(aux, glm.vec3.scale(aux, glm.vec3.sub(aux, p, curr_center), scale), target_center));\n });\n });\n \n return lines;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1718,"value":"function bounds (lines) {\n const min = [+Infinity, +Infinity, +Infinity];\n const max = [-Infinity, -Infinity, -Infinity];\n \n for (var line of lines) {\n for (var p of line) {\n if (p[0] < min[0]) min[0] = p[0];\n if (p[0] > max[0]) max[0] = p[0];\n \n if (p[1] < min[1]) min[1] = p[1];\n if (p[1] > max[1]) max[1] = p[1];\n \n if (p[2] < min[2]) min[2] = p[2];\n if (p[2] > max[2]) max[2] = p[2];\n }\n }\n \n return { min, max };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"cube = fit(\n [ // face polygons\n [0, 1, 5, 4], // FRONT\n [2, 3, 7, 6], // REAR\n [0, 1, 3, 2], // BOTTOM\n [4, 5, 7, 6], // TOP\n [0, 2, 6, 4], // LEFT\n [1, 3, 7, 5], // RIGHT\n ].map(face_indices => face_indices.concat([face_indices[0]]).map(i => cube_vertices[i]))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"cube_vertices = [\n v(-1.0, -1.0, -1.0), // Front-Bottom-Left\n v( 1.0, -1.0, -1.0), // Front-Bottom-Right\n v(-1.0, -1.0, 1.0), // Rear-Bottom-Left\n v( 1.0, -1.0, 1.0), // Rear-Bottom-Right\n v(-1.0, 1.0, -1.0), // Front-Top-Left\n v( 1.0, 1.0, -1.0), // Front-Top-Right\n v(-1.0, 1.0, 1.0), // Rear-Top-Left\n v( 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":664,"value":"function project (p, ...Ms) {\n const r = glm.vec3.fromValues(p[0], p[1], p[2]);\n for (var i = 0; i < Ms.length; i++) {\n glm.vec3.transformMat4(r, r, Ms[i]);\n }\n return r;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"function v (x, y, z_opt) {\n return z_opt !== undefined ? glm.vec3.fromValues(x,y,z_opt) : glm.vec2.fromValues(x,y);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1810,"value":"// This is just a small wrapper, so that the code above looks\n// a bit more intelligible. I just hate quaternions D:\nfunction quaternion (rx = 0, ry = 0, rz = 0) {\n const rotation = glm.quat.fromEuler(glm.quat.create(), rx, ry, rz);\n \n rotation.rx = function (rx) {\n glm.quat.rotateX(rotation, rotation, rx * Math.PI/180);\n return rotation;\n };\n \n rotation.ry = function (ry) {\n glm.quat.rotateY(rotation, rotation, ry * Math.PI/180);\n return rotation;\n };\n \n rotation.rz = function (rz) {\n glm.quat.rotateZ(rotation, rotation, rz * Math.PI/180);\n return rotation;\n };\n \n rotation.asMatrix = function () {\n return glm.mat4.fromQuat(glm.mat4.create(), rotation);\n };\n \n return rotation;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2807,"value":"f5 = d3.format('.5f')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2596,"value":"import { radio, slider, checkbox, button } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"glm = require('https://bundle.run/gl-matrix@3.0.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"d3 = require('https://d3js.org/d3.v5.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1845,"value":"d3_3d_force = require('https://unpkg.com/d3-force-3d@1.1.0/build/d3-force-3d.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"