1d:{"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":"$1f","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":"$20","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":"$21","pinned":false,"hidden":false,"mode":"ojs"},{"id":2607,"value":"$22","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":"$23","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":"$24","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":"$25","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":"$26","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":"$27","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":"$28","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":"$29","pinned":false,"hidden":false,"mode":"ojs"},{"id":1295,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$2b","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":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"$2d","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":"$2e","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":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1541,"value":"$30","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":"$31","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":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1"}