31:T63f,ruleSelector = { const input = select({ title: 'Current rule', value: defaultRule, options: [ { label: '--- 2-color, 1-state ---', disabled: true }, { value: '{{{1, 2, 0}, {0, 8, 0}}}', label: "Langton's Ant"}, { label: '--- 2-color, 2-state ---', disabled: true }, { value: '{{{1, 1, 1}, {1, 8, 0}}, {{1, 2, 1}, {0, 1, 0}}}', label: 'Spiral Growth' }, { value: '{{{1, 8, 1}, {1, 8, 1}}, {{1, 2, 1}, {0, 1, 0}}}', label: 'Fibonacci Spiral' }, { value: '{{{1, 8, 0}, {1, 2, 1}}, {{0, 2, 0}, {0, 8, 1}}}', label: 'Strange Square' }, { value: '{{{1, 2, 0}, {1, 8, 1}}, {{1, 8, 0}, {0, 1, 1}}}', label: 'Zippy' }, { value: '{{{1, 2, 1}, {0, 8, 1}}, {{1, 4, 0}, {1, 8, 0}}}', label: 'Bouncer' }, '{{{1, 2, 0}, {1, 2, 1}}, {{0, 1, 0}, {0, 1, 1}}}', '{{{1, 2, 1}, {1, 8, 1}}, {{1, 2, 1}, {0, 2, 0}}}', '{{{1, 2, 0}, {0, 1, 1}}, {{1, 1, 0}, {1, 1, 0}}}', '{{{1, 4, 0}, {0, 8, 1}}, {{1, 2, 1}, {1, 1, 0}}}', { label: '--- 2-color, 3-state ---', disabled: true }, { value: `{{{1,8,1},{1,2,0}},{{1,4,1},{1,4,2}},{{" "},{0,4,0}}}`, label: 'Fractal Snowflake' }, { value: '{{{1, 2, 1}, {0, 8, 1}}, {{0, 2, 2}, {1, 2, 0}}, {{1, 2, 1}, {1, 8, 0}}}', label: 'Mazemaker' }, { label: '--- 3-color, 2-state ---', disabled: true }, '{{{1, 2, 1}, {2, 8, 1}, {0, 2, 0}}, {{1, 2, 1}, {2, 2, 0}, {1, 8, 0}}}', ] }); input[0].value = turmiteRunner.ruleString; input.addEventListener("input", () => { mutable turmiteRunner = new TurmiteRunner(input.value); }); return input; }32:T440,{ if (!turmiteRunner) return 'No active TurmiteRunner.'; function mapRule ([write, turn, nextState]) { return ` ${write ?? ''} ${{ 1:'↑', 2:'→', 4:'↓', 8:'←' }[turn] ?? ''} ${nextState ?? ''}`; } const currentRule = turmiteRunner.rules; const numberOfStates = currentRule.length; const numberOfColors = currentRule[0].length; return html` ${R.times(i => ``, numberOfColors)} ${R.repeat(``, numberOfColors)} ${currentRule[0].map(mapRule)} ${currentRule.slice(1).map((r, i) => `${r.map(mapRule).join('')}`).join('')}

		Current color
		${i}
		Write color	Turn	Next state
Current state	0
${i + 1}

`; }33:Td6a,class TurmiteRunner { constructor (ruleString, { canvasSize = 500, initialPixelSize = 20, zoomBuffer = 20, mutationSteps = [] } = {}) { this.context = DOM.context2d(canvasSize, canvasSize); this.canvas = this.context.canvas; this.canvasSize = canvasSize; this.initialPixelSize = initialPixelSize; this.zoomBuffer = zoomBuffer; this.ruleString = ruleString; this.rules = fromBracketString(ruleString); this.mutationSteps = mutationSteps; this.reset(); } reset () { this.turmite = new Turmite(this.rules); this.step = 0; this.pixelSize = this.initialPixelSize; } recompute () { const currentStep = this.step; this.reset(); return this.goToStep(currentStep); } advance (steps = 1) { for (let i = 0; i < steps; i++) { this.turmite.step(); this.step++; if (this.mutationSteps.includes(this.step)) { this.turmite.turn(1); } } } goToStep (targetStep) { this.displayMessage(`Calculating...`); this.calculating = true; return runInTimeout(() => { if (targetStep < this.step) this.reset(); this.advance(targetStep - this.step); this.calculating = false; }); } get needsZoomOut () { return Array.from(this.turmite.world.keys()).some( key => this.nearEdge(this.getKeyCoordinate(key)) ); } zoomOut () { this.pixelSize *= 0.99; } zoomToFit () { while (this.needsZoomOut) this.zoomOut(); } clear () { this.context.clearRect(0, 0, this.canvasSize, this.canvasSize); } draw () { if (this.calculating) return; this.clear(); this.drawWorld(); this.drawCurrentPosition(); } drawWorld () { const colorFactor = 256 / (this.rules[0].length - 1); for (const [key, value] of this.turmite.world) { const coord = this.getKeyCoordinate(key); if (value) { const shade = colorFactor * (value - 1); this.context.fillStyle = `rgb(${shade}, ${shade}, ${shade})`; this.context.fillRect(...coord, this.pixelSize, this.pixelSize); } } } drawCurrentPosition () { const coord = this.getKeyCoordinate(this.turmite.positionKey); const [head, ...tail] = trianglePoints[this.turmite.orientation] .map(R.pipe( R.map(R.multiply(this.pixelSize)), addVectors(coord) )); this.context.beginPath(); this.context.moveTo(...head); tail.forEach(point => this.context.lineTo(...point)); this.context.fillStyle = 'Red'; this.context.fill(); } displayMessage (text) { const center = this.canvasSize / 2; this.context.textAlign = 'center'; this.context.textBaseline = 'middle'; this.context.font = '200 25px sans-serif'; this.context.fillStyle = 'rgba(255, 255, 255, 0.88)'; this.context.fillRect(0, 0, this.canvasSize, this.canvasSize); this.context.fillStyle = 'black'; this.context.fillText(text, center, center); } getKeyCoordinate (key) { const [x, y] = key.split(':').map(Number); return [ this.canvasSize / 2 + this.pixelSize * x, this.canvasSize / 2 + this.pixelSize * y ]; } nearEdge ([x, y]) { return ( x - this.zoomBuffer < 0 || x + this.pixelSize + this.zoomBuffer > this.canvasSize || y - this.zoomBuffer < 0 || y + this.pixelSize + this.zoomBuffer > this.canvasSize ); } }34:T502,class Turmite { constructor (rules) { this.world = new Map(); this.position = [0, 0]; this.state = 0; this.orientation = 0; this.rules = rules; } get positionKey () { return this.position.join(':'); } get color () { const key = this.positionKey; return this.world.has(key) ? this.world.get(key) : 0; } set color (newColor) { if (newColor) { this.world.set(this.positionKey, newColor); } else { this.world.delete(this.positionKey); } } turn (turnVal) { this.orientation = (this.orientation + turnVal) % 4; } move () { this.position = addVectors(this.position, [ [ 0, -1], // north [ 1, 0], // east [ 0, 1], // south [-1, 0] // west ][this.orientation]); } getInstruction () { const instruction = this.rules[this.state]?.[this.color]; if (!instruction) { throw new Error(`could not find instruction for state: ${this.state}, color: ${this.color}`); } return instruction; } step () { if (!this.rules || !this.rules.length) return; const [newColor, turnVal, newState] = this.getInstruction(); this.state = newState; this.color = newColor; this.turn(Math.log2(turnVal)); this.move(); } }35:[] 2f:{"title":"Turmite Explorer","cells":[{"id":0,"value":"md`# Turmite Explorer\nhttps://en.wikipedia.org/wiki/Turmite\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"turmiteRunner.canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":2948,"value":"{\n do {\n if (speed) {\n turmiteRunner.advance(Math.max(speed - 49, 1));\n }\n if (turmiteRunner.needsZoomOut) turmiteRunner.zoomOut();\n turmiteRunner.draw();\n //yield md`Step: ${turmiteRunner.step}`;\n const tickLength = Math.max(51 - speed, 1);\n yield Promises.tick(tickLength, md`Step: ${turmiteRunner.step}`);\n } while (speed);\n \n update;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"viewof speed = slider({\n min: 0,\n max: 100,\n step: 1,\n value: initialOptions.speed ?? 25,\n title: 'Iteration speed'\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":2764,"value":"{\n function advance () {\n turmiteRunner.advance();\n viewof speed[0].value = 0;\n viewof speed.dispatchEvent(new CustomEvent(\"input\"));\n }\n \n return buttonRow([\n ['manual advance', advance]\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2864,"value":"viewof goToStep = {\n const input = number({\n submit: 'go to step',\n size: '10px',\n value: turmiteRunner.step || null\n });\n input.addEventListener('input', async () => {\n await turmiteRunner.goToStep(input.value);\n turmiteRunner.zoomToFit();\n mutable update = true;\n });\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3114,"value":"viewof mutationSteps = {\n const input = text({\n submit: 'submit',\n title: 'Mutate (add extra rotation) on steps:',\n description: 'accepts comma-separated list of values (e.g. 271, 306, 419)',\n size: '10px',\n value: turmiteRunner.mutationSteps.join(', '),\n getValue: ({ value }) => value ? value.split(',').map(Number) : []\n });\n \n input.addEventListener('input', async () => {\n turmiteRunner.mutationSteps = input.value;\n await turmiteRunner.recompute();\n turmiteRunner.zoomToFit();\n mutable update = true;\n });\n \n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1905,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2188,"value":"{\n const textInput = text({\n title: 'Load Turmite from rule string',\n submit: 'Load'\n });\n const errorMessage = DOM.element('div', {\n class: 'info error',\n style: 'padding: 5px 0; font-size: 15px;',\n hidden: true\n });\n errorMessage.textContent = 'error: input could not be parsed';\n textInput.appendChild(errorMessage);\n textInput.addEventListener('submit', () => {\n errorMessage.hidden = true;\n try {\n mutable turmiteRunner = new TurmiteRunner(textInput.value);\n } catch (e) {\n errorMessage.hidden = false;\n }\n });\n return textInput;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3253,"value":"{\n update; // add reactive dependency on update\n const { step, ruleString, mutationSteps } = turmiteRunner;\n const params = new URLSearchParams({\n step,\n speed,\n rule: btoa(ruleString)\n });\n if (mutationSteps.length) params.set('mutations', mutationSteps);\n const link = document.baseURI.split('?')[0] + '?' + params;\n return html`\n

Shareable link:

\n ${link}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2498,"value":"{\n if (!turmiteRunner) return 'No active TurmiteRunner.';\n return html`

Rule String

{\n${turmiteRunner.rules.map(rows => `  {${rows.map(rule => `{${rule.join(', ')}}`).join(', ')}}`).join(',\\n')}\n}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"mutable turmiteRunner = {\n const runner = new TurmiteRunner(\n initialOptions.rule || defaultRule,\n { mutationSteps: initialOptions.mutations }\n );\n\n if (initialOptions.step) {\n runner.goToStep(initialOptions.step).then(() => {\n runner.zoomToFit();\n mutable update = true;\n });\n }\n\n return runner;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1865,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3299,"value":"initialOptions = R.evolve(\n {\n step: Number,\n movesPerDraw: Number,\n rule: atob,\n mutations: arr => arr.split(',').map(Number)\n },\n Object.fromEntries(new URLSearchParams(location.search))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3658,"value":"defaultRule = '{{{1, 2, 0}, {1, 8, 1}}, {{1, 8, 0}, {0, 1, 1}}}'","pinned":false,"hidden":false,"mode":"ojs"},{"id":3566,"value":"mutable update = false;","pinned":false,"hidden":false,"mode":"ojs"},{"id":2661,"value":"addVectors = R.zipWith(R.add)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2719,"value":"trianglePoints = [\n [[0, 1], [1, 1], [0.5, 0]],\n [[0, 0], [0, 1], [1, 0.5]],\n [[0, 0], [1, 0], [0.5, 1]],\n [[1, 0], [1, 1], [0, 0.5]]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"function fromBracketString (str) {\n if (!str) return [];\n return JSON.parse(str.replace(/{/g, '[').replace(/}/g, ']'));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2743,"value":"R = require('ramda')","pinned":false,"hidden":false,"mode":"ojs"},{"id":3081,"value":"function buttonRow (buttons) {\n return html`${\n buttons.map(([name, cb]) => {\n const btn = button(name);\n btn.addEventListener('input', cb);\n btn.style.display = 'inline-block';\n btn.style.marginRight = '10px';\n return btn;\n })\n }`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3879,"value":"function runInTimeout (func) {\n return new Promise(resolve => {\n setTimeout(() => {\n func();\n resolve();\n }, 0)\n });\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"import {slider, select, number, text, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2058,"value":"import {style} from '@elisk/styles'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2388,"value":"style`\n div.info {\n font-family: sans-serif;\n font-weight: 300;\n }\n\n .error {\n color: red;\n }\n\n table.rule-table {\n max-width: 800px;\n\n th {\n background-color: #eaecf0;\n }\n\n td {\n background-color: #f8f9fa;\n }\n\n td, th {\n text-align: center;\n border: 1px solid #a2a9b1;\n padding: 0.2em 0.4em;\n }\n }\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}