31:T608,Toilet paper tubes have the curious property that you can flatten them, cut out loops, and link the loops together without fasteners. For a couple years now, I've hoarded every used cardboard toilet paper tube that's passed through our home. Feeling inspired after seeing a tweet (with apologies, author long since forgotten), I stockedpiled tubes and built a [Buckyball](https://en.wikipedia.org/wiki/Buckminsterfullerene). Vines in the bedroom now climb a six foot [carbon nanotube](https://en.wikipedia.org/wiki/Carbon_nanotube) trellis (*Charmin nanotube*, if you will, and not exactly *nano* either, for that matter). And [Alison Martin's work](https://mastodon.social/@alisonmartin57) continuously inspires me. *Update: I've tracked down some precedent, though perhaps not the actual tweet that inspired me as this seems to be a popular project! See tweets by [@Ian_Willey](https://twitter.com/Ian_Willey/status/1119257024649474049) and—with excellent instructions—[@mrallanmaths](https://twitter.com/mrallanmaths/status/1125438241774166017).* This notebook represents my attempt to step things up. It provides some basic instructions and suggestions, as well as a simulator to help the toilet-paper-tube-constrained make the best use of what they have. In hindsight, the simulation certainly wasn't necessary. And at any rate, there's really no upper limit to tackling this with trial and error; the recyclability means there's no need to open a family dialogue about where to store the large geometric constructions that result. 32:T5f9,md`## Fabrication My brand is regular Trader Joe's toilet paper, though I have no reason to believe anything about the brand is particularly important, beyond consistency of diameter—with the exception of those cowards who make tube-free toilet paper rolls. Those won't work. I've considered side-stepping material collection and waiting to buy tag board when shelter-in-place eases, though to be honest, the recycled nature of the raw materials is a primary factor which draws me to this project. Accumulating raw materials is simple. Flatten the tubes and—if you live with family—stash them somewhere a family member is unlikely to find them, lest you be required to explain yourself. Conversely, you may wish to avoid much wailing and gnashing of teeth and discuss your hoarding early on to prevent your stash from getting casually recycled. The pattern below illustrates the required cuts. The angle required for three edges to join gracefully is ${tex`30^\circ`}, which makes the measurements easy. I've found a far easier method than measuring every tube though is to add opposing marks to one tube and use it as a template. I get about eight strips per tube. Update: I've trended toward thicker strips, as it makes the final constructions a bit more robust. The only limit on thickness is they can't be so thick that the joints on opposite ends interfere and prevent linking. Further simplifying, even cutting strips at flat 0˚ angles produces a visually appealing look and may save a bit of trouble.`33:T53c,md`We'll get right to the point and present the finished simulator, followed by an explanation of how it works. It's really non-scientific in the sense that I've pulled forces and energies out of the sky to get it to look nice. It's not without some physical justification, but there's little motivation by legit physical chemistry, and the optimization method is staggeringly inefficient. We represent the model as a graph consisting of vertices and edges. The topology follows one rule: - Every vertex has no more than three outgoing edges. This rule is enough to constrain the topology, though it says nothing about the particular geometry of the result in three-dimensional space. **Notes**: - You'll need a desktop computer to use the simulator. - The genus 3 torus comes from the lovely [construction of Alison Martin](https://twitter.com/alisonmartin57/status/1254050723077279745), whose work has certainly inspired a lot of this exploration to begin with! - Most of the other constructions come from the paper listed above, ["The Topology of Fullerenes"](https://onlinelibrary.wiley.com/doi/full/10.1002/wcms.1207) by Schwerdtfeger, Wirz, and Avery. - I chose a regrettable data structure (a simple list of edges and vertices) which makes faces, as much as I'd love to display them, difficult to work out. My apologies. 🤷‍`34:T895,presetGraphs = { function debias(graph) { return translateGraph(graph, vec3scale([], computeCentroid(graph), -1)); } return { Starter: { vertices: [ [-1, -1, 0], [-1, 1, 0], [-0.5, 0, 0.0], [0.5, 0, 0.0], [1, -1, 0], [1, 1, 0] ], edges: [ [0, 2], [1, 2], [2, 3], [3, 4], [3, 5] ] }, "C60 Fullerene": debias(await FileAttachment("fullerene.json").json()), "C180 Fullerene": debias( await FileAttachment("c180-fullerene.json").json() ), "C320 Fullerene": debias( await FileAttachment("c320-fullerene.json").json() ), "C500 Fullerene": debias( await FileAttachment("c500-fullerene.json").json() ), Capsule: debias(await FileAttachment("capsule.json").json()), "C240 torus": debias(await FileAttachment("c240-torus.json").json()), "C360 torus": debias(await FileAttachment("c360-torus.json").json()), Dodecahedron: debias(await FileAttachment("dodecahedron.json").json()), "C28[5,7]-D7d": debias(await FileAttachment("c28-57-d7d.json").json()), "C28-Td[5,6]": debias(await FileAttachment("c28-td-56.json").json()), "C260-I[5,7]": debias(await FileAttachment("spiky@1.json").json()), "C360-D5h[5,6,7]": debias(await FileAttachment("C310-D5h-567.json").json()), "C120-5d[5,6,7] peanut fulleroid": debias( await FileAttachment("c120-peanut-fulleroid.json").json() ), "C168-D3d[5,6,7] peanut fulleroid": debias( await FileAttachment("double-fullerene.json").json() ), "Double torus": debias(await FileAttachment("double-torus.json").json()), "Genus-3 Torus": debias( await FileAttachment("mess-of-vertices.json").json() ), "Genus-3 Torus (extended)": debias( await FileAttachment("genus-3-extended-torus@1.json").json() ), "Not quite Klein Quartic": debias( await FileAttachment("klein-quartic@1.json").json() ), "Metadodecahedron (reduce the iterations per frame!)": debias( await FileAttachment("metafullerene-2.json").json() ), "Bent tube": debias(await FileAttachment("model (1).json").json()) }; }35:T493,md`### Mathematical Statement We write an arbitrary energy function for our graph that maps the configuration to a single real number, ${tex.block`E = E(v_i, e_j) \in \mathbb{R}`} where ${tex`v_i`} and ${tex`e_j`} are the ${tex`i^{th}`} vertex and ${tex`j^{th}`} edge of the graph, respectively. ${tex`E`} here is any useful function, picked out of the sky, such that it's minimized when the graph reaches a desirable configuration. We compute the gradient with respect to the *x-y-z* coordinates of all ${tex`N`} vertex positions, ${tex.block`\nabla E = \left(\frac{\partial E}{\partial v_{0,x}}, \frac{\partial E}{\partial v_{0,y}}, \frac{\partial E}{\partial v_{0,z}}, \frac{\partial E}{\partial v_{1,x}}, \ldots, \frac{\partial E}{\partial v_{N - 1,z}}\right).`} In the sense of rolling down a hill, this gradient points uphill so that we update the solution in the direction of a small downhill step. We compute the ${tex`n + 1^{th}`} step of vertex ${tex`v_i`} as ${tex.block`v_i^{n + 1} = v_i^n - \gamma \frac{\partial E}{\partial v_i}`} where ${tex`\gamma`} is some small number. It's no more complicated than that, but we must now select a function ${tex`E`}.`36:T52a,md`The minimum-energy configuration occurs when ${tex`r_{ab} = r_0`}, so we construct an energy function ${tex.block`E_{axial} = k_{axial} (r_{ab} - r_0)^2`} where ${tex`k_{axial}`} is the axial stiffness. Note that ${tex`E_{axial} = 0`} when ${tex`r_{ab} = r_0`}. Since ${tex`E_{axial}`} is strictly non-negative, this is just fancy way of saying that the energy can't get any lower than when the length is equal to the desired length; it's the bottom of the hill. If we differentiate this function with respect to the position of the two endpoints, then we obtain the gradient. For example, the energy gradient with respect to the coordinates of vertex ${tex`a`} is ${tex.block` \begin{aligned}\frac{\partial E}{\partial v_{a, x}} &= k_{axial} \left(1 - \frac{r_0}{r_{ab}}\right) \left(v_{a,x} - v_{b, x}\right)\end{aligned} \\ \begin{aligned}\frac{\partial E}{\partial v_{a, y}} &= k_{axial} \left(1 - \frac{r_0}{r_{ab}}\right) \left(v_{a,y} - v_{b, y}\right)\end{aligned} \\ \begin{aligned}\frac{\partial E}{\partial v_{a, z}} &= k_{axial} \left(1 - \frac{r_0}{r_{ab}}\right) \left(v_{a,z} - v_{b, z}\right)\end{aligned} `} The gradient with respect to the coordinates of vertex ${tex`b`} are equal and opposite. The function below iterates over all edges and accumulates the energy gradient into a single array.`37:T917,function computeJoinAngleEnergyGradient(gradient, graph, theta0, kBend) { computeAdjacency(graph); var cosTheta0 = Math.cos((theta0 * Math.PI) / 180); function accumulateGradient(a, b, c, ia, ib, ic) { var fb, fc; var abx = b[0] - a[0]; var aby = b[1] - a[1]; var abz = b[2] - a[2]; var acx = c[0] - a[0]; var acy = c[1] - a[1]; var acz = c[2] - a[2]; var ab = Math.sqrt(abx * abx + aby * aby + abz * abz); var ac = Math.sqrt(acx * acx + acy * acy + acz * acz); var ab_ac = abx * acx + aby * acy + abz * acz; var cosTheta = ab_ac / (ab * ac); var f = (kBend * 2 * (cosTheta - cosTheta0)) / (ab * ac); var r = ab / ac; fb = f * (acx - (cosTheta / r) * abx); fc = f * (abx - cosTheta * r * acx); gradient[3 * ia + 0] -= fb + fc; gradient[3 * ib + 0] += fb; gradient[3 * ic + 0] += fc; fb = f * (acy - (cosTheta / r) * aby); fc = f * (aby - cosTheta * r * acy); gradient[3 * ia + 1] -= fb + fc; gradient[3 * ib + 1] += fb; gradient[3 * ic + 1] += fc; fb = f * (acz - (cosTheta / r) * abz); fc = f * (abz - cosTheta * r * acz); gradient[3 * ia + 2] -= fb + fc; gradient[3 * ib + 2] += fb; gradient[3 * ic + 2] += fc; } for (var iVertex = 0; iVertex < graph.edges.length; iVertex++) { var p = graph.vertices[iVertex]; var iEdge1 = graph.edgeAdjacency[3 * iVertex + 0]; var iEdge2 = graph.edgeAdjacency[3 * iVertex + 1]; var iEdge3 = graph.edgeAdjacency[3 * iVertex + 2]; var edge1 = iEdge1 >= 0 ? graph.edges[iEdge1] : null; var edge2 = iEdge2 >= 0 ? graph.edges[iEdge2] : null; var edge3 = iEdge3 >= 0 ? graph.edges[iEdge3] : null; var iVertex1 = iEdge1 >= 0 ? (edge1[0] === iVertex ? edge1[1] : edge1[0]) : -1; var iVertex2 = iEdge2 >= 0 ? (edge2[0] === iVertex ? edge2[1] : edge2[0]) : -1; var iVertex3 = iEdge3 >= 0 ? (edge3[0] === iVertex ? edge3[1] : edge3[0]) : -1; var p1 = graph.vertices[iVertex1]; var p2 = graph.vertices[iVertex2]; var p3 = graph.vertices[iVertex3]; if (p1 && p2) accumulateGradient(p, p1, p2, iVertex, iVertex1, iVertex2); if (p2 && p3) accumulateGradient(p, p2, p3, iVertex, iVertex2, iVertex3); if (p3 && p1) accumulateGradient(p, p3, p1, iVertex, iVertex3, iVertex1); } return gradient; }38:T40c,md`Without the sort of physical justification required for a scientifically valid molecular dynamics simulation, we simply pick an energy function that's minimized when the outer vertices are not twisted. We therefore define the unit vectors ${tex`\vec{\alpha}`}, ${tex`\vec{\beta}`}, and ${tex`\vec{\gamma}`} ${tex.block`\vec{\alpha} \equiv \frac{\vec{b} - \vec{a}}{|\vec{b} - \vec{a}|},\;\;\;\vec{\beta} \equiv \frac{\vec{d} - \vec{c}}{|\vec{d} - \vec{c}|},\;\;\;\vec{\gamma} \equiv \frac{\vec{f} - \vec{e}}{|\vec{f} - \vec{e}|}`} and define the energy function ${tex.block`E_{torsion} = -((\vec{\alpha} \times \vec{\beta}) \cdot (\vec{\alpha} \times \vec{\gamma}))^2.`} Due to the square, this function takes the value ${tex`-1`} when ${tex`\vec{\alpha} \times \vec{\beta}`} is either parallel *or* antiparallel to ${tex`\vec{\alpha} \times \vec{\gamma}`}. In words, this means that the value is minimized when vertices ${tex`c`}, ${tex`d`}, ${tex`e`}, and ${tex`f`} exhibit no rotation relative to the central edge, ${tex`e_{ab}`}.`39:Tcbb,function computeTorsionalEnergyGradient(gradient, graph, kTorsion) { const da = vec3create(); const dc = vec3create(); const de = vec3create(); var alpha = vec3create(); var beta = vec3create(); var gamma = vec3create(); const verticesCD = [0, 0]; const verticesEF = [0, 0]; function getAlternateVertices(out, idx3, referenceVertex) { var iA = graph.vertexAdjacency[idx3]; var iB = graph.vertexAdjacency[idx3 + 1]; var iC = graph.vertexAdjacency[idx3 + 2]; if (iA === referenceVertex) { out[0] = iB; out[1] = iC; } else if (iB === referenceVertex) { out[0] = iA; out[1] = iC; } else { out[0] = iA; out[1] = iB; } } function computeGradient(da, dc, de, alpha, beta, gamma, rab, rcd, ref) { const bg = vec3dot(beta, gamma); const ag = vec3dot(alpha, gamma); const ab = vec3dot(alpha, beta); var E0 = (bg - ab * ag) * kTorsion; vec3scale(da, alpha, -2.0 * ab * ag); vec3scaleAndAdd(da, da, beta, ag); vec3scaleAndAdd(da, da, gamma, ab); vec3scale(da, da, (-2 * E0) / rab); vec3scale(dc, beta, bg - ag * ab); vec3sub(dc, dc, gamma); vec3scaleAndAdd(dc, dc, alpha, ag); vec3scale(dc, dc, (-2 * E0) / rcd); vec3scale(de, gamma, bg - ab * ag); vec3sub(de, de, beta); vec3scaleAndAdd(de, de, alpha, ab); vec3scale(de, de, (-2 * E0) / ref); } for (var iEdge = 0; iEdge < graph.edges.length; iEdge++) { const edge = graph.edges[iEdge]; const iA = edge[0]; const iB = edge[1]; const idxA = iA * 3; const idxB = iB * 3; if (iA === -1 || iB === -1) throw new Error('Invalid edge'); if ( graph.vertexAdjacency[idxA + 2] === -1 || graph.vertexAdjacency[idxB + 2] === -1 ) continue; getAlternateVertices(verticesCD, idxA, iB); getAlternateVertices(verticesEF, idxB, iA); const iC = verticesCD[0]; const iD = verticesCD[1]; const iE = verticesEF[0]; const iF = verticesEF[1]; const idxC = 3 * iC; const idxD = 3 * iD; const idxE = 3 * iE; const idxF = 3 * iF; const a = graph.vertices[iA]; const b = graph.vertices[iB]; const c = graph.vertices[iC]; const d = graph.vertices[iD]; const e = graph.vertices[iE]; const f = graph.vertices[iF]; vec3sub(alpha, b, a); const rab = vec3length(alpha); vec3scale(alpha, alpha, 1 / rab); vec3sub(beta, d, c); const rcd = vec3length(beta); vec3scale(beta, beta, 1 / rcd); vec3sub(gamma, f, e); const ref = vec3length(gamma); vec3scale(gamma, gamma, 1 / ref); computeGradient(da, dc, de, alpha, beta, gamma, rab, rcd, ref); gradient[idxA] += da[0]; gradient[idxA + 1] += da[1]; gradient[idxA + 2] += da[2]; gradient[idxB] -= da[0]; gradient[idxB + 1] -= da[1]; gradient[idxB + 2] -= da[2]; gradient[idxC] += dc[0]; gradient[idxC + 1] += dc[1]; gradient[idxC + 2] += dc[2]; gradient[idxD] -= dc[0]; gradient[idxD + 1] -= dc[1]; gradient[idxD + 2] -= dc[2]; gradient[idxE] += de[0]; gradient[idxE + 1] += de[1]; gradient[idxE + 2] += de[2]; gradient[idxF] -= de[0]; gradient[idxF + 1] -= de[1]; gradient[idxF + 2] -= de[2]; } return gradient; }3a:T42a,function deleteVertex(graph, vertexIndex) { if (vertexIndex === undefined) throw new Error('Invalid vertex index, ' + vertexIndex); if (vertexIndex < 0) return vertexIndex; computeAdjacency(graph); const edgesToRemove = [ graph.edgeAdjacency[vertexIndex * 3], graph.edgeAdjacency[vertexIndex * 3 + 1], graph.edgeAdjacency[vertexIndex * 3 + 2] ]; var adjacentVertexIndex = -1; if (edgesToRemove[0] >= 0) { var edge = graph.edges[edgesToRemove[0]]; adjacentVertexIndex = edge[vertexIndex === edge[0] ? 1 : 0]; } clearCachedAdjacency(graph); edgesToRemove.sort((a, b) => b - a); for (var i = 0; i < edgesToRemove.length; i++) { if (edgesToRemove[i] < 0) continue; graph.edges.splice(edgesToRemove[i], 1); } graph.vertices.splice(vertexIndex, 1); for (var i = 0; i < graph.edges.length; i++) { const edge = graph.edges[i]; if (edge[0] > vertexIndex) edge[0]--; if (edge[1] > vertexIndex) edge[1]--; } if (adjacentVertexIndex > vertexIndex) adjacentVertexIndex--; return adjacentVertexIndex; }3b:T73e,function createDrawVertices(regl) { const icosphere = createIcosphere(1); const positions = regl.buffer(icosphere.positions); const cells = regl.elements(icosphere.cells); const indices = new Uint16Array(65536); const vertexBuffer = regl.buffer(new Float32Array(65536)); for (var i = 0; i < indices.length; i++) indices[i] = i; const indexBuffer = regl.buffer(indices); return regl({ vert: ` precision highp float; attribute vec3 icoPosition; attribute vec3 vertex; attribute float index; uniform mat4 projectionView; uniform float pointSize; uniform float selectedIndex, hoverIndex; varying float isSelected, isActive, isHover; void main () { isSelected = index == selectedIndex ? 1.0 : 0.0; isHover = index == hoverIndex ? 1.0 : 0.0; vec4 p0 = projectionView * vec4(vertex, 1); float size = p0.z * pointSize; gl_Position = projectionView * vec4(vertex + icoPosition * size, 1); }`, frag: ` precision highp float; varying float isSelected, isHover; void main () { gl_FragColor = vec4( vec3(0.14, 0.37, 0.69) + isHover * vec3(0, 0.5, 0) + isSelected * vec3(1, 0, 0) , 1); }`, attributes: { icoPosition: positions, vertex: (ctx, props) => ({ buffer: props.vertexBuffer, divisor: 1 }), index: { buffer: indexBuffer, divisor: 1 } }, elements: cells, cull: { enable: true, face: 'back' }, uniforms: { pointSize: (ctx, props) => (ctx.pixelRatio * props.pointSize) / ctx.viewportHeight, selectedIndex: (ctx, props) => props.selectedVertexIndex, hoverIndex: (ctx, props) => props.hoverVertexIndex }, primitive: 'triangles', count: icosphere.cells.length * 3, instances: (ctx, props) => props.count }); }3c:T1082,function createDrawEdges(regl) { var SIZEOF_FLOAT = 4; var DEFAULT_LINE_COLOR = [0, 0, 0, 1]; var DEFAULT_BORDER_COLOR = [1, 1, 1, 1]; var DEFAULT_LINE_WIDTH = 2; var DEFAULT_BORDER_WIDTH = 2; return regl({ vert: ` precision highp float; uniform mat4 projectionView; uniform float uAspect, uTurningAngleSafetyExtension, uScaleFactor, uPixelRatio, uL0, uStrainColoring; attribute vec3 aPosition, aNextPosition; attribute vec2 aLinePosition; varying float vOffset; varying vec2 vStrokeEdges; uniform float uBorderWidth; uniform float uLineWidth; varying vec3 vColor; vec2 lineNormal (vec4 p, vec4 n, float aspect) { return normalize((p.yx / p.w - n.yx / n.w) * vec2(1, aspect)); } const float pi = 3.14159; vec3 colormap (float x) { float cx = clamp(x, 0.0, 1.0); return vec3( cos(pi * cx), cos(pi * (cx - 0.5)), cos(pi * (cx - 1.0)) ); } void main () { // Compute the position of two adjacent points vec4 currentPoint = projectionView * vec4(aPosition, 1); vec4 nextPoint = projectionView * vec4(aNextPosition, 1); float strain = (length(aNextPosition - aPosition) / uL0 - 1.0); vColor = colormap(0.5 + strain * uStrainColoring * 2.0) * 0.8 * (uStrainColoring > 0.0 ? 1.0 : 0.0); float totalWidth = uLineWidth + uBorderWidth * 2.0; // Use the aLinePosition attribute to select either the current or next point gl_Position = mix(currentPoint, nextPoint, aLinePosition.y); // Apply the screen-space offset to make a line of the correct width vec2 vn = lineNormal(currentPoint, nextPoint, uAspect); gl_Position.xy += ( vn / vec2(-uAspect, 1) * aLinePosition.x * totalWidth + -vn.yx * vec2(1, uAspect) * aLinePosition.y * totalWidth * uTurningAngleSafetyExtension ) * gl_Position.w * uScaleFactor; // Pass the horizontal line offset to the fragment shader so we can // add a stroke to the line vOffset = aLinePosition.x * totalWidth; vStrokeEdges = uBorderWidth < 1e-3 ? vec2(-100, -101) : (uLineWidth + vec2(-1, 1) / uPixelRatio); }`, frag: ` precision highp float; uniform vec4 uColor, uBorderColor; varying float vOffset; varying vec3 vColor; varying vec2 vStrokeEdges; void main () { gl_FragColor = mix( uBorderColor, vec4(vColor, 1), smoothstep( vStrokeEdges.y, vStrokeEdges.x, vOffset) * smoothstep(-vStrokeEdges.y, -vStrokeEdges.x, vOffset) ); }`, polygonOffset: { enable: true, offset: { factor: 2, units: 2 } }, attributes: { aLinePosition: [[-1, 0], [1, 0], [-1, 1], [1, 1]], aPosition: (ctx, props) => ({ buffer: props.vertexBuffer, offset: 0, stride: 6 * 4, divisor: 1 }), aNextPosition: (ctx, props) => ({ buffer: props.vertexBuffer, offset: 3 * 4, stride: 6 * 4, divisor: 1 }) }, elements: regl.prop('edgeBuffer'), uniforms: { uL0: (ctx, props) => (props.l0 === undefined ? 1 : props.l0), uStrainColoring: (ctx, props) => props.strainColoring === undefined ? 0 : props.strainColoring, uBorderColor: regl.prop('borderColor'), uLineWidth: regl.prop('lineWidth'), uBorderWidth: regl.prop('borderWidth'), uColor: regl.prop('color'), uAspect: ctx => ctx.viewportWidth / ctx.viewportHeight, uScaleFactor: (ctx, props) => ctx.pixelRatio / ctx.viewportHeight, uPixelRatio: regl.context('pixelRatio'), uTurningAngleSafetyExtension: (ctx, props) => { var turningAngle = (Math.PI / 180) * (props.maxExpectedTurningAngle === undefined ? 5 : props.maxExpectedTurningAngle); return turningAngle < 1e-4 ? turningAngle * 0.5 : (1 - Math.cos(turningAngle)) / Math.sin(turningAngle); } }, primitive: 'triangle strip', instances: regl.prop('count'), count: 4 }); }3d:T7ad,function drawGraph(ctx, invalidation) { const c = ctx.cache( { drawVertices: () => createDrawVertices(ctx.regl), drawEdges: () => createDrawEdges(ctx.regl) }, true ); let visible = false; const vertexBuffer = ctx.regl.buffer(new Float32Array(65536)); const edgeVerticesBuffer = ctx.regl.buffer(new Float32Array(65536)); ctx.camera.taint(); const frame = ctx.regl.frame(() => { if (!visible) return; const state = ctx.state; const graph = state && state.graph; try { ctx.camera.tick(({ dirty }) => { if (!state.simulate && !dirty) return; if (graph) { if (state.simulate) { for (var i = 0; i < iterations; i++) { iterate(graph, 0.1, ctx.state); } } vertexBuffer.subdata(flattenVertices(graph)); edgeVerticesBuffer.subdata(flattenEdges(graph)); } ctx.regl.clear({ color: [1, 1, 1, 1], depth: 1 }); if (graph) { ctx.data.drawVertices( Object.assign({}, state, { vertexBuffer, count: graph.vertices.length, pointSize }) ); ctx.data.drawEdges({ vertexBuffer: edgeVerticesBuffer, strainColoring, l0, color: [0, 0, 0, 1], lineWidth: 2, borderWidth, borderColor: [1, 1, 1, 1], count: graph.edges.length }); } }); } catch (e) { console.error(e); //console.log('current graph', JSON.stringify(graph)); frame.cancel(); } }); // Stop drawing the plot when offscreen const observer = new IntersectionObserver(entries => { visible = entries.pop().intersectionRatio > 0; }); observer.observe(ctx.container); invalidation && invalidation.then(() => { frame.cancel(); observer.disconnect(); }); return ctx.container; }3e:Td9d,createOrbitCamera = { // https://github.com/mikolalysenko/orbit-camera/blob/master/LICENSE // // The MIT License (MIT) // // Copyright (c) 2013 Mikola Lysenko // // Permission is hereby granted, free of charge, to any person obtaining a copy // of this software and associated documentation files (the "Software"), to deal // in the Software without restriction, including without limitation the rights // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell // copies of the Software, and to permit persons to whom the Software is // furnished to do so, subject to the following conditions: // // The above copyright notice and this permission notice shall be included in // all copies or substantial portions of the Software. // // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. //Scratch variables var scratch0 = new Float32Array(16); var scratch1 = new Float32Array(16); function OrbitCamera(rotation, center, distance) { this.rotation = rotation; this.center = center; this.distance = distance; } var proto = OrbitCamera.prototype; proto.view = function(out) { if (!out) { out = mat4create(); } scratch1[0] = scratch1[1] = 0.0; scratch1[2] = -this.distance; mat4fromRotationTranslation( out, quatConjugate(scratch0, this.rotation), scratch1 ); mat4translate(out, out, vec3negate(scratch0, this.center)); return out; }; proto.lookAt = function(eye, center, up) { mat4lookAt(scratch0, eye, center, up); mat3fromMat4(scratch0, scratch0); quatFromMat3(this.rotation, scratch0); vec3copy(this.center, center); this.distance = vec3distance(eye, center); }; proto.pan = function(dpan) { var d = this.distance; scratch0[0] = -d * (dpan[0] || 0); scratch0[1] = d * (dpan[1] || 0); scratch0[2] = d * (dpan[2] || 0); vec3transformQuat(scratch0, scratch0, this.rotation); vec3add(this.center, this.center, scratch0); }; proto.zoom = function(d) { this.distance *= Math.exp(d / 10.0); if (this.distance < 0.0) { this.distance = 0.0; } }; function quatFromVec(out, da) { var x = da[0]; var y = da[1]; var z = da[2]; var s = x * x + y * y; if (s > 1.0) { s = 1.0; } out[0] = -da[0]; out[1] = da[1]; out[2] = da[2] || Math.sqrt(1.0 - s); out[3] = 0.0; } proto.rotate = function(da, db) { quatFromVec(scratch0, da); quatFromVec(scratch1, db); quatInvert(scratch1, scratch1); quatMultiply(scratch0, scratch0, scratch1); if (quatLength(scratch0) < 1e-6) { return; } quatMultiply(this.rotation, this.rotation, scratch0); quatNormalize(this.rotation, this.rotation); }; return function createOrbitCamera(eye, target, up) { eye = eye || [0, 0, -1]; target = target || [0, 0, 0]; up = up || [0, 1, 0]; var camera = new OrbitCamera(quatCreate(), vec3create(), 1.0); camera.lookAt(eye, target, up); return camera; }; }3f:T5b2,function reglCamera(regl, opts) { opts = Object.assign( { eye: opts.eye || [0, 1, -20], center: [0, 0, 0], up: [0, 1, 0], fovy: Math.PI / 4, near: 0.1, far: 200.0 }, opts ); const camera = createOrbitCamera(opts.eye, opts.center, opts.up); const view = mat4create(); const projection = mat4create(); const projectionView = mat4create(); let aspectRatio = regl._gl.canvas.width / regl._gl.canvas.height; let dirty = true; const setUniforms = regl({ uniforms: { eye: () => camera.eye, center: () => camera.center, view: () => view, projection: () => projection, projectionView: () => projectionView, aspectRatio: () => aspectRatio }, context: { eye: () => camera.eye, center: () => camera.center, view: () => view, projection: () => projection, projectionView: () => projectionView, aspectRatio: () => aspectRatio, dirty: () => dirty } }); camera.tick = function(callback) { aspectRatio = regl._gl.canvas.width / regl._gl.canvas.height; camera.view(view); mat4perspective(projection, opts.fovy, aspectRatio, opts.near, opts.far); mat4multiply(projectionView, projection, view); setUniforms(callback); dirty = false; }; camera.taint = function() { dirty = true; }; camera.element = regl._gl.canvas; camera.projectionView = projectionView; return camera; }40:T1661,InteractionController = { function InteractionController(element, toolStack) { this.state = 'INITIAL'; this.initialX = null; this.initialY = null; this.previousX = null; this.previousY = null; this.captured = false; this.wheelCaptured = false; this.element = element; this.xy = [null, null]; this.initialXY = [null, null]; this.toolStack = [toolStack]; this.capturedTool = null; element.tabIndex = "1"; element.style.outline = "none"; this.element.style.cursor = 'grab'; this.handleMouseWheel = this._onMouseWheel.bind(this); this.handleMousedown = this._onMousedown.bind(this); this.handleMousemove = this._onMousemove.bind(this); this.handleWindowMousemove = this._onWindowMousemove.bind(this); this.handleWindowMouseup = this._onWindowMouseup.bind(this); this.handleKeyUp = this._onKeyUp.bind(this); this.capture = () => (this.captured = true); this.captureWheel = () => (this.captureWheel = true); element.addEventListener('mousedown', this.handleMousedown); element.addEventListener('mousemove', this.handleMousemove); element.addEventListener('wheel', this.handleMouseWheel); element.addEventListener('keyup', this.handleKeyUp); this.destroy = () => { element.removeEventListener('mousedown', this.handleMousedown); element.removeEventListener('mousemove', this.handleMousemove); element.removeEventListener('wheel', this.handleMouseWheel); element.removeEventListener('keyup', this.handleKeyUp); this._stopObservingWindow(); }; } InteractionController.prototype.pushToolStack = function(toolStack) { this.toolStack.unshift(toolStack); }; InteractionController.prototype.popToolStack = function(tool) { if (this.toolStack.length < 2) return; this.toolStack.shift(); }; InteractionController.prototype.setCursor = function(cursor) { this.element.style.cursor = cursor; }; function ControllerEvent(props) { Object.assign(this, props); this.reset(); } ControllerEvent.prototype.capture = function() { this.captured = true; }; ControllerEvent.prototype.stopPropagation = function() { this.propagationStopped = true; }; ControllerEvent.prototype.reset = function() { this.captured = false; this.propagationStopped = false; }; ControllerEvent.prototype.insideDeadZone = function(radius) { if (this.initialX === undefined || this.initialY === undefined) return false; if (this.x === undefined || this.x === undefined) return false; const dx = this.x - this.initialX; const dy = this.y - this.initialY; return dx * dx + dy * dy < radius * radius; }; InteractionController.prototype._consumeEvent = function( originalEvent, isInitial ) { const previousX = this.xy[0]; const previousY = this.xy[1]; if (isInitial) { this.initialXY[0] = this.xy[0]; this.initialXY[1] = this.xy[1]; } mouseEventOffset(originalEvent, this.element, this.xy); return { x: this.xy[0], y: this.xy[1], deltaX: this.xy[0] - previousX, deltaY: this.xy[1] - previousY, previousX, previousY, initialX: this.initialXY[0], initialY: this.initialXY[1], originalEvent }; }; InteractionController.prototype._delegate = function(eventName, vars, tool) { const context = new ControllerEvent(vars); const toolStack = tool ? [tool] : this.toolStack[0]; for (var i = 0; i < toolStack.length; i++) { const tool = toolStack[i]; if (!tool[eventName]) continue; tool[eventName].bind(this)(context); if (context.captured) { this.capturedTool = tool; return context; } if (context.propagationStopped) { break; } } }; InteractionController.prototype._startObservingWindow = function() { this.setCursor('grabbing'); window.addEventListener('mousemove', this.handleWindowMousemove); window.addEventListener('mouseup', this.handleWindowMouseup); }; InteractionController.prototype._stopObservingWindow = function() { this.setCursor(null); window.removeEventListener('mousemove', this.handleWindowMousemove); window.removeEventListener('mousemove', this.handleWindowMouseup); }; InteractionController.prototype._onMouseWheel = function(originalEvent) { this._delegate( 'wheel', Object.assign(this._consumeEvent(originalEvent), { deltaX: originalEvent.deltaX, deltaY: originalEvent.deltaY }) ); }; InteractionController.prototype._onMousedown = function(originalEvent) { this._startObservingWindow(); const props = this._consumeEvent(originalEvent, true); this._delegate('beginPress', props); }; InteractionController.prototype._onKeyUp = function(originalEvent) { this._delegate('keyUp', { originalEvent }); }; InteractionController.prototype._onMousemove = function(originalEvent) { if (this.capturedTool) return; this._delegate('passiveMove', this._consumeEvent(originalEvent)); }; InteractionController.prototype._onWindowMousemove = function(originalEvent) { if (this.capturedTool) { this._delegate( 'capturedMove', this._consumeEvent(originalEvent), this.capturedTool ); } }; InteractionController.prototype._onWindowMouseup = function(originalEvent) { this._stopObservingWindow(); if (this.capturedTool) { const props = this._consumeEvent(originalEvent); this._delegate('endPress', props); this._delegate('endCapture', props, this.capturedTool); this.capturedTool = null; } }; return InteractionController; }41:T17e3,function createVertexTool(state, camera) { const graph = state.graph; const element = camera.element; let exitedDeadZone = false; let candidateEdge; const viewportSize = [element.offsetWidth, element.offsetHeight]; function updateViewportSize() { viewportSize[0] = element.offsetWidth; viewportSize[1] = element.offsetHeight; } function getClosestPoint(x, y) { updateViewportSize(); return getClosestPointIndex( graph, camera.projectionView, [x, y], viewportSize ); } return { keyUp: function(event) { switch (event.originalEvent.keyCode) { case 8: // backspace if (state.selectedVertexIndex >= 0) { var idx = deleteVertex(graph, state.selectedVertexIndex); state.selectedVertexIndex = idx; state.hoverVertexIndex = -1; state.activeVertexIndex = -1; state.spawnVertexIndex = idx; candidateEdge = null; camera.taint(); event.originalEvent.preventDefault(); } break; case 32: // space state.selectedVertexIndex = -1; state.activeVertexIndex = -1; camera.taint(); event.originalEvent.preventDefault(); break; case 67: // 'c' var idx = collapseVertex(graph, state.selectedVertexIndex); state.selectedVertexIndex = idx; state.hoverVertexIndex = -1; state.activeVertexIndex = -1; state.spawnVertexIndex = idx; candidateEdge = null; camera.taint(); event.originalEvent.preventDefault(); break; case 83: // 's' var idx = splitVertex(graph, state.selectedVertexIndex); state.selectedVertexIndex = idx; state.hoverVertexIndex = -1; state.activeVertexIndex = -1; state.spawnVertexIndex = idx; candidateEdge = null; camera.taint(); event.originalEvent.preventDefault(); break; case 69: // 'e' var idx = explodeVertex(graph, state.selectedVertexIndex); state.selectedVertexIndex = idx; state.hoverVertexIndex = -1; state.activeVertexIndex = -1; state.spawnVertexIndex = idx; candidateEdge = null; camera.taint(); event.originalEvent.preventDefault(); break; default: //console.log(event.originalEvent.keyCode); } }, beginPress: function(event) { //console.log('begin press', state); exitedDeadZone = false; const closestPoint = getClosestPoint(event.x, event.y); if (closestPoint.index >= 0 && closestPoint.distance < 25) { if ( state.selectedVertexIndex >= 0 && state.selectedVertexIndex !== closestPoint.index ) { candidateEdge = [state.selectedVertexIndex, closestPoint.index]; } state.activeVertexIndex = closestPoint.index; state.selectedVertexIndex = closestPoint.index; state.spawnVertexIndex = closestPoint.index; camera.taint(); this.setCursor('move'); event.capture(); } }, endPress: function(event) { //console.log('end press', state, exitedDeadZone); if (!exitedDeadZone && event.insideDeadZone(5)) { const closestPoint = getClosestPoint(event.x, event.y); if (closestPoint.index >= 0 && closestPoint.distance < 25) { if (candidateEdge) { addEdge(graph, candidateEdge); } event.stopPropagation(); state.selectedVertexIndex = closestPoint.index; camera.taint(); } else if (state.spawnVertexIndex >= 0) { updateViewportSize(); var projected = vec3create(); var projectionViewInverse = mat4invert( mat4create(), camera.projectionView ); var p = graph.vertices[state.spawnVertexIndex]; vec3transformMat4(projected, p, camera.projectionView); projected[0] = (2.0 * event.x) / viewportSize[0] - 1.0; projected[1] = 1.0 - (2.0 * event.y) / viewportSize[1]; const newVertex = vec3transformMat4( vec3create(), projected, projectionViewInverse ); computeAdjacency(graph); if (graph.edgeAdjacency[state.spawnVertexIndex * 3 + 2] === -1) { graph.vertices.push(newVertex); graph.edges.push([ state.spawnVertexIndex, graph.vertices.length - 1 ]); delete graph.vertexAdjacency; delete graph.edgeAdjacency; camera.taint(); state.spawnVertexIndex = state.selectedVertexIndex = graph.vertices.length - 1; event.stopPropagation(); } } } state.activeVertexIndex = -1; state.candidateEdge = null; }, passiveMove: function(event) { const closestPoint = getClosestPoint(event.x, event.y); if (closestPoint.index >= 0 && closestPoint.distance < 25) { state.hoverVertexIndex = closestPoint.index; camera.taint(); this.setCursor('move'); } else { state.hoverVertexIndex = -1; this.setCursor(null); camera.taint(); } }, capturedMove: function(event) { //console.log('captured move'); if (event.insideDeadZone(5)) return; exitedDeadZone = true; updateViewportSize(); var projected = vec3create(); var projectionViewInverse = mat4invert( mat4create(), camera.projectionView ); camera.taint(); state.selectedVertexIndex = state.activeVertexIndex; var p = graph.vertices[state.selectedVertexIndex]; vec3transformMat4(projected, p, camera.projectionView); projected[0] = (2.0 * event.x) / viewportSize[0] - 1.0; projected[1] = 1.0 - (2.0 * event.y) / viewportSize[1]; vec3transformMat4(p, projected, projectionViewInverse); }, endCapture: function(event) {} }; }42:T627,function createCameraTool(state, camera) { const graph = state.graph; const element = camera.element; return { keyUp: function(event) { switch (event.originalEvent.keyCode) { case 65: // a if (state.selectedVertexIndex >= 0) { const vertex = graph.vertices[state.selectedVertexIndex]; vec3copy(camera.center, vertex); camera.taint(); } else { vec3copy(camera.center, computeCentroid(graph)); camera.taint(); } break; } }, beginPress: function(event) { event.capture(); this.setCursor('grabbing'); }, endPress: function(event) { if (event.insideDeadZone(5)) { state.selectedVertexIndex = -1; camera.taint(); } }, capturedMove: function(event) { if (event.originalEvent.shiftKey) { camera.pan([ event.deltaX / element.offsetWidth, event.deltaY / element.offsetHeight ]); } else { camera.rotate( [ -(event.previousX / element.offsetWidth - 0.5), -(event.previousY / element.offsetHeight - 0.5) ], [ -(event.x / element.offsetWidth - 0.5), -(event.y / element.offsetHeight - 0.5) ] ); } camera.taint(); }, wheel: function(event) { event.originalEvent.preventDefault(); camera.zoom(event.deltaY * 0.03); camera.taint(); }, endCapture: function() { this.setCursor(null); } }; }43:T766,// Retrieved from: https://github.com/mattdesl/mouse-event-offset // // The MIT License (MIT) Copyright (c) 2014 Matt DesLauriers // // Permission is hereby granted, free of charge, to any person obtaining a copy // of this software and associated documentation files (the "Software"), to deal // in the Software without restriction, including without limitation the rights // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell // copies of the Software, and to permit persons to whom the Software is // furnished to do so, subject to the following conditions: // // The above copyright notice and this permission notice shall be included in // all copies or substantial portions of the Software. // // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. mouseEventOffset = { var rootPosition = { left: 0, top: 0 }; function mouseEventOffset(ev, target, out) { target = target || ev.currentTarget || ev.srcElement; if (!Array.isArray(out)) { out = [0, 0]; } var cx = ev.clientX || 0; var cy = ev.clientY || 0; var rect = getBoundingClientOffset(target); out[0] = cx - rect.left; out[1] = cy - rect.top; return out; } function getBoundingClientOffset(element) { if ( element === window || element === document || element === document.body ) { return rootPosition; } else { return element.getBoundingClientRect(); } } return mouseEventOffset; }44:T436,LICENSE = "mit" /* Copyright (c) 2020 Ricky Reusser Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */45:[{"id":"7aa788868cf07a97bcf964e6dc6d755c7e258d021c56f3b773e9a2f38b2084c2a7c0f18a543ca6efd33697c72f0b7514d5c33b3a5ad2ee6df2108a84e1d0ef68","href":"https://static.observableusercontent.com/files/7aa788868cf07a97bcf964e6dc6d755c7e258d021c56f3b773e9a2f38b2084c2a7c0f18a543ca6efd33697c72f0b7514d5c33b3a5ad2ee6df2108a84e1d0ef68","name":"klein-quartic.json","type":"application/json","lastModified":1588175506029.997,"size":56637},{"id":"3429461afc80952329592004ff09f1be2a5b3b48e4fa31b56f68fe0337d82c06e0adfad4249735479028522344af6de3df0a999536056b611151122c881db283","href":"https://static.observableusercontent.com/files/3429461afc80952329592004ff09f1be2a5b3b48e4fa31b56f68fe0337d82c06e0adfad4249735479028522344af6de3df0a999536056b611151122c881db283","name":"IMG_3353.jpg","type":"image/jpeg","lastModified":1735071913420.111,"size":756252},{"id":"1176e7fad2a420d228f5df155bfd24be06983f5fbf4234124abf8cfd514d24993f9e184cbdbc36ff0fecb010739e8ff5a713247944c186fdf82b877a42bf85ee","href":"https://static.observableusercontent.com/files/1176e7fad2a420d228f5df155bfd24be06983f5fbf4234124abf8cfd514d24993f9e184cbdbc36ff0fecb010739e8ff5a713247944c186fdf82b877a42bf85ee","name":"double-torus.json","type":"application/json","lastModified":1588387098736.717,"size":19786},{"id":"e1fa5b0e879607a25bbbc2ffcb0170fca6ba4b5b2652a0f0df3775c751c6ccf0bbaa30687d6c2d9bfeefa71c27d394f8aac824f330620995a5d647d57ad84777","href":"https://static.observableusercontent.com/files/e1fa5b0e879607a25bbbc2ffcb0170fca6ba4b5b2652a0f0df3775c751c6ccf0bbaa30687d6c2d9bfeefa71c27d394f8aac824f330620995a5d647d57ad84777","name":"mess-of-vertices.json","type":"application/json","lastModified":1588093650564.456,"size":16124},{"id":"bba3f0212ace95304b9a51f0123c4abc3b62330683f86a642463d991b174d9becbaf99999805bffaac6104b94bb6123ee6ddf74894a51e4d066291e7ddcec820","href":"https://static.observableusercontent.com/files/bba3f0212ace95304b9a51f0123c4abc3b62330683f86a642463d991b174d9becbaf99999805bffaac6104b94bb6123ee6ddf74894a51e4d066291e7ddcec820","name":"measurements.jpg","type":"image/jpeg","lastModified":1588256495487.32,"size":85307},{"id":"440345c914cf62fcaffd3fff15c652f61682adf9119ea88ce935e644bab9d9e1784af14164deedb41747f6d54344b878109a6217a9ba9b16b24c67c2b44fab63","href":"https://static.observableusercontent.com/files/440345c914cf62fcaffd3fff15c652f61682adf9119ea88ce935e644bab9d9e1784af14164deedb41747f6d54344b878109a6217a9ba9b16b24c67c2b44fab63","name":"genus-3-extended-torus.json","type":"application/json","lastModified":1588108721374.165,"size":25320},{"id":"a148f1c143188de55a41b12791380026e0c0a5420e9d65070d034aa3dd6f7f5f914d91fc0d3ac67e70a62340eaeb466a7aeb624becb3c83f1995234c429728cc","href":"https://static.observableusercontent.com/files/a148f1c143188de55a41b12791380026e0c0a5420e9d65070d034aa3dd6f7f5f914d91fc0d3ac67e70a62340eaeb466a7aeb624becb3c83f1995234c429728cc","name":"genus-3-extended-torus@1.json","type":"application/json","lastModified":1588109798942.049,"size":34043},{"id":"e0e175da2922fa1d47825c0a0001cd3b6db9f9d6e872c04abf2fa068c0649cf37f8a4084ab85eac11359d01d464350f3b9b33d7a0d682b526999b95063a4ecf5","href":"https://static.observableusercontent.com/files/e0e175da2922fa1d47825c0a0001cd3b6db9f9d6e872c04abf2fa068c0649cf37f8a4084ab85eac11359d01d464350f3b9b33d7a0d682b526999b95063a4ecf5","name":"klein-quartic@1.json","type":"application/json","lastModified":1588180742408.913,"size":60330},{"id":"a139509092ab0080b3c1241f830977069dc68e4a7ea9834d668f9d9d760961b792b8e23f0f9212337cbd94d436a85d99a788b2fc4d6ef13d562b49b2ef35a310","href":"https://static.observableusercontent.com/files/a139509092ab0080b3c1241f830977069dc68e4a7ea9834d668f9d9d760961b792b8e23f0f9212337cbd94d436a85d99a788b2fc4d6ef13d562b49b2ef35a310","name":"spiky@1.json","type":"application/json","lastModified":1587227724410.199,"size":18582},{"id":"b31fdfb8b21f79a14cf81320b73fa344c07421f154e7d0dbfaded7dfa5ae73ed3007ffc9ed572e262de9b4bcd031823de18f474891190a2401eb6448c5898f47","href":"https://static.observableusercontent.com/files/b31fdfb8b21f79a14cf81320b73fa344c07421f154e7d0dbfaded7dfa5ae73ed3007ffc9ed572e262de9b4bcd031823de18f474891190a2401eb6448c5898f47","name":"double-fullerene.json","type":"application/json","lastModified":1587266547742.731,"size":11799},{"id":"2bd5ec5f8ffe634d501442964b31454eb84d22d969110af8735a4195e2a543a9006475ab026c38ca4c936158bd8a9185482332f5d4a7817abf78ae6852d7d785","href":"https://static.observableusercontent.com/files/2bd5ec5f8ffe634d501442964b31454eb84d22d969110af8735a4195e2a543a9006475ab026c38ca4c936158bd8a9185482332f5d4a7817abf78ae6852d7d785","name":"spikyball.jpg","type":"image/jpeg","lastModified":1587269852053.562,"size":382891},{"id":"8c59424c3fbed403e573864733e1bf196fd469dd63f88893629a9dbebf68820ade9bded97d440903bf482e29b642cd27191fd9154384756152c414402b12f9d1","href":"https://static.observableusercontent.com/files/8c59424c3fbed403e573864733e1bf196fd469dd63f88893629a9dbebf68820ade9bded97d440903bf482e29b642cd27191fd9154384756152c414402b12f9d1","name":"c360-torus.json","type":"application/json","lastModified":1587272977637.634,"size":26518},{"id":"dff7700c3743989f282f9e58f71ae9d7596f5c78efa149c5e9a7717a7066a9c6b1870085b4aa7922288c7f3cdce4660b82fb0de5923185c165c3469d5b784037","href":"https://static.observableusercontent.com/files/dff7700c3743989f282f9e58f71ae9d7596f5c78efa149c5e9a7717a7066a9c6b1870085b4aa7922288c7f3cdce4660b82fb0de5923185c165c3469d5b784037","name":"capsule.json","type":"application/json","lastModified":1587271307610.562,"size":14900},{"id":"285549ab8794137fcd23df05ec4e9092c4a9fa65e3b32c2c6a22ddf0320eca5e14553c6508e4977271b82a1225eda231cec6f30a027bb8440ed879d1d3431ef6","href":"https://static.observableusercontent.com/files/285549ab8794137fcd23df05ec4e9092c4a9fa65e3b32c2c6a22ddf0320eca5e14553c6508e4977271b82a1225eda231cec6f30a027bb8440ed879d1d3431ef6","name":"fullerene.json","type":"application/json","lastModified":1587271462896.54,"size":4337},{"id":"3ecdf5c8f9be6ac3a837d7b6dd37485f7017be2ed7fc94d304c2b4f67d01bea5dc9528dd5b4c0507a3bb21fa38c2d7f30c4cd0decc7a6077c18e2ce3354780b1","href":"https://static.observableusercontent.com/files/3ecdf5c8f9be6ac3a837d7b6dd37485f7017be2ed7fc94d304c2b4f67d01bea5dc9528dd5b4c0507a3bb21fa38c2d7f30c4cd0decc7a6077c18e2ce3354780b1","name":"c240-torus.json","type":"application/json","lastModified":1587273846295.804,"size":17635},{"id":"5c4ad379870a7172f016427cfeb62e60bcc3fac83d22395ab102f8d0e94eaf6a4241a0d27b5d8ce5749698c05b0ee630b20582182e745050f0a5d9f2e9d37b0e","href":"https://static.observableusercontent.com/files/5c4ad379870a7172f016427cfeb62e60bcc3fac83d22395ab102f8d0e94eaf6a4241a0d27b5d8ce5749698c05b0ee630b20582182e745050f0a5d9f2e9d37b0e","name":"dodecahedron.json","type":"application/json","lastModified":1587274077976.671,"size":1458},{"id":"89e6cd62cbc3ba07f7f8e42357d426f9fbb8f9f607e3e0f11c7036fcc512d9dab8712b3fe3c272f93865bcaf88ab02918e2ddb226129ee9efa669eab89f9b7f3","href":"https://static.observableusercontent.com/files/89e6cd62cbc3ba07f7f8e42357d426f9fbb8f9f607e3e0f11c7036fcc512d9dab8712b3fe3c272f93865bcaf88ab02918e2ddb226129ee9efa669eab89f9b7f3","name":"c180-fullerene.json","type":"application/json","lastModified":1587274652385.525,"size":13068},{"id":"359455189eea4a1145be307cc8807dcca71442982915a220265a52dec420ca5a42106a8488dbf449491da526f91a1f60798d599661aa0be7eb477ebb3b77d33e","href":"https://static.observableusercontent.com/files/359455189eea4a1145be307cc8807dcca71442982915a220265a52dec420ca5a42106a8488dbf449491da526f91a1f60798d599661aa0be7eb477ebb3b77d33e","name":"c28-57-d7d.json","type":"application/json","lastModified":1587274899625.899,"size":2012},{"id":"f5e02e4b9d7f7a440b3231d45943410bfdc50ac98c4b7275dfe17f746609d7871c653b0901c2fead87d894b52cdf4caa2e523aa5e5ac2848936a9bb4790f9021","href":"https://static.observableusercontent.com/files/f5e02e4b9d7f7a440b3231d45943410bfdc50ac98c4b7275dfe17f746609d7871c653b0901c2fead87d894b52cdf4caa2e523aa5e5ac2848936a9bb4790f9021","name":"c28-td-56.json","type":"application/json","lastModified":1587275095319.12,"size":2039},{"id":"ee4ed30808162fdbff7f048268befca6b331881585e4e5e31ea05d66aafeb6190f622b2cffad4712f835b87b364fa35de96bbaf7c7a134b279f45a877d1cf038","href":"https://static.observableusercontent.com/files/ee4ed30808162fdbff7f048268befca6b331881585e4e5e31ea05d66aafeb6190f622b2cffad4712f835b87b364fa35de96bbaf7c7a134b279f45a877d1cf038","name":"c120-peanut-fulleroid.json","type":"application/json","lastModified":1587276474091.308,"size":8703},{"id":"40df7e811a5f2b9b46905da0db746bc46aff5c9ce62808034f8346d3daf566feb14aacf6cd1015d5ee97dc1ed27f42920c248bb71d1b0a211641d03126d8bfaf","href":"https://static.observableusercontent.com/files/40df7e811a5f2b9b46905da0db746bc46aff5c9ce62808034f8346d3daf566feb14aacf6cd1015d5ee97dc1ed27f42920c248bb71d1b0a211641d03126d8bfaf","name":"c320-fullerene.json","type":"application/json","lastModified":1587277211558.498,"size":23443},{"id":"24028e59e3e13cdc1ddc67373df2939cc99e04c0cb72123f3a4c4f9949d1cf2ab619ec68114e90926922a61a7c643d75cb23c11aa6b1bc3494c1aee0e7cc9f2f","href":"https://static.observableusercontent.com/files/24028e59e3e13cdc1ddc67373df2939cc99e04c0cb72123f3a4c4f9949d1cf2ab619ec68114e90926922a61a7c643d75cb23c11aa6b1bc3494c1aee0e7cc9f2f","name":"torsion.png","type":"image/png","lastModified":1587280720955.637,"size":53226},{"id":"06397d180d434869e0902d4b309d5cd3c0a4906d503fde826ba604bbe60bf3c6b524826dadce9f2886e96aaa1b138e6b7db37b30b0d0b5824761344e077ad3da","href":"https://static.observableusercontent.com/files/06397d180d434869e0902d4b309d5cd3c0a4906d503fde826ba604bbe60bf3c6b524826dadce9f2886e96aaa1b138e6b7db37b30b0d0b5824761344e077ad3da","name":"torsion-setup.png","type":"image/png","lastModified":1587281073271.267,"size":100834},{"id":"89dccf254f8755ae6a0d1910af95cf8f08d32820ad0a1bba395b71bbdfaf4f97d469ee5775e7e49552bcbf1baab5f0109a2e57ee4b02ca988358e9686ce700ad","href":"https://static.observableusercontent.com/files/89dccf254f8755ae6a0d1910af95cf8f08d32820ad0a1bba395b71bbdfaf4f97d469ee5775e7e49552bcbf1baab5f0109a2e57ee4b02ca988358e9686ce700ad","name":"C310-D5h-567.json","type":"application/json","lastModified":1587276017276.792,"size":22867},{"id":"d6b5ea4652c4dd8c47498283b7c54534215f496cdb413812d7130fa5b6ada950274d2ae83b2c8b8c627c247bffc1ff2fe0068c57ecd5e17e095129a0e03e9bc0","href":"https://static.observableusercontent.com/files/d6b5ea4652c4dd8c47498283b7c54534215f496cdb413812d7130fa5b6ada950274d2ae83b2c8b8c627c247bffc1ff2fe0068c57ecd5e17e095129a0e03e9bc0","name":"metafullerene.json","type":"application/json","lastModified":1588192486673.79,"size":203596},{"id":"7bbdfdf9bf54e821a79db4096d775b44af074abfe7c13609b55327163e5909823e26fca04a20534778f97171488a4b8365bea8b02f51b45b19be8a5dd0acc998","href":"https://static.observableusercontent.com/files/7bbdfdf9bf54e821a79db4096d775b44af074abfe7c13609b55327163e5909823e26fca04a20534778f97171488a4b8365bea8b02f51b45b19be8a5dd0acc998","name":"cut.jpg","type":"image/jpeg","lastModified":1587333545394.395,"size":82761},{"id":"54e0d4daa1948afa53c2917b042fb0830209678bcec1715260a8b06d1918c946aee0667bb586154b92dc5a73931b081f347ce8a47fa5c8101ad4b29598f3d955","href":"https://static.observableusercontent.com/files/54e0d4daa1948afa53c2917b042fb0830209678bcec1715260a8b06d1918c946aee0667bb586154b92dc5a73931b081f347ce8a47fa5c8101ad4b29598f3d955","name":"interlock.jpg","type":"image/jpeg","lastModified":1587333704358.5,"size":44139},{"id":"684aea6362248aa27e8c96c490f94030bf98bf3a3d243d8e42779ebd98fd304718752bfaa08668d051946cf14125f2c1fc9e52f8368cab372a904bdc120ffbae","href":"https://static.observableusercontent.com/files/684aea6362248aa27e8c96c490f94030bf98bf3a3d243d8e42779ebd98fd304718752bfaa08668d051946cf14125f2c1fc9e52f8368cab372a904bdc120ffbae","name":"derivation.jpg","type":"image/jpeg","lastModified":1587336024501.797,"size":382822},{"id":"108bab81caf1bb59f7a55d16ec43bcb7b6ae442d7712a2add0c7a2410dfbbbf8d67385f03e158e0fee1ba8f7a486d8728a6440b50e4a0666cc6f4bd142ed81b5","href":"https://static.observableusercontent.com/files/108bab81caf1bb59f7a55d16ec43bcb7b6ae442d7712a2add0c7a2410dfbbbf8d67385f03e158e0fee1ba8f7a486d8728a6440b50e4a0666cc6f4bd142ed81b5","name":"axial.png","type":"image/png","lastModified":1587353137309.487,"size":32968},{"id":"19f229d9bfb51c5702f7764d7a81c56abb93cd141312e01034d3152fc1e9a42a90151707f573b16d1b7c04169a26c71e15b6b2f82fafdeb3ba5011148aee5885","href":"https://static.observableusercontent.com/files/19f229d9bfb51c5702f7764d7a81c56abb93cd141312e01034d3152fc1e9a42a90151707f573b16d1b7c04169a26c71e15b6b2f82fafdeb3ba5011148aee5885","name":"descent.png","type":"image/png","lastModified":1587324339348.395,"size":49930},{"id":"85c5997bcd60d3500b3769a5790c1575b144161f77eb1f4f0a11ca567a5dbaae4750d466914794e6932be17f888982a24d5e65a9a2ba3e271d2afc9a179f675d","href":"https://static.observableusercontent.com/files/85c5997bcd60d3500b3769a5790c1575b144161f77eb1f4f0a11ca567a5dbaae4750d466914794e6932be17f888982a24d5e65a9a2ba3e271d2afc9a179f675d","name":"c500-fullerene.json","type":"application/json","lastModified":1587325394690.769,"size":36549},{"id":"ba8cea49ce0f777b3b5bcf52ba928eac0ca2ca6e4f37deb6a04068064c5111d8bc378d66692083d12b4f07431e23da7bcfe8a45e2a859dd6378d3f040d9908c7","href":"https://static.observableusercontent.com/files/ba8cea49ce0f777b3b5bcf52ba928eac0ca2ca6e4f37deb6a04068064c5111d8bc378d66692083d12b4f07431e23da7bcfe8a45e2a859dd6378d3f040d9908c7","name":"angular.png","type":"image/png","lastModified":1587353142935.94,"size":48293},{"id":"215010cb67fc5d9382293f1b124f4795cca60c3a5e83d3737607af3569b50a45187ead920dd062ce09406f0c4462bd9cffb2aacb2445c295bdbce85f892b7d46","href":"https://static.observableusercontent.com/files/215010cb67fc5d9382293f1b124f4795cca60c3a5e83d3737607af3569b50a45187ead920dd062ce09406f0c4462bd9cffb2aacb2445c295bdbce85f892b7d46","name":"torsion@1.png","type":"image/png","lastModified":1587354524670.088,"size":49004},{"id":"9eb3d701df5668f23917a3cfaa9771379b488cc0bdfe8d634f735da34294a0ec5f38c9f6db7eabee83e84d228d6ac5330a679d4078ddd99a84197ff44c121096","href":"https://static.observableusercontent.com/files/9eb3d701df5668f23917a3cfaa9771379b488cc0bdfe8d634f735da34294a0ec5f38c9f6db7eabee83e84d228d6ac5330a679d4078ddd99a84197ff44c121096","name":"metafullerene-2.json","type":"application/json","lastModified":1588200697738.066,"size":189245},{"id":"9a6266c785181387edd1e4cab63c282ce15797fce68a88b21c6ab716c4a7951d8a4b70cd513e377662bc0d1894b0b3a7b4f53c020e5fd47513a82d2d554e923e","href":"https://static.observableusercontent.com/files/9a6266c785181387edd1e4cab63c282ce15797fce68a88b21c6ab716c4a7951d8a4b70cd513e377662bc0d1894b0b3a7b4f53c020e5fd47513a82d2d554e923e","name":"interlock@1.jpg","type":"image/jpeg","lastModified":1587600466212.849,"size":41884},{"id":"f220e2d7f29b956c39640b7dc4173f211fa43c14d7dec7b30d4dab14b4082356e621ae77b433221941bef90638b84398458b1ed0cf49ebe17151721aa0be53f8","href":"https://static.observableusercontent.com/files/f220e2d7f29b956c39640b7dc4173f211fa43c14d7dec7b30d4dab14b4082356e621ae77b433221941bef90638b84398458b1ed0cf49ebe17151721aa0be53f8","name":"model (1).json","type":"application/json","lastModified":1672804863016.014,"size":40515}] 2f:{"title":"Toiletpaperfullerenes and Charmin Nanotubes","cells":[{"id":4179,"value":"# Toiletpaperfullerenes and Charmin Nanotubes","pinned":false,"hidden":false,"mode":"md"},{"id":4185,"value":"*[Read this notebook ➡️](https://rreusser.github.io/notebooks/charmin-nanotubes-and-toiletpaperfullerenes/) on my personal website via [Observable Notebook Kit](https://observablehq.com/notebook-kit/kit).*","pinned":false,"hidden":false,"mode":"md"},{"id":2779,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":2750,"value":"html`\n

The finished product, composed of 49 recycled toilet paper tubes (and which I realize after building sorta brings things full circle and looks a bit like a coronavirus).

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3337,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3328,"value":"html`\n

The pattern of cuts illustrated on a flattened toilet paper tube.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3354,"value":"md`Assembling the joints is straightforward. The pieces lock together in pleasing ${tex`120^\\circ`} angles, requiring no additional fasteners up until the very last piece of the model, which requires a cut and some tape.\n\nThe illustration below shows how the joints interlock. I'd give more instruction, but if you actually want to do this, there's no better way to learn than through experimentation. After some fumbling around, I learned to always attach new pieces by branching off in the same direction, after which it becomes quite repetitive.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3332,"value":"html`\n

Three loops link together to form an interlocked joint.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3379,"value":"md`Assembling larger patterns is where things start to get frustrating and difficult. I have little advice here except to rely heavily on patterns, examples, and patience. And perhaps the simulator below. For inspiration, the best paper I found is [\"The Topology of Fullerenes\"](https://onlinelibrary.wiley.com/doi/full/10.1002/wcms.1207) by Schwerdtfeger, Wirz, and Avery.\n\nIn my initial attempt, I started making a torus and failed to appreciate just how much of a material shortage I'd encounter. After some iteration though, I tried out different constructions. My favorite so far is our rabbit tunnel.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4115,"value":"

A semi-completed Y-joint tunnel with rabbit (barely visible, hiding from curious dog) inside.

","pinned":false,"hidden":false,"mode":"md"},{"id":3431,"value":"md`With quiet sheltered-in-place weekends and little access to toilet paper (at which point these constructions quickly became the least of my worries), I dismantled my initial constructions, explored construction via simulation, and eventually settled on the model pictured at the top of the notebook. The rest of this notebook steps through simulation of these models.\n\nI now return to the material collection phase. 🧻🧻🧻🧻🧻🧻🧻`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2675,"value":"md`## Simulation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3466,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2607,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2606,"value":"viewof presetGraph = select({\n options: Object.keys(presetGraphs),\n value: 'C260-I[5,7]',\n title: 'Preset'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2648,"value":"DOM.download(\n () =>\n new Blob(\n [\n JSON.stringify({\n vertices: ctx.state.graph.vertices,\n edges: ctx.state.graph.edges\n })\n ],\n {\n type: \"application/json\"\n }\n ),\n \"model.json\",\n \"Download current graph as JSON\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3814,"value":"viewof reset = button({ value: 'Reset' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"viewof simulate = checkbox({ value: 'simulate', options: ['simulate'] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4061,"value":"viewof strainColoring = slider({\n description: 'Axial strain coloring',\n min: 0,\n max: 5,\n step: 0.1,\n value: 1.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4023,"value":"viewof borderWidth = slider({\n min: 0,\n max: 5,\n step: 0.5,\n value: 3,\n description: \"Border width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4018,"value":"viewof pointSize = slider({\n min: 0.5,\n max: 5,\n step: 0.5,\n value: 3,\n description: \"Vertex size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":" {\n updateParameters;\n const el = drawGraph(ctx, invalidation);\n const fig = html`\n

\n ${el}\n

${md`Select the [starter preset above](#presetGraph) to experiement. Click a vertex to select, then either click to add a new vertex or click an existing vertex to create a new connection. Spacebar to deselect. Backspace deletes vertices, s/c splits/collapses vertices of degree 2. e to explode a vertex. Drag to rotate, shift + drag to pan, and a to aim the camera at the selected vertex.`}

\n \n `;\n return fig;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2635,"value":"viewof iterations = slider({\n description: 'Iterations per frame',\n min: 0,\n max: 200,\n step: 1,\n value: 30\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"viewof k = slider({\n min: 0,\n max: 2,\n step: 0.01,\n value: 1,\n description: \"Axial spring constant\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"viewof l0 = slider({\n min: 0.1,\n max: 2,\n step: 0.01,\n value: 1,\n description: \"Equilibrium length, l0\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"viewof theta0 = slider({\n min: 1,\n max: 180,\n step: 1,\n value: 150,\n description: \"Equilibrium bending angle, θ₀\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"viewof kBend = slider({\n min: 0,\n max: 2,\n step: 0.01,\n value: 0.3,\n description: \"Bending spring constant\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1270,"value":"viewof kTorsion = slider({\n min: 0,\n max: 0.2,\n step: 0.01,\n value: 0.1,\n description: \"Torsional spring constant\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3863,"value":"graphCopy = {\n reset;\n return cloneGraph(presetGraphs[presetGraph]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3011,"value":"updateGraph = {\n ctx.state = createState(graphCopy);\n createInteractions(ctx.state, ctx.camera, invalidation);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3050,"value":"updateParameters = {\n // Force a dependency on graph updates\n updateGraph;\n\n // We add these parameters *after* setting the graph so that changing parameters\n // doesn't reset the graph.\n ctx.state.k = k;\n ctx.state.l0 = l0;\n ctx.state.theta0 = theta0;\n ctx.state.kBend = kBend * l0 * l0;\n ctx.state.kTorsion = kTorsion * l0 * l0;\n ctx.state.iterations = iterations;\n ctx.state.simulate = simulate;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2512,"value":"md`## Physical model`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3094,"value":"md`\n\nThe sections below outline how the simulation works. We take a simple approach to computing physical configuration in three dimensions. We write down an energy function that's minimized by nice, physically pleasant configurations, then directly minimize the energy via [gradient descent](https://en.wikipedia.org/wiki/Gradient_descent) on the vertex positions.\n\nThe concept of gradient descent is simple. We compute the change in energy with respect to independent changes in each vertex position, then move each vertex slightly downhill, opposite the direction of the gradient. There are more efficient ways to minimize energy, but we simply take a simultaneous small step for all vertices.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3096,"value":"html`\n

Gradient descent minimizes energy by taking incremental steps downhill.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2718,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":3166,"value":"md`## Axial stiffness\n\nWe start simple and add lengthwise (axial) stiffness to enforce uniform length. Given an edge connecting vertices ${tex`a`} and ${tex`b`}, we denote the length of the edge ${tex`r_{ab}`} and the equilibrium length ${tex`r_0`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3583,"value":"html`\n

Points ${tex`a`} and ${tex`b`} are separated by radius ${tex`r_{ab}`}.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3646,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"function computeSpringEnergyGradient(gradient, graph, l0, k) {\n for (var iEdge = 0; iEdge < graph.edges.length; iEdge++) {\n var edge = graph.edges[iEdge];\n var e0 = 3 * edge[0];\n var e1 = 3 * edge[1];\n var p0 = graph.vertices[edge[0]];\n var p1 = graph.vertices[edge[1]];\n var l = vec3distance(p0, p1);\n var c = k * (1 - l0 / l);\n var fx = c * (p0[0] - p1[0]);\n var fy = c * (p0[1] - p1[1]);\n var fz = c * (p0[2] - p1[2]);\n gradient[e0 + 0] += fx;\n gradient[e1 + 0] -= fx;\n gradient[e0 + 1] += fy;\n gradient[e1 + 1] -= fy;\n gradient[e0 + 2] += fz;\n gradient[e1 + 2] -= fz;\n }\n return gradient;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3158,"value":"graph2 = ({\n vertices: [\n [-1, 0, 0],\n [-0.5, -0.866, 0],\n [0.5, -0.866, 0],\n [1, 0, 0],\n [0.5, 0.866, 0],\n [-0.5, 0.866, 0]\n ],\n edges: [[0, 1], [1, 2], [2, 3], [3, 4], [4, 5], [5, 0]]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3128,"value":"{\n updateParameters2;\n const el = drawGraph(ctx2, invalidation);\n const fig = html`\n

\n ${el}\n

Axial stiffness enforces edge length but doesn't adequately constrain the structure. Move the points in three dimensions and observe that the structure is not maintained.

\n \n `;\n return fig;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3174,"value":"viewof l0_2 = slider({\n min: 0.1,\n max: 2,\n step: 0.01,\n value: 1,\n description: \"Equilibrium length\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3190,"value":"viewof k_2 = slider({\n min: 0,\n max: 2,\n step: 0.01,\n value: 1,\n description: \"Axial spring constant\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3119,"value":"updateGraph2 = {\n ctx2.state = createState(graph2);\n createInteractions(ctx2.state, ctx2.camera, invalidation);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3125,"value":"updateParameters2 = {\n // Force a dependency on graph updates\n updateGraph2;\n\n // We add these parameters *after* setting the graph so that changing parameters\n // doesn't reset the graph.\n ctx2.state.k = k_2;\n ctx2.state.l0 = l0_2;\n ctx2.state.theta0 = theta0;\n ctx2.state.kBend = 0;\n ctx2.state.kTorsion = 0;\n ctx2.state.iterations = 1;\n ctx2.state.simulate = true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3687,"value":"md`## Dihedral stiffness`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3689,"value":"html`\n

The segment connecting ${tex`a`}, ${tex`b`}, and ${tex`c`} form angle ${tex`\\theta`}.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3169,"value":"md`Axial stiffness alone clearly does not accomplish our goal of maintaining pleasant configurations. We now add an additional type of stiffness: *dihedral stiffness*. The rationale is that edges meet at a preferred angle, ${tex`\\theta_0`}. We therefore define the energy function ${tex.block`E_{dihedral} = k_{dihedral}(\\theta - \\theta_0)^2.`} I'm sure chemistry has a lot to say about this topic, but it seems to be the case based on the structures produced that ${tex`180^\\circ`} is the desired pairwise dihedral angle, and that angles of ${tex`120^\\circ`} are simply the resulting compromise wherever three edges meet a vertex and result in three pairwise dihedral angles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":3171,"value":"graph3 = ({\n vertices: [\n [-1, 0, 0],\n [-0.5, -0.866, 0],\n [0.5, -0.866, 0],\n [1, 0, 0],\n [0.5, 0.866, 0],\n [-0.5, 0.866, 0]\n ],\n edges: [[0, 1], [1, 2], [2, 3], [3, 4], [4, 5], [5, 0]]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3207,"value":"{\n updateParameters3;\n const el = drawGraph(ctx3, invalidation);\n const fig = html`\n

\n ${el}\n

The combination of dihedral and axial stiffness is enough to maintain sructure. Move the points in three dimensions and observe that the ring maintains its structure.

\n \n `;\n return fig;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3203,"value":"viewof kBend_3 = slider({\n min: 0,\n max: 2,\n step: 0.01,\n value: 0.3,\n description: \"Bending spring constant\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3205,"value":"viewof theta0_3 = slider({\n min: 1,\n max: 180,\n step: 1,\n value: 120,\n description: \"Equilibrium bending angle, θ₀\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3198,"value":"updateGraph3 = {\n ctx3.state = createState(graph3);\n createInteractions(ctx3.state, ctx3.camera, invalidation);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3200,"value":"updateParameters3 = {\n // Force a dependency on graph updates\n updateGraph3;\n\n // We add these parameters *after* setting the graph so that changing parameters\n // doesn't reset the graph.\n ctx3.state.k = 1;\n ctx3.state.l0 = 1;\n ctx3.state.theta0 = theta0_3;\n ctx3.state.kBend = kBend_3;\n ctx3.state.kTorsion = 0;\n ctx3.state.iterations = 1;\n ctx3.state.simulate = true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3218,"value":"md`## Torsional stiffness`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3869,"value":"md`Finally we tackle torsion about an edge.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2866,"value":"html`\n

Stiffness of the cardboard from which we construct the model generates a moment which pushes the six vertices toward a flat configuration.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3704,"value":"md`The figure above shows six adjacent vertices connected by an edge. Torsional stiffness of the cardboard produces a rotational force which causes vertices ${tex`c`}, ${tex`d`}, ${tex`e`}, and ${tex`f`} to rotate toward flat.`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2876,"value":"html`\n

We define unit vectors ${tex`\\alpha`}, ${tex`\\beta`}, and ${tex`\\gamma`} based on the six adjacent vertices.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2898,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":3694,"value":"md`Note importantly that if we did not normalize vectors ${tex`\\vec{\\alpha}`}, ${tex`\\vec{\\beta}`}, and ${tex`\\vec{\\gamma}`}, then ${tex`E_{torsion}`} would depend upon the distance between the vertices, and the simulation would either blow up or collapse to a point, depending on the sign of ${tex`E_{torsion}`}. As it stands though, the constraint that ${tex`\\vec{\\alpha}`}, ${tex`\\vec{\\beta}`}, and ${tex`\\vec{\\gamma}`} are unit vectors produces a strictly torsional force.\n\nComputing the gradient of the above function without an explosion of terms is a bit challenging. I spent a couple sheets of paper giving it a try before recalling why [Einstein summation notation](https://en.wikipedia.org/wiki/Einstein_notation) is so useful in vector calculus.\n\nThe page below illustrates the full derivation of all eighteen components of the gradient.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3435,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":3261,"value":"graph4 = ({\n vertices: [\n [-1, 0, 0.86],\n [-1, 0, -0.86],\n [-0.5, 0, 0],\n [0.5, 0, 0],\n [1, 0, -0.86],\n [1, 0, 0.86]\n ],\n edges: [[0, 2], [1, 2], [2, 3], [3, 4], [3, 5]]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3276,"value":"{\n updateParameters4;\n const el = drawGraph(ctx4, invalidation);\n const fig = html`\n

\n ${el}\n

Move the vertices above and observe that the addition of torsional stiffness keeps the above structure planar.

\n \n `;\n return fig;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3295,"value":"viewof kTorsion_4 = slider({\n min: 0,\n max: 0.05,\n step: 0.001,\n value: 0.025,\n precision: 3,\n description: \"Torsional spring constant\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3267,"value":"updateGraph4 = {\n ctx4.state = createState(graph4);\n createInteractions(ctx4.state, ctx4.camera, invalidation);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3269,"value":"updateParameters4 = {\n // Force a dependency on graph updates\n updateGraph4;\n\n // We add these parameters *after* setting the graph so that changing parameters\n // doesn't reset the graph.\n ctx4.state.k = 1;\n ctx4.state.l0 = 1;\n ctx4.state.theta0 = 180;\n ctx4.state.kBend = 0.5;\n ctx4.state.kTorsion = kTorsion_4;\n ctx4.state.iterations = 1;\n ctx4.state.simulate = true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2552,"value":"md`## Graph operations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2692,"value":"md`The graph is modeled as a simple set of vertices and edges.\n\nIn hindsight, I regret such a simple choice because it makes faces quite difficult to work out after the fact. Mikola Lysenko recommended his [planar-dual](https://github.com/mikolalysenko/planar-dual) module which extracts faces using a 2D projection of the graph. It worked, but I found it very sensitive to the particular parojection so that any faces which were inverted in the particular projection were omitted. There are workarounds, but something like a [half edge mesh](https://github.com/nmwsharp/DDGSpring2016/wiki/Halfedge-Mesh-Data-Structure) from the start would prevent needing such convoluted patches at the end.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2704,"value":"md`The operations below build a very simple adjacency graph. We cache it right on the \\`graph\\` object and simply delete the cached adjacency when connectivity changes, thus forcing recomputation the next time it's queried.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1284,"value":"function computeAdjacency(graph) {\n if (!graph.vertexAdjacency) {\n graph.vertexAdjacency = buildVertexAdjacency(graph);\n }\n if (!graph.edgeAdjacency) {\n graph.edgeAdjacency = buildEdgeAdjacency(graph);\n }\n return graph;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"function buildVertexAdjacency(graph) {\n var vertexAdjacency = new Int32Array(graph.vertices.length * 3);\n vertexAdjacency.fill(-1);\n function addAdjacency(vA, vB) {\n var idx = 3 * vA;\n if (vertexAdjacency[idx] >= 0) idx++;\n if (vertexAdjacency[idx] >= 0) idx++;\n if (vertexAdjacency[idx] >= 0)\n throw new Error('Too many connections for vertex ' + vA + '-' + vB + '!');\n vertexAdjacency[idx] = vB;\n }\n for (var iEdge = 0; iEdge < graph.edges.length; iEdge++) {\n var edge = graph.edges[iEdge];\n var vA = edge[0];\n var vB = edge[1];\n //console.log(edge);\n addAdjacency(vA, vB);\n addAdjacency(vB, vA);\n }\n return vertexAdjacency;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"function buildEdgeAdjacency(graph) {\n var edgeAdjacency = new Int32Array(graph.vertices.length * 3);\n edgeAdjacency.fill(-1);\n function addEdge(vertexIndex, edgeIndex) {\n var idx = 3 * vertexIndex;\n if (edgeAdjacency[idx] >= 0) idx++;\n if (edgeAdjacency[idx] >= 0) idx++;\n if (edgeAdjacency[idx] >= 0)\n throw new Error('Too many connections for edge ' + idx + '!');\n edgeAdjacency[idx] = edgeIndex;\n }\n for (var iEdge = 0; iEdge < graph.edges.length; iEdge++) {\n var edge = graph.edges[iEdge];\n addEdge(edge[0], iEdge);\n addEdge(edge[1], iEdge);\n }\n return edgeAdjacency;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2012,"value":"function clearCachedAdjacency(graph) {\n delete graph.vertexAdjacency;\n delete graph.edgeAdjacency;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2709,"value":"md`The operations below implement a few simple graph modification functions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1999,"value":"function isValid(graph) {\n const vertexCount = graph.vertices.length;\n for (let i = 0; i < graph.edges.length; i++) {\n const edge = graph.edges[i];\n const i0 = edge[0];\n const i1 = edge[1];\n if (i0 >= vertexCount || i1 >= vertexCount) return false;\n }\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1892,"value":"function addEdge(graph, newEdge) {\n computeAdjacency(graph);\n var e1 = graph.edgeAdjacency[newEdge[0] * 3];\n var e2 = graph.edgeAdjacency[newEdge[0] * 3 + 1];\n var e3 = graph.edgeAdjacency[newEdge[0] * 3 + 2];\n if (e3 >= 0 || graph.edgeAdjacency[newEdge[1] * 3 + 2] >= 0) return;\n function edgeEqual(ea, eb) {\n return (\n (ea[0] === eb[0] && ea[1] === eb[1]) ||\n (ea[0] === eb[1] && ea[1] === eb[0])\n );\n }\n if (e1 >= 0 && edgeEqual(graph.edges[e1], newEdge)) return false;\n if (e2 >= 0 && edgeEqual(graph.edges[e2], newEdge)) return false;\n if (e3 >= 0 && edgeEqual(graph.edges[e3], newEdge)) return false;\n graph.edges.push(newEdge);\n\n clearCachedAdjacency(graph);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1764,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1990,"value":"collapseVertex = function(graph, vertexIndex) {\n if (vertexIndex < 0) return vertexIndex;\n computeAdjacency(graph);\n if (degree(graph.edgeAdjacency, vertexIndex) !== 2) return vertexIndex;\n\n var edge = graph.edges[graph.edgeAdjacency[3 * vertexIndex]];\n var adjacentIndex = edge[0] === vertexIndex ? edge[1] : edge[0];\n\n let v0 = graph.vertexAdjacency[vertexIndex * 3];\n let v1 = graph.vertexAdjacency[vertexIndex * 3 + 1];\n\n deleteVertex(graph, vertexIndex);\n\n // We got rid of the vertex we want and must now decrement the adjacent vertices\n // *only if* their indices changed because they were after the deleted vertex\n if (v0 > vertexIndex) v0--;\n if (v1 > vertexIndex) v1--;\n graph.edges.push([v0, v1]);\n\n if (adjacentIndex > vertexIndex) adjacentIndex--;\n\n clearCachedAdjacency(graph);\n\n return adjacentIndex;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3933,"value":"function splitVertex(graph, vertexIndex) {\n if (vertexIndex < 0) return vertexIndex;\n computeAdjacency(graph);\n if (degree(graph.edgeAdjacency, vertexIndex) !== 2) return vertexIndex;\n\n var vertex = graph.vertices[vertexIndex];\n var edge = graph.edges[graph.edgeAdjacency[3 * vertexIndex]];\n var adjacentIndex = edge[0] === vertexIndex ? edge[1] : edge[0];\n var adjacentVertex = graph.vertices[adjacentIndex];\n\n var newVertex = [\n 0.5 * (vertex[0] + adjacentVertex[0]),\n 0.5 * (vertex[1] + adjacentVertex[1]),\n 0.5 * (vertex[2] + adjacentVertex[2])\n ];\n\n var newVertexIndex = graph.vertices.length;\n graph.vertices[newVertexIndex] = newVertex;\n graph.edges.push([adjacentIndex, newVertexIndex]);\n edge[edge[0] === vertexIndex ? 1 : 0] = newVertexIndex;\n\n clearCachedAdjacency(graph);\n\n return newVertexIndex;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3977,"value":"function explodeVertex(graph, vertexIndex) {\n if (vertexIndex < 0) return vertexIndex;\n computeAdjacency(graph);\n\n var edgeIndex1 = graph.edgeAdjacency[3 * vertexIndex + 1];\n var edgeIndex2 = graph.edgeAdjacency[3 * vertexIndex + 2];\n var vertex = graph.vertices[vertexIndex];\n\n if (edgeIndex1 >= 0) {\n var edge = graph.edges[edgeIndex1];\n edge[vertexIndex === edge[0] ? 0 : 1] = graph.vertices.length;\n graph.vertices.push(vertex.slice());\n }\n\n if (edgeIndex2 >= 0) {\n var edge = graph.edges[edgeIndex2];\n edge[vertexIndex === edge[0] ? 0 : 1] = graph.vertices.length;\n graph.vertices.push(vertex.slice());\n }\n\n clearCachedAdjacency(graph);\n\n return vertexIndex;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"function degree(edgeAdjacency, i) {\n if (edgeAdjacency[3 * i] === -1) return 0;\n if (edgeAdjacency[3 * i + 1] === -1) return 1;\n if (edgeAdjacency[3 * i + 2] === -1) return 2;\n return 3;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2563,"value":"function computeCentroid(graph) {\n const vertices = graph.vertices;\n let x = 0;\n let y = 0;\n let z = 0;\n for (var i = 0; i < vertices.length; i++) {\n const p = vertices[i];\n x += p[0];\n y += p[1];\n z += p[2];\n }\n x /= vertices.length;\n y /= vertices.length;\n z /= vertices.length;\n return [x, y, z];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2565,"value":"function translateGraph(graph, offset) {\n const vertices = graph.vertices;\n for (var i = 0; i < vertices.length; i++) {\n const p = vertices[i];\n p[0] += offset[0];\n p[1] += offset[1];\n p[2] += offset[2];\n }\n return graph;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2684,"value":"function cloneGraph(graph) {\n var newGraph = { vertices: [], edges: [] };\n for (var i = 0; i < graph.vertices.length; i++) {\n newGraph.vertices.push(graph.vertices[i].slice());\n }\n for (var i = 0; i < graph.edges.length; i++) {\n newGraph.edges.push(graph.edges[i].slice());\n }\n return newGraph;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"function iterate(graph, gamma, state) {\n var gradient = new Float64Array(graph.vertices.length * 3);\n if (state.k > 0)\n computeSpringEnergyGradient(gradient, graph, state.l0, state.k);\n if (state.kBend > 0)\n computeJoinAngleEnergyGradient(gradient, graph, state.theta0, state.kBend);\n if (state.kTorsion > 0)\n computeTorsionalEnergyGradient(gradient, graph, state.kTorsion);\n for (var i = 0; i < graph.vertices.length; i++) {\n if (i === state.activeVertexIndex) continue;\n graph.vertices[i][0] -= gradient[i * 3 + 0] * gamma;\n graph.vertices[i][1] -= gradient[i * 3 + 1] * gamma;\n graph.vertices[i][2] -= gradient[i * 3 + 2] * gamma;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2502,"value":"md`## Drawing commands`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"function flattenEdges(graph) {\n var a = new Float32Array(graph.edges.length * 6);\n for (var i = 0, i6 = 0; i < graph.edges.length; i++, i6 += 6) {\n var e = graph.edges[i];\n var ia = e[0];\n var ib = e[1];\n a[i6 + 0] = graph.vertices[ia][0];\n a[i6 + 1] = graph.vertices[ia][1];\n a[i6 + 2] = graph.vertices[ia][2];\n a[i6 + 3] = graph.vertices[ib][0];\n a[i6 + 4] = graph.vertices[ib][1];\n a[i6 + 5] = graph.vertices[ib][2];\n }\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2525,"value":"function flattenVertices(graph) {\n var a = new Float32Array(graph.vertices.length * 3);\n for (var i = 0, i3 = 0; i < graph.vertices.length; i++, i3 += 3) {\n a[i3 + 0] = graph.vertices[i][0];\n a[i3 + 1] = graph.vertices[i][1];\n a[i3 + 2] = graph.vertices[i][2];\n }\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1295,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":2493,"value":"md`## WebGL context and camera`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"function createContext(opts) {\n opts = Object.assign(\n {\n width: Math.min(window.outerWidth - 80, width),\n height: Math.min(window.outerHeight - 80, Math.floor(width * 0.9)),\n eye: [0, 1, -20]\n },\n opts\n );\n const pixelRatio = devicePixelRatio;\n const container = document.createElement('div');\n container.style.width = `${opts.width}px`;\n container.style.height = `${opts.height}px`;\n const regl = createREGL({\n container,\n pixelRatio,\n extensions: ['ANGLE_instanced_arrays']\n });\n const camera = reglCamera(regl, { eye: opts.eye });\n const data = {};\n function cache(evaluate, cacheBust) {\n Object.keys(evaluate).forEach(key => {\n if (cacheBust) {\n data[key] = evaluate[key]();\n } else {\n data[key] = data[key] || evaluate[key]();\n }\n });\n return data;\n }\n return { regl, container, camera, data, cache };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":2980,"value":"ctx = createContext({\n eye: [0, 1, -20]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3116,"value":"ctx2 = createContext({\n width: Math.min(700),\n height: Math.max(400, Math.floor(Math.min(700) * 0.7)),\n eye: [0, 0, -4]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3195,"value":"ctx3 = createContext({\n width: Math.min(700),\n height: Math.max(400, Math.floor(Math.min(700) * 0.7)),\n eye: [0, 0, -4]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3263,"value":"ctx4 = createContext({\n width: Math.min(700),\n height: Math.max(400, Math.floor(Math.min(700) * 0.7)),\n eye: [0, 2, -3]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2521,"value":"md`## Interactions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2712,"value":"md`The class below tries to implement a simple interaction controller which I don't very much like. It allows plugging in tools which are called in sequence on event input until one of them elects to capture the event. This allows layering a vertex editing tool on top of a camera controller without a particularly special case for camera control. The downside is that it's not done well and cleanly enough to be quite the right abstraction.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"function createInteractions(state, camera, invalidation) {\n const interactions = new InteractionController(camera.element, [\n createVertexTool(state, camera),\n createCameraTool(state, camera)\n ]);\n invalidation.then(interactions.destroy);\n return interactions;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"function getClosestPointIndex(\n graph,\n projectionView,\n mousePosition,\n viewportSize\n) {\n const vertices = graph.vertices;\n const projected = vec3create();\n const uv = vec2create();\n let minIndex = -1;\n let minDistance = Infinity;\n for (var i = 0; i < vertices.length; i++) {\n vec3transformMat4(projected, vertices[i], projectionView);\n if (projected[2] < -1 || projected[2] > 1) continue;\n uv[0] = (0.5 + 0.5 * projected[0]) * viewportSize[0];\n uv[1] = (0.5 - 0.5 * projected[1]) * viewportSize[1];\n var dx = mousePosition[0] - uv[0];\n var dy = mousePosition[1] - uv[1];\n var r2 = dx * dx + dy * dy;\n if (r2 < minDistance * minDistance) {\n minDistance = Math.sqrt(r2);\n minIndex = i;\n }\n }\n return { index: minIndex, distance: minDistance };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1038,"value":"function createState(graph) {\n return {\n graph,\n state: 'MOVE_VERTICES',\n selectedVertexIndex: -1,\n hoverVertexIndex: -1,\n activeVertexIndex: -1,\n deadZoneRadius: 4\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1547,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":1541,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":2486,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import { button, checkbox, slider, select } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"import { mat3fromMat4 } from '@rreusser/gl-mat3'","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"import {\n vec3fromValues,\n vec3dot,\n vec3cross,\n vec3normalize,\n vec3length,\n vec3distance,\n vec3set,\n vec3copy,\n vec3sub,\n vec3scaleAndAdd,\n vec3scale,\n vec3add,\n vec3transformQuat,\n vec3negate,\n vec3transformMat4\n} from '@rreusser/gl-vec3'","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"import {\n quatMultiply,\n quatNormalize,\n quatInvert,\n quatLength,\n quatCreate,\n quatFromMat3,\n quatConjugate\n} from '@rreusser/gl-quat'","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"import {\n mat4lookAt,\n mat4fromRotationTranslation,\n mat4create,\n mat4translate,\n mat4perspective,\n mat4multiply,\n mat4invert\n} from '@rreusser/gl-mat4'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"import { vec2length, vec2create } from '@rreusser/gl-vec2'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1369,"value":"import { createIcosphere } from '@rreusser/icosphere'","pinned":false,"hidden":false,"mode":"ojs"},{"id":3409,"value":"import { tweet } from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1256,"value":"function vec3create() {\n return [0, 0, 0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"createREGL = require('regl')","pinned":false,"hidden":false,"mode":"ojs"},{"id":978,"value":"$43","pinned":false,"hidden":false,"mode":"ojs"},{"id":1372,"value":"icosphere = createIcosphere(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2469,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3878,"value":"md`## License`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3873,"value":"$44","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W45","stdlib":"1","titling":"auto"}