2c:null 2d:["$","title",null,{"children":"Interactive Demo of Tactile.JS | Igor A1 | Observable"}] 32:T1a09,sktch = p5c => { const editor_box = makeBox(10, 350, 200, 240); const phys_unit = 60; let QS = null; let vals = null; let editor_pane = null; let show_controls = true; let zoom = 1.0; let the_type = null; let tiling = null; let dragging = null; const COLS = [ [25, 52, 65], [62, 96, 111], [145, 170, 157], [209, 219, 189], [252, 255, 245], [219, 188, 209] ]; function setTilingType() { const tp = tilingTypes[the_type]; tiling.setType(tp); let title = "Tiling: IH"; if (tp < 10) { title += "0"; } title += tp; // I'd like to say this: QS.setTitle( title ); // QuickSettings doesn't include a public API for setting the // title of a panel, so reach into the guts and twiddle the // data directly. QS._titleBar.textContent = title; const np = tiling.numParams(); let vals = {}; for (let idx = 0; idx < 6; ++idx) { if (idx < np) { QS.showControl("v" + idx); vals["v" + idx] = tiling.getParam(idx); } else { QS.hideControl("v" + idx); } } QS.setValuesFromJSON(vals); } function nextTilingType() { if (the_type < numTypes - 1) { the_type++; setTilingType(); } } function prevTilingType() { if (the_type > 0) { the_type--; setTilingType(); } } function drawTiling() { const asp = p5c.width / p5c.height; const h = 6.0 * zoom; const w = asp * h * zoom; const sc = p5c.height / (2 * h); const M = mul( [1, 0, p5c.width / 2.0, 0, 1, p5c.height / 2.0], [sc, 0, 0, 0, -sc, 0] ); p5c.stroke(COLS[0][0], COLS[0][1], COLS[0][2]); p5c.strokeWeight(1.0); const proto = tiling.getPrototile(); for (let i of proto.fillRegionBounds( -w - 2.0, -h - 2.0, w + 2.0, h + 2.0 )) { const TT = i.T; const T = mul(M, TT); const col = COLS[proto.getColour(i.t1, i.t2, i.aspect) + 1]; p5c.fill(col[0], col[1], col[2]); p5c.beginShape(); for (let v of tiling.getTileShape()) { const P = mul(T, v); p5c.vertex(P.x, P.y); } p5c.endShape(p5c.CLOSE); } } function drawEditor() { let pg = editor_pane; pg.clear(); pg.fill(252, 255, 254, 220); pg.noStroke(); pg.rect(0, 0, editor_box.w, editor_box.h); pg.strokeWeight(2.0); pg.fill(COLS[3][0], COLS[3][1], COLS[3][2]); const ET = tiling.getEditorTransform(); const proto = tiling.getPrototile(); pg.beginShape(); for (let v of tiling.getTileShape()) { const P = mul(ET, v); pg.vertex(P.x, P.y); } pg.endShape(p5c.CLOSE); pg.noFill(); // Draw edges for (let i of proto.parts()) { if (i.shape == EdgeShape.I) { pg.stroke(158); } else { pg.stroke(0); } const M = mul(ET, i.T); pg.beginShape(); for (let v of tiling.getEdgeShape(i.id)) { const P = mul(M, v); pg.vertex(P.x, P.y); } pg.endShape(); } // Draw tiling vertices pg.noStroke(); pg.fill(158); for (let v of proto.vertices()) { const pt = mul(ET, v); pg.ellipse(pt.x, pt.y, 10.0, 10.0); } // Draw editable vertices for (let i of proto.parts()) { const shp = i.shape; const id = i.id; const ej = tiling.getEdgeShape(id); const T = mul(ET, i.T); for (let idx = 1; idx < ej.length - 1; ++idx) { pg.fill(0); const pt = mul(T, ej[idx]); pg.ellipse(pt.x, pt.y, 10.0, 10.0); } if (shp == EdgeShape.I || shp == EdgeShape.J) { continue; } // Draw symmetry points for U and S edges. if (!i.second) { if (shp == EdgeShape.U) { pg.fill(COLS[2][0], COLS[2][1], COLS[2][2]); } else { pg.fill(COLS[5][0], COLS[5][1], COLS[5][2]); } const pt = mul(T, ej[ej.length - 1]); pg.ellipse(pt.x, pt.y, 10.0, 10.0); } } p5c.image(pg, editor_box.x, editor_box.y); p5c.strokeWeight(3.0); p5c.stroke(25, 52, 65, 220); p5c.noFill(); p5c.rect(editor_box.x, editor_box.y, editor_box.w, editor_box.h); } function slide() { let params = []; vals = QS.getValuesAsJSON(); for (let idx = 0; idx < tiling.numParams(); ++idx) { params.push(vals["v" + idx]); } tiling.setParams(params); p5c.loop(); } p5c.mouseDragged = function() { if (dragging) { const npt = { x: p5c.mouseX - editor_box.x, y: p5c.mouseY - editor_box.y }; tiling.moveEdit(npt); p5c.loop(); return false; } }; p5c.mousePressed = function() { dragging = false; if (!show_controls) { return; } const pt = { x: p5c.mouseX - editor_box.x, y: p5c.mouseY - editor_box.y }; if (pt.x < 0 || pt.x > editor_box.w) { return; } if (pt.y < 0 || pt.y > editor_box.h) { return; } if (tiling.startEdit(pt, p5c.keyIsDown(p5c.SHIFT))) { dragging = true; p5c.loop(); } else { tiling.calcEditorTransform(); p5c.loop(); } }; p5c.mouseReleased = function() { tiling.finishEdit(); dragging = false; }; p5c.keyPressed = function() { if (p5c.keyCode === p5c.RIGHT_ARROW) { nextTilingType(); p5c.loop(); } else if (p5c.keyCode === p5c.LEFT_ARROW) { prevTilingType(); p5c.loop(); } else if (p5c.key == ' ') { show_controls = !show_controls; if (show_controls) { QS.expand(); } else { QS.collapse(); } p5c.loop(); } else if (p5c.key == ',' || p5c.key == '<') { zoom /= 0.9; p5c.loop(); } else if (p5c.key == '.' || p5c.key == '>') { zoom *= 0.9; p5c.loop(); } }; p5c.setup = function() { let canvas = p5c.createCanvas(800, 600); canvas.parent("sktch"); tiling = new EditableTiling(editor_box.w, editor_box.h, phys_unit); let res = document.getElementById("sktch").getBoundingClientRect(); QS = QuickSettings.create( res.left + window.scrollX + 10, res.top + window.scrollY + 10, "Tiling: IH01" ); for (let idx = 0; idx < 6; ++idx) { QS.addRange("v" + idx, 0, 2, 1, 0.0001, null); QS.hideControl("v" + idx); } editor_pane = p5c.createGraphics(editor_box.w, editor_box.h); QS.setGlobalChangeHandler(slide); the_type = 0; setTilingType(); }; p5c.draw = function() { p5c.background(255); drawTiling(); if (show_controls) { drawEditor(); } p5c.noLoop(); }; }33:T10b2,class EditableTiling { constructor(ew, eh, phys_unit) { this.edit_w = ew; this.edit_h = eh; this.phys_unit = phys_unit; this.tiling = null; this.u_constrain = false; } setType(tp) { this.the_type = tp; this.tiling = new IsohedralTiling(tp); this.params = this.tiling.getParameters(); this.edges = []; for (let idx = 0; idx < this.tiling.numEdgeShapes(); ++idx) { this.edges.push([{ x: 0, y: 0 }, { x: 1, y: 0 }]); } this.cacheTileShape(); this.calcEditorTransform(); } getPrototile() { return this.tiling; } getEdgeShape(idx) { return this.edges[idx]; } cacheTileShape() { this.tile_shape = []; for (let i of this.tiling.parts()) { const ej = this.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) { this.tile_shape.push(mul(i.T, ej[cur])); cur += inc; } } } getTileShape() { return this.tile_shape; } calcEditorTransform() { //console.log(this); let xmin = 1e7; let xmax = -1e7; let ymin = 1e7; let ymax = -1e7; for (let v of this.tile_shape) { xmin = Math.min(xmin, v.x); xmax = Math.max(xmax, v.x); ymin = Math.min(ymin, v.y); ymax = Math.max(ymax, v.y); } const sc = Math.min( (this.edit_w - 50) / (xmax - xmin), (this.edit_h - 50) / (ymax - ymin) ); this.editor_T = mul( [sc, 0, 0.5 * this.edit_w, 0, -sc, 0.5 * this.edit_h], [1, 0, -0.5 * (xmin + xmax), 0, 1, -0.5 * (ymin + ymax)] ); } getEditorTransform() { return this.editor_T; } setEditorTransform(T) { this.editor_T = T; } getParam(idx) { return this.params[idx]; } setParam(idx, v) { this.params[idx] = v; this.tiling.setParameters(this.params); this.cacheTileShape(); } setParams(vs) { this.tiling.setParameters(vs); this.cacheTileShape(); } numParams() { return this.tiling.numParameters(); } startEdit(pt, do_del = false) { for (let i of this.tiling.parts()) { const shp = i.shape; // No interaction possible with an I edge. if (shp == EdgeShape.I) { continue; } const id = i.id; let ej = this.edges[id]; const T = mul(this.editor_T, i.T); let P = mul(T, ej[0]); for (let idx = 1; idx < ej.length; ++idx) { let Q = mul(T, ej[idx]); if (ptdist(Q, pt) < 0.5 * this.phys_unit) { this.u_constrain = false; if (idx == ej.length - 1) { if (shp == EdgeShape.U && !i.second) { this.u_constrain = true; } else { break; } } else if (do_del) { ej.splice(idx, 1); this.cacheTileShape(); return false; } this.drag_edge_shape = id; this.drag_vertex = idx; this.drag_T = inv(T); this.down_motion = pt; // Set timer for deletion. But not on a U vertex. if (!this.u_constrain) { this.delete_timer = setTimeout(this.deleteVertex, 1000); } return true; } // Check segment if (distToSeg(pt, P, Q) < 20) { this.drag_edge_shape = id; this.drag_vertex = idx; this.drag_T = inv(T); this.down_motion = pt; // Don't set timer -- can't delete new vertex. ej.splice(idx, 0, mul(this.drag_T, pt)); this.cacheTileShape(); return true; } P = Q; } } return false; } moveEdit(pt) { const npt = mul(this.drag_T, pt); if (this.u_constrain) { npt.x = 1.0; } const d = ptdist(pt, this.down_motion); if (d > 10) { // You've moved far enough, so don't delete. if (this.delete_timer != null) { clearTimeout(this.delete_timer); this.delete_timer = null; } } this.edges[this.drag_edge_shape][this.drag_vertex] = npt; this.cacheTileShape(); } finishEdit() { this.u_constrain = false; if (this.delete_timer) { clearTimeout(this.delete_timer); this.delete_timer = null; } } }34:[] 30:{"id":"f7e80b32975a7f7b","slug":"interactive-demo-of-tactile-js","title":"Interactive Demo of Tactile.JS","thumbnail":"6272be36e9fbcbfaa3ff505db5df112b10bc693e1998a728e548606ad57047df","access_level":"public","create_time":"$D2021-01-29T22:36:49.351Z","update_time":"$D2021-02-01T01:46:05.720Z","view_time":null,"first_public_time":"$D2021-01-29T23:34:17.206Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"6c5efb1eab88987b","login":"igor-a1","name":"Igor A1","avatar_url":"https://avatars-next.observableusercontent.com/7f0055f4279565990ec1cc324da008037750cdcc99d774567c194b9e9898c62f","tier":"starter_2024","bio":"Don't imagine the interpretation of abstract symbols. Relationships should be plainly seen, not imagined."},"version":96,"publish_version":96,"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,"bio":"Don't imagine the interpretation of abstract symbols. Relationships should be plainly seen, not imagined."}],"members":[{"type":"individual","id":"4c750d0fb9bf5b48","login":"igor-a1","name":"Igor A1","avatar_url":"https://avatars-next.observableusercontent.com/7f0055f4279565990ec1cc324da008037750cdcc99d774567c194b9e9898c62f","tier":null,"role":"editor"}],"comments":[{"id":"74bd63053bcebdb3","reply_to_id":null,"content":"You probably meant to link to https://github.com/isohedral/tactile-js/tree/49e3b8/demo ? (or alternatively https://raw.githack.com/isohedral/tactile-js/49e3b8/demo/interactivedemo.html)","create_time":"$D2021-01-31T11:31:20.747Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"2bcbd13269fc1b87","reply_to_id":"74bd63053bcebdb3","content":"oh, yes! link resolved, just click it","create_time":"$D2021-02-01T01:44:25.069Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"4c750d0fb9bf5b48","login":"igor-a1","name":"Igor A1","avatar_url":"https://avatars-next.observableusercontent.com/7f0055f4279565990ec1cc324da008037750cdcc99d774567c194b9e9898c62f","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"f2e743e5178d7b17","slug":"art","title":"Art","owner":{"id":"6c5efb1eab88987b","login":"igor-a1","name":"Igor A1"}},"type":"notebook","body":{"titling":"auto","title":"Interactive Demo of Tactile.JS","cells":[{"id":0,"value":"md`# Interactive Demo of Tactile.JS\nfrom [https://github.com/isohedral/tactile-js/demo](https://github.com/isohedral/tactile-js/blob/master/demo/interactivedemo.js)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"myp5 = new p5(sktch, 'sketch0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`## Tileinfo.js\nA collection of utilities and classes that are generally useful when\ndisplaying and manipulating isohedral tilings interactively.\n\nfrom [https://github.com/isohedral/tactile-js/demo](https://github.com/isohedral/tactile-js/blob/master/demo/tileinfo.js)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"function sub(V, W) {\n return { x: V.x - W.x, y: V.y - W.y };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"function dot(V, W) {\n return V.x * W.x + V.y * W.y;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"function len(V) {\n return Math.sqrt(dot(V, V));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"function ptdist(V, W) {\n return len(sub(V, W));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"function normalize(V) {\n const l = len(V);\n return { x: V.x / l, y: V.y / l };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`*2D affine matrix inverse*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"function inv(T) {\n const det = T[0] * T[4] - T[1] * T[3];\n return [\n T[4] / det,\n -T[1] / det,\n (T[1] * T[5] - T[2] * T[4]) / det,\n -T[3] / det,\n T[0] / det,\n (T[2] * T[3] - T[0] * T[5]) / det\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`*Shortest distance from point P to line segment AB*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"function distToSeg(P, A, B) {\n const qmp = sub(B, A);\n const t = dot(sub(P, A), qmp) / dot(qmp, qmp);\n if (t >= 0.0 && t <= 1.0) {\n return len(sub(P, { x: A.x + t * qmp.x, y: A.y + t * qmp.y }));\n } else if (t < 0.0) {\n return len(sub(P, A));\n } else {\n return len(sub(P, B));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"function makeBox(x, y, w, h) {\n return { x: x, y: y, w: w, h: h };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"function hitBox(x, y, B) {\n return x >= B.x && x <= B.x + B.w && y >= B.y && y <= B.y + B.h;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`## Import Tactile-JS\nfrom 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 */\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {\n EdgeShape,\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`## Other Tools`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"QuickSettings = require(\"quicksettings\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"p5 = require(\"p5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"