2d:null 2e:["$","title",null,{"children":"Tactile Spirals | Igor A1 | Observable"}] 33:T9e1,vertexChart = { const w = 200; const svg = d3.create("svg").attr("width", w).attr("height", w); svg .append("path") .attr("d", `M0,0h${w}v${w}h${-w}z`) .attr("fill", COLS[4]) .attr("stroke", COLS[3]); svg .append("text") .attr("x", 12) .attr("y", 24) .attr("fill", COLS[3]) .attr("stroke", COLS[2]) .style("font-family", "Arial,Helvetica,sans-serif") .style("font-size", "16px") .text(formatIH(the_tile)); const tile = svg.append("g"); const outline = tile .append("path") .attr("fill", COLS[3]) .attr("stroke", "#000000") .attr("stroke-width", 2); tile .selectAll() .data(tiling.verts) .join("circle") .attr("class", "vert") .attr("r", 6) .attr("fill", "#000000") .attr("fill-opacity", 0.4) .attr("stroke", "none"); // symmetry points for U and S edges let count = 0; for (let part of tiling.parts()) { if (part.shape == EdgeShape.I || part.shape == EdgeShape.J) continue; if (!part.second) { tile .append("circle") .attr("id", `edge${count}`) .attr("r", 6) .attr("fill", part.shape == EdgeShape.U ? "green" : "red") .attr("fill-opacity", 0.4) .attr("stroke", "none"); count++; } } function updateVerts() { const bbox = boundBox(tiling.verts); const scale = w / (2 * Math.max(bbox.width, bbox.height)); let figure = ""; tiling.verts.forEach((v, i) => { figure += `${i === 0 ? "M" : "L"}${scale * v.x},${scale * v.y}`; }); figure += "Z"; // transform figure to center of SVG image const center = [ (w - scale * bbox.width) / 2 + (bbox.x1 < 0 ? -scale * bbox.x1 : 0), (w - scale * bbox.height) / 2 + (bbox.y1 < 0 ? -scale * bbox.y1 : 0) ]; tile.attr("transform", `translate(${center})`); outline.attr("d", figure); tile .selectAll(".vert") .data(tiling.verts) .attr("cx", (d) => scale * d.x) .attr("cy", (d) => scale * d.y); let count = 0; for (let part of tiling.parts()) { if (part.shape == EdgeShape.I || part.shape == EdgeShape.J) continue; if (!part.second) { const edge = edges[part.id]; const center = mul(part.T, edge[edge.length - 1]); tile .select(`#edge${count}`) .attr("cx", scale * center.x) .attr("cy", scale * center.y); count++; } } } updateVerts(); dispatcher.on(repaintVerticesType, updateVerts); return svg.node(); }34:T11e3,function sketchRedraw(sketch, shader) { let spiralA = formSpirals.a, spiralB = formSpirals.b, pattern = formSpirals.pattern; let tile_shape = null; let triangles = null; const tiling_V = { x: 0.0, y: 0.0 }; let tiling_T = null; let tiling_iT = null; let fbo = null; let fbo_M = null; function calculateTilingTransform() { const t1 = tiling.getT1(); const t2 = tiling.getT2(); const pA = Permutation.pow(colouring.p1, spiralA); const pB = Permutation.pow(colouring.p2, spiralB); const rv = Permutation.rank(Permutation.mult(pA, pB)); let v = { x: spiralA * t1.x + spiralB * t2.x, y: spiralA * t1.y + spiralB * t2.y }; v = scaleVec(v, rv); tiling_T = mul( matchSeg({ x: 0.0, y: 0.0 }, { x: 0.0, y: twoPi }), inv(matchSeg({ x: 0.0, y: 0.0 }, v)) ); tiling_T[2] = tiling_V.x; tiling_T[5] = tiling_V.y; tiling_iT = inv(tiling_T); } function drawTranslationalUnit() { if (fbo == null) { fbo = sketch.createGraphics(FBO_DIM, FBO_DIM); } fbo.background("red"); const r1 = Permutation.rank(colouring.p1); const r2 = Permutation.rank(colouring.p2); const t1 = scaleVec(tiling.getT1(), r1); const t2 = scaleVec(tiling.getT2(), r2); const det = t1.x * t2.y - t2.x * t1.y; fbo_M = [t2.y / det, -t1.y / det, -t2.x / det, t1.x / det]; const M = fbo_M; const est_sc = Math.sqrt(Math.abs(det / (r1 * r2))); fbo.push(); fbo.applyMatrix(M[0], M[1], M[2], M[3], 0.0, 0.0); const bx = getTilingRect(t1, t2); for (let i of tiling.fillRegionQuad(bx[0], bx[1], bx[2], bx[3])) { const TT = i.T; let tshape = []; for (let v of tile_shape) { let P = mul(TT, v); P.x *= FBO_DIM; P.y *= FBO_DIM; tshape.push(P); } const col = colouring.getColour(i.t1, i.t2, i.aspect); fbo.fill(col); fbo.stroke(col); fbo.strokeWeight(est_sc); for (let idx = 0; idx < triangles.length; idx += 3) { fbo.triangle( tshape[triangles[idx]].x, tshape[triangles[idx]].y, tshape[triangles[idx + 1]].x, tshape[triangles[idx + 1]].y, tshape[triangles[idx + 2]].x, tshape[triangles[idx + 2]].y ); } fbo.stroke(COLS[0]); fbo.strokeWeight(20 * est_sc); fbo.strokeJoin(sketch.ROUND); fbo.noFill(); for (let idx = 0; idx < tile_shape.length; ++idx) { const P = tshape[idx]; const Q = tshape[(idx + 1) % tile_shape.length]; fbo.line(P.x, P.y, Q.x, Q.y); } } fbo.pop(); calculateTilingTransform(); } function cacheTileShape() { tile_shape = []; let blah = []; for (let i of tiling.parts()) { const ej = edges[i.id]; let cur = i.rev ? ej.length - 2 : 1; const inc = i.rev ? -1 : 1; for (let idx = 0; idx < ej.length - 1; ++idx) { const { x, y } = mul(i.T, ej[cur]); tile_shape.push({ x: x, y: y }); blah.push(x); blah.push(y); cur += inc; } } triangles = earcut(blah); drawTranslationalUnit(); } function drawTiling() { const M = fbo_M; const MM = [M[0], M[2], 0.0, M[1], M[3], 0.0]; let nit = mul(MM, tiling_iT); const asp = WIDTH / HEIGHT; function vtex(sx, sy, px, py) { let P = mul(nit, { x: px, y: py }); sketch.vertex(sx, sy, 1, P.x, P.y); } sketch.texture(fbo); sketch.beginShape(); vtex(0, 0, 0, 0); vtex(WIDTH, 0, twoPi * asp, 0); vtex(WIDTH, HEIGHT, twoPi * asp, twoPi); vtex(0, HEIGHT, 0, twoPi); sketch.endShape(sketch.CLOSE); } function drawSpiral() { sketch.noStroke(); sketch.shader(shader); shader.setUniform("res", [WIDTH, HEIGHT]); shader.setUniform("tex", fbo); const M = [fbo_M[0], fbo_M[2], 0.0, fbo_M[1], fbo_M[3], 0.0]; const T = mul(M, tiling_iT); shader.setUniform("M", [T[0], T[3], 0.0, T[1], T[4], 0.0, T[2], T[5], 1.0]); // rect(WIDTH/2,HEIGHT/2,WIDTH/2,HEIGHT/2); // It turns out that it basically doesn't matter what you put here, // as long as you send some geometry into the pipeline. Processing // will feed WebGL a rectangle from (0,0) to (1,1) with matching // texture coordinates, and the shader will see that in the context // of a viewport covering (-1,-1) to (1,1). So do all the real work // in the shader, I guess. sketch.rect(0, 1, 2, 3); } cacheTileShape(); pattern === "Spirals" ? drawSpiral() : drawTiling(); }35:[] 31:{"id":"b2278ef9325c1cb3","slug":"tactile-spirals","title":"Tactile Spirals","thumbnail":"db65df644ab764340152e12be4362fecd61556b33e0b327176bd1e27b360a904","access_level":"public","create_time":"$D2022-04-22T07:29:36.864Z","update_time":"$D2022-05-02T12:41:29.395Z","view_time":null,"first_public_time":"$D2022-05-02T12:46:57.498Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"6c5efb1eab88987b","login":"igor-a1","name":"Igor A1","avatar_url":"https://avatars-next.observableusercontent.com/7f0055f4279565990ec1cc324da008037750cdcc99d774567c194b9e9898c62f","tier":"starter_2024"},"version":403,"publish_version":403,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c750d0fb9bf5b48","login":"igor-a1","name":"Igor A1","avatar_url":"https://avatars-next.observableusercontent.com/7f0055f4279565990ec1cc324da008037750cdcc99d774567c194b9e9898c62f","tier":null}],"members":[{"type":"individual","id":"4c750d0fb9bf5b48","login":"igor-a1","name":"Igor A1","avatar_url":"https://avatars-next.observableusercontent.com/7f0055f4279565990ec1cc324da008037750cdcc99d774567c194b9e9898c62f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"b1dc8df3b281fd6e","slug":"tactile-js","title":"Tactile.js","owner":{"id":"6c5efb1eab88987b","login":"igor-a1","name":"Igor A1"}},"type":"notebook","body":{"title":"Tactile Spirals","cells":[{"id":0,"value":"# Tactile Spirals","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"[Escher-like Spiral Tilings](https://isohedral.ca/escher-like-spiral-tilings) ported from [isohedral/tactile-js/spirals](https://github.com/isohedral/tactile-js/tree/master/spirals)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"viewof formSpirals = {\n const form = Inputs.form({\n pattern: Inputs.radio([\"Spirals\", \"Tilings\"], {\n label: html`pattern`,\n value: \"Spirals\"\n }),\n colored: Inputs.toggle({\n label: html`colored tiles`,\n value: true\n }),\n a: Inputs.range([0, 20], {\n step: 1,\n label: md`*spiral* **A**`,\n value: 1\n }),\n b: Inputs.range([0, 20], {\n step: 1,\n label: md`*spiral* **B**`,\n value: 5\n })\n });\n\n form.addEventListener(\"input\", function () {\n if (form.value === null) tiling.setParameters(form.value);\n dispatcher.call(repaintSpiralsType);\n });\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"viewof the_tile = Inputs.range([0, numTypes - 1], {\n step: 1,\n label: md`**Tiling Type** index`,\n value: 15\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"chart = {\n const el = DOM.element(\"div\");\n el.id = container.id;\n el.style.width = `${container.width}px`;\n el.style.height = `${container.height}px`;\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"viewof formParams = {\n const params = tiling.getParameters();\n if (params.length === 0)\n return html`this tiling not have any parameters`;\n\n const inputs = [];\n params.forEach((p, i) => {\n inputs.push(\n Inputs.range([0, 0.999], {\n label: md`**v**_${i}`,\n step: 0.001,\n value: p\n })\n );\n });\n const form = Inputs.form(inputs);\n\n form.addEventListener(\"input\", function () {\n tiling.setParameters(form.value);\n dispatcher.call(repaintVerticesType);\n dispatcher.call(repaintSketchType);\n });\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"### Color Palette","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"viewof COLS = Inputs.form([\n Inputs.color({ label: \"stroke\", value: \"#193441\" }),\n Inputs.color({ label: \"fill default\", value: \"#3E606f\" }),\n Inputs.color({ label: \"fill EdgeShape.U\", value: \"#91aa9d\" }),\n Inputs.color({ label: \"fill Editor\", value: \"#d1dbbd\" }),\n Inputs.color({ label: \"background\", value: \"#fcfff5\" }),\n Inputs.color({ label: \"others\", value: \"#dbbcd1\" })\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"Inputs.button(\"Reset to default colors\", {\n value: null,\n reduce: () => {\n viewof COLS.value = [\n \"#193441\",\n \"#3E606f\",\n \"#91aa9d\",\n \"#d1dbbd\",\n \"#fcfff5\",\n \"#dbbcd1\"\n ];\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"## P5 Tools","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":224,"value":"p5 = require(\"https://unpkg.com/p5@1.4.0/lib/p5.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"container = ({ width: WIDTH, height: HEIGHT, id: \"p5-container\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"sketch = function (sketch) {\n let shader;\n\n sketch.preload = function () {\n shader = new p5.Shader(this._renderer, srcVertShader, srcFragShader);\n };\n sketch.setup = function () {\n this.setAttributes(\n \"preserveDrawingBuffer\",\n false\n ); /* for \"Download PNG\" to work */\n const canvas = this.createCanvas(\n container.width,\n container.height,\n \"webgl\"\n );\n\n this.textureWrap(\"repeat\");\n this.textureMode(\"normal\");\n this.noLoop();\n };\n\n sketch.draw = function () {\n this.background(\"red\");\n this.translate(-container.width / 2, -container.height / 2);\n sketchRedraw(this, shader);\n };\n\n dispatcher.on(repaintSketchType, function () {\n sketchRedraw(sketch, shader);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"chartDraw = {\n // Resets div container\n chart.innerHTML = \"\";\n // Reinstantiate the p5 with the sketch\n return new p5(sketch, chart);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"## Shaders source","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"srcVertShader = `precision highp float;\nattribute vec3 aPosition;\nvarying vec2 uv;\nvoid main() {\n uv = aPosition.xy;\n vec4 pos = vec4(aPosition, 1.0);\n pos = vec4( 2.0*pos.x-1.0, 2.0*pos.y - 1.0, pos.z, 1.0);\n pos.y = -pos.y;\n gl_Position = pos;\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"srcFragShader = `precision highp float;\nuniform sampler2D tex;\nuniform vec2 res;\nuniform mat3 M;\nvarying vec2 uv;\nvoid main() {\n vec2 asp = vec2( 1.0, res.y / res.x );\n vec2 cen = 0.5 * asp;\n vec2 v = uv * asp;\n vec2 p = v - cen;\n vec2 merc = vec2( log( length( p ) ), atan( p.y, p.x ) );\n vec4 col = texture2D( tex, (M * vec3( merc, 1.0 )).xy );\n gl_FragColor = col;\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"function createShader(gl, type, source) {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;\n throw new Error(gl.getShaderInfoLog(shader));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"function createProgram(gl, ...shaders) {\n const program = gl.createProgram();\n for (const shader of shaders) gl.attachShader(program, shader);\n gl.linkProgram(program);\n if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program;\n throw new Error(gl.getProgramInfoLog(program));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"## Const","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"triangles = () => {\n const verts = [],\n trins = [],\n flatVerts = [];\n\n let idx, curr;\n\n for (let part of tiling.parts()) {\n const edge = edges[part.id];\n curr = part.rev ? edge.length - 2 : 1;\n const inc = part.rev ? -1 : 1;\n\n for (idx = 0; idx < edge.length - 1; ++idx) {\n const { x, y } = mul(part.T, edge[curr]);\n verts.push({ x: x, y: y });\n curr += inc;\n }\n }\n\n verts.forEach((v) => flatVerts.push(v.x, v.y));\n const flatTrins = earcut(flatVerts);\n\n for (idx = 0; idx < flatTrins.length; idx += 3)\n trins.push([\n verts[flatTrins[idx]],\n verts[flatTrins[idx + 1]],\n verts[flatTrins[idx + 2]]\n ]);\n\n return trins;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"formatIH = (value) => {\n const s = `${value + 1}`;\n return `IH${s.length < 2 ? \"0\" : \"\"}${s}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"boundBox = (verts) => {\n let box = {\n x1: verts[0].x,\n y1: verts[0].y,\n x2: verts[0].x,\n y2: verts[0].y\n };\n\n verts.forEach((v, i) => {\n if (i === 0) return;\n\n if (box.x1 > v.x) box.x1 = v.x;\n else if (box.x2 < v.x) box.x2 = v.x;\n\n if (box.y1 > v.y) box.y1 = v.y;\n else if (box.y2 < v.y) box.y2 = v.y;\n });\n\n box.width = box.x2 - box.x1;\n box.height = box.y2 - box.y1;\n\n return box;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"_**F**rame**B**uffer**O**bject dimension_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"FBO_DIM = 256","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"WIDTH = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"HEIGHT = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"pi = Math.PI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"twoPi = 2 * pi","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"rad2deg = (rad) => (rad * 180) / pi","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"section = (points, ratios) => {\n const ratio = ratios[0] + ratios[1];\n return {\n x: (ratios[0] * points[0].x + ratios[1] * points[1].x) / ratio,\n y: (ratios[0] * points[0].y + ratios[1] * points[1].y) / ratio\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"edges = {\n const edges = [];\n for (let idx = 0; idx < tiling.numEdgeShapes(); ++idx) {\n let ej = [\n { x: 0, y: 0 },\n { x: 1, y: 0 }\n ];\n edges.push(ej);\n }\n return edges;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"drawTriangle = (ctx, points) => {\n ctx.beginPath();\n ctx.moveTo(points[0].x, points[0].y);\n ctx.lineTo(points[1].x, points[1].y);\n ctx.lineTo(points[2].x, points[2].y);\n ctx.lineTo(points[0].x, points[0].y);\n ctx.closePath();\n ctx.fill();\n ctx.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"trianglePath = (x1, y1, x2, y2, x3, y3) =>\n `M${[x1, y1]}L${[x2, y2]}L${[x3, y3]}Z`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"getTilingRect = (t1, t2) => {\n const t1l = len(tiling.getT1());\n const t2l = len(tiling.getT2());\n\n const margin = Math.sqrt(t1l * t1l + t2l * t2l);\n\n const det = t1.x * t2.y - t2.x * t1.y;\n\n const pts = [\n { x: 0, y: 0 },\n det < 0.0 ? t2 : t1,\n { x: t1.x + t2.x, y: t1.y + t2.y },\n det < 0.0 ? t1 : t2\n ];\n\n const v = normalize(sub(pts[1], pts[0]));\n const w = normalize(sub(pts[3], pts[0]));\n\n return [\n {\n x: pts[0].x + margin * (-v.x - w.x),\n y: pts[0].y + margin * (-v.y - w.y)\n },\n { x: pts[1].x + margin * (v.x - w.x), y: pts[1].y + margin * (v.y - w.y) },\n { x: pts[2].x + margin * (v.x + w.x), y: pts[2].y + margin * (v.y + w.y) },\n { x: pts[3].x + margin * (-v.x + w.x), y: pts[3].y + margin * (-v.y + w.y) }\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"scaleVec = (v, a) => ({ x: v.x * a, y: v.y * a })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"calculateTilingTransform = () => {\n const t1 = tiling.getT1();\n const t2 = tiling.getT2();\n const pA = Permutation.pow(colouring.p1, formSpirals.a);\n const pB = Permutation.pow(colouring.p2, formSpirals.b);\n const rv = Permutation.rank(Permutation.mult(pA, pB));\n\n let v = {\n x: formSpirals.a * t1.x + formSpirals.b * t2.x,\n y: formSpirals.a * t1.y + formSpirals.b * t2.y\n };\n\n v = scaleVec(v, rv);\n\n const tiling_T = mul(\n matchSeg({ x: 0.0, y: 0.0 }, { x: 0.0, y: twoPi }),\n inv(matchSeg({ x: 0.0, y: 0.0 }, v))\n );\n\n const tiling_V = { x: 0.0, y: 0.0 };\n tiling_T[2] = tiling_V.x;\n tiling_T[5] = tiling_V.y;\n\n return tiling_T;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"repaintVerticesType = \"repaintVertices\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"repaintSpiralsType = \"repaintSpirals\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"repaintSketchType = \"repaintSketch\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"dispatcher = d3.dispatch(\n repaintVerticesType,\n repaintSpiralsType,\n repaintSketchType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"## Instances","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"colouring = formSpirals.colored ? min_colouring : uniform_colouring","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"uniform_colouring = new UniformColouring(tiling, COLS[4])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"min_colouring = new MinColouring(tiling, COLS.slice(1, 4))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"tiling = new IsohedralTiling(tilingTypes[the_tile])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"## Classes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"class Permutation {\n static rank(p) {\n let identity = Object.keys(p);\n let product = p.slice();\n let rank = 1;\n while (product.join() !== identity.join()) {\n product = this.mult(product, p);\n rank++;\n }\n return rank;\n }\n\n static pow(p, exp) {\n let product = p.slice();\n for (let i = 0; i < exp - 1; i++) {\n product = this.mult(product, p);\n }\n return product;\n }\n\n static mult(p1, p2) {\n if (p1.length !== p2.length) {\n return [];\n }\n return p1.map((x) => p2[x]);\n }\n\n static evaluate(p, start, num_times) {\n let val = p[start];\n for (let idx = 0; idx < num_times; ++idx) {\n val = p[val];\n }\n return val;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"class Colouring {\n constructor(tiling, cols, init, p1, p2) {\n this.tiling = tiling;\n this.cols = cols;\n this.init = init;\n this.p1 = p1;\n this.p1rank = Permutation.rank(p1);\n this.p2 = p2;\n this.p2rank = Permutation.rank(p2);\n }\n\n getColour(a, b, asp) {\n /*\n const nc = this.cols.length;\n let mt = function( a ) {\n let _mt = a % nc;\n return _mt < 0 ? _mt + nc : _mt;\n };\n c = Permutation.evaluate( this.p1, c, mt( a ) );\n c = Permutation.evaluate( this.p2, c, mt( b ) );\n */\n\n let c = this.init[asp];\n const r1 = this.p1rank;\n const r2 = this.p2rank;\n\n c = Permutation.evaluate(this.p1, c, ((a % r1) + r1) % r1);\n c = Permutation.evaluate(this.p2, c, ((b % r2) + r2) % r2);\n\n return this.cols[c];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"class UniformColouring extends Colouring {\n constructor(tiling, col) {\n const nasps = tiling.numAspects();\n const init = new Array(nasps).fill(0);\n const p = [0];\n super(tiling, [col], init, p, p);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"class MinColouring extends Colouring {\n constructor(tiling, cols) {\n const clrg = tiling.ttd.colouring;\n const init = clrg.slice(0, tiling.numAspects());\n const p1 = clrg.slice(12, 15);\n const p2 = clrg.slice(15, 18);\n super(tiling, cols, init, p1, p2);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"## Tactile","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"

Parameters length of Isohedral types
length	type indexes
0	9,10,17,18,29,30,31,32,33,34,35,36,37,51,56,57,63,65,67,68,70,71,72,77,78
1	15,27,28,48,52,55,58,59,61,64,66,69,73,76,79
2	6,11,13,16,19,24,26,38,39,40,41,42,44,46,50,53,54,60,62,74,75
3	8,12,14,20,23,25,45,47,49
4	0,1,2,7,21,22,43
5	4,5
6	3

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"import [**tactile.js**](https://github.com/isohedral/tactile-js) \n```\n/*\n * Tactile-JS\n * Copyright 2018 Craig S. Kaplan, csk@uwaterloo.ca\n *\n * Distributed under the terms of the 3-clause BSD license. See the\n * file \"LICENSE\" for more information.\n */```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"import {\n EdgeShape,\n matchSeg,\n numTypes,\n mul,\n tilingTypes,\n IsohedralTiling\n} from \"@mattdzugan/hello-tactile-js-a-library-for-eascher-esque-isohedron-tess\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"import {\n sub,\n dot,\n len,\n ptdist,\n inv,\n normalize,\n makeBox,\n hitBox\n} from \"@igor-a1/interactive-demo-of-tactile-js\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"## Tools","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"earcut = require(\"earcut\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"fitCurve = require(\"fit-curve\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"

Parameters length of Isohedral types