2d:null 2e:["$","title",null,{"children":"Auto random tactile pattern | Igor A1 | Observable"}] 33:T42e,AutoRefreshCycle = class { constructor(svg) { this._stack = new TileLayers(svg); this._elapsed = 0; this._interval = null; this._callback = (elapsed) => { this._stack.backUpdate(); const _elapsed = elapsed % INTERVAL; if (_elapsed < this._elapsed) { this._stack.reverse(); this._elapsed = _elapsed; } else { this._elapsed = _elapsed; if (this._elapsed >= NEXT_START) { this._stack.frontUpdate(); this._stack.opacity = opacity(this._elapsed); } } }; } start() { this._interval = d3.timer(this._callback, DURATION); } stop() { if (this._interval !== null) this._interval.stop(); } continue() { if (this._elapsed > INTERVAL + (INTERVAL - NEXT_START) / 2) { this._stack.reverse(); } this._elapsed = 0; this._interval.restart(this._callback, DURATION); } reset() { if (this._interval !== null) { this._interval.stop(); this._interval = null; } this._elapsed = 0; this._stack.reset(); } }34:T660,createRandomTiling = () => { const id = tilingTypes[Math.floor(numTypes * Math.random())]; let tiling = new IsohedralTiling(id); const newParams = tiling.getParameters(); newParams.forEach(p => (p += Math.random() * 0.3 - 0.15)); tiling.setParameters(newParams); const edges = []; for (let i = 0; i < tiling.numEdgeShapes(); ++i) { const points = []; const shape = tiling.getEdgeShape(i); switch (shape) { case EdgeShape.I: // Pass break; case EdgeShape.J: points.push({ x: Math.random() * 0.6, y: Math.random() - 0.5 }); points.push({ x: Math.random() * 0.6 + 0.4, y: Math.random() - 0.5 }); break; case EdgeShape.S: points.push({ x: Math.random() * 0.6, y: Math.random() - 0.5 }); points.push({ x: 1.0 - points[0].x, y: -points[0].y }); break; case EdgeShape.U: points.push({ x: Math.random() * 0.6, y: Math.random() - 0.5 }); points.push({ x: 1.0 - points[0].x, y: points[0].y }); break; } edges.push(points); } const colors = []; for (let i = 0; i < 3; ++i) { colors.push([ Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), Math.floor(Math.random() * 255) ]); } const dTheta = Math.random() * 2 * Math.PI; const dVector = Math.random() * 0.05; return { tiling: tiling, edges: edges, colors: colors, tx: Math.random() * 10, ty: Math.random() * 10, theta: Math.random() * 2 * Math.PI, sc: Math.random() * 20 + 4, dx: dVector * Math.cos(dTheta), dy: dVector * Math.sin(dTheta) }; }35:T5fe,tilingShapes = (T) => { const shapes = []; const cos = Math.cos(T.theta); const sin = Math.sin(T.theta); const O = { x: T.tx, y: T.ty }; const V = { x: cos, y: sin }; const W = { x: -sin, y: cos }; const t1l = len(T.tiling.getT1()); const t2l = len(T.tiling.getT2()); const margin = 1.5 * Math.sqrt(t1l * t1l + t2l * t2l); const points = [ samp(O, V, W, -margin, -margin), samp(O, V, W, T.sc + margin, -margin), samp(O, V, W, T.sc + margin, T.sc * (HEIGHT / WIDTH) + margin), samp(O, V, W, -margin, T.sc * (HEIGHT / WIDTH) + margin) ]; const M = mul( [WIDTH, 0, 0, 0, WIDTH, 0], inv(matchSeg(O, samp(O, V, W, T.sc, 0))) ); for (let i of T.tiling.fillRegionQuad( points[0], points[1], points[2], points[3] )) { const TT = i.T; const CT = mul(M, TT); const color = T.colors[T.tiling.getColour(i.t1, i.t2, i.aspect)]; const fill = rgb2hex(color[0], color[1], color[2]); let shape = `M${tvertex(CT, T.tiling.getVertex(0))}`; for (let si of T.tiling.shape()) { const S = mul(CT, si.T); if (si.shape === EdgeShape.I) { shape += `L${tvertex(S, { x: si.rev ? 0 : 1, y: 0 })}`; } else { const edge = T.edges[si.id]; if (si.rev) { shape += tbezier(S, edge[1].x, edge[1].y, edge[0].x, edge[0].y, 0, 0); } else { shape += tbezier(S, edge[0].x, edge[0].y, edge[1].x, edge[1].y, 1, 0); } } } shapes.push({ d: shape, fill: fill }); } return shapes; }36:[] 31:{"id":"f7219a34d166d077","slug":"auto-random-tactile-pattern","title":"Auto random tactile pattern","thumbnail":"9e33675671b0befbb140b9de0e86e26386468c77941a3546d1438fa435d74d5d","access_level":"public","create_time":"$D2021-05-19T10:39:31.819Z","update_time":"$D2021-09-23T10:29:09.560Z","view_time":null,"first_public_time":"$D2021-09-23T10:33:59.185Z","has_unpublished_edits":null,"fork":false,"stars":1,"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":463,"publish_version":463,"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":true,"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":"Auto random tactile pattern","cells":[{"id":0,"value":"md`# Auto random tactile pattern \nporting from [autodemo](https://github.com/isohedral/tactile-js/blob/master/demo/autodemo.js) with **D3** and **SVG**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof WIDTH = Inputs.range([100, 1200], {\n value: 800,\n step: 20,\n width: 400,\n label: \"WIDTH\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"viewof HEIGHT = Inputs.range([100, 640], {\n value: 200,\n step: 10,\n width: 400,\n label: \"HEIGHT\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"viewof INTERVAL = Inputs.range([3000, 10000], {\n value: 6000,\n step: 100,\n width: 400,\n label: \"INTERVAL\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"viewof NEXT_START = Inputs.range([3000, INTERVAL], {\n value: 5000,\n step: 100,\n width: 400,\n label: \"NEXT_START\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"viewof DURATION = Inputs.range([100, 500], {\n value: 200,\n step: 20,\n width: 400,\n label: \"DURATION\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"viewof buttons = html`

${Object.assign(html`