30:T6a6,canvas = { // Pretty nasty. Create a canvas that covers the entire page as an overlay, // and draw paths on that. var c = document.getElementById('foo'); if (c) { c.parentNode.removeChild(c); } const canvas = DOM.canvas(window.innerWidth, window.innerHeight); canvas.id = 'foo'; canvas.style.position = 'absolute'; canvas.style.top = '0px'; canvas.style.left = '0px'; canvas.style.zIndex = -1; document.body.appendChild(canvas); // Compute the absolute coordinates of the table cell containing the // character at (row, col). function coords(row, col) { const id = 'c' + row + '-' + col; const el = document.getElementById(id); const rect = el.getBoundingClientRect(); const c = {x: rect.x + rect.width / 2, y: rect.y + rect.height / 2}; return c; } function jitter(pos) { const amplitude = jitterAmplitude; return {x: pos.x + (amplitude / 2 - Math.random() * amplitude), y: pos.y + (amplitude / 2 - Math.random() * amplitude)}; } function plotPath(path) { var ctx = canvas.getContext('2d'); var start = jitter(coords(path[0].y, path[0].x)); ctx.beginPath(); const r = 0; //Math.trunc(Math.random() * 256); const g = 0; //Math.trunc(Math.random() * 256); const b = 0; //Math.trunc(Math.random() * 256); ctx.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',0.5)'; ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',0.5)'; ctx.lineWidth = 7; ctx.moveTo(start.x, start.y); for (var i = 1; i < path.length; i++) { const pos = jitter(coords(path[i].y, path[i].x)); ctx.lineTo(pos.x, pos.y); } ctx.stroke(); } plotPath(solution.path); }31:[] 2e:{"title":"Florentius' Labyrinth","cells":[{"id":0,"value":"md`# Florentius' Labyrinth\n\n[This page is inspired by [Will Fitzgerald's investigation](https://github.com/willf/florentius/blob/master/investigation.md) into the \"labyrinth\" page of the 10th century monk and scribe, Florentius.]\n\nIn Pope Gregory's _Moralia in Job_, Florentius designed [a page with a letterform grid](https://upload.wikimedia.org/wikipedia/commons/9/94/Moralia_in_Job_945_-_Laberinto_conmemorativo_-_Biblioteca_Nacional_Cod80.JPG) that contained 354,200 separate paths containing the phrase _Florentium indignum memorare_, or \"remember the unworthy Florentius\".\n\nEvery path containing the phrase starts at the top center of the grid.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"{\n return html`${\n labyrinthText.map((l, row) => html`${\n l.split('').map((c, col) => html``)\n }`)\n}

${c}

`;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"md`## Number of solutions so far: ${solution.count}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"goalPhrase = 'FLORENTIUM INDIGNUM MEMORARE'","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"viewof jitterAmplitude = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 5, \n title: \"Jitter\", \n description: \"Amplitude of line jitter.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"viewof randomizeSearch = checkbox({\n title: \"Randomize search?\",\n options: [\"yes\"],\n value: [\"yes\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"viewof renderingSpeedup = slider({\n min: 1, \n max: 10000, \n step: 100, \n value: 1, \n title: \"Rendering speedup\", \n description: \"Only draw every N solutions.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"pathText = {\n const textMatrix = labyrinthText.map(l => l.split('').map(c => c));\n \n function pathText(path) {\n return path.reduce((s, pos) => s + textMatrix[pos.y][pos.x], '');\n }\n return pathText;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"neighborsOf = function(pos) {\n var deltas = [{dx: 1, dy: 0},\n {dx: -1, dy: 0},\n {dx: 0, dy: 1},\n {dx: 0, dy: -1}];\n var neighbs = deltas.map(d => ({x: pos.x + d.dx, y: pos.y + d.dy}));\n neighbs = neighbs.filter(pos => pos.x >= 0 && pos.x <= 12 && pos.y >= 0 && pos.y <= 19);\n return neighbs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"solution = { \n var queue = [[{x: 6, y: 0}]];\n var count = 0;\n const cookedGoalPhrase = goalPhrase.replace(/ /g,'');\n var lastSolution;\n \n while (queue.length > 0) {\n if (randomizeSearch && randomizeSearch.length && Math.random() < 0.01) {\n shuffle(queue);\n }\n const path = queue.pop();\n if (pathText(path) === cookedGoalPhrase) {\n count += 1;\n lastSolution = path;\n if (count % renderingSpeedup == 0) {\n yield {path, count};\n }\n } else {\n var neighbors = neighborsOf(path[path.length - 1]);\n var newPaths = neighbors.map(n => path.concat(n));\n newPaths = newPaths.filter(p => cookedGoalPhrase.startsWith(pathText(p)));\n queue = queue.concat(newPaths);\n }\n }\n yield {path: lastSolution, count, final: true};\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"shuffle = function(a) {\n for (let i = a.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [a[i], a[j]] = [a[j], a[i]];\n }\n return a;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"labyrinthText = [\n 'TNEROLFLORENT',\n 'ITNEROLORENTI',\n 'UITNERORENTIU',\n 'MUITNERENTIUM',\n 'IMUITNENTIUMI',\n 'NIMUITNTIUMIN',\n 'DNIMUITIUMIND',\n 'IDNIMUIUMINDI',\n 'GIDNIMUMINDIG',\n 'NGIDNIMINDIGN',\n 'UNGIDNINDIGNU',\n 'MUNGIDNDIGNUM',\n 'MMUNGIDIGNUMM',\n 'EMMUNGIGNUMME',\n 'MEMMUNGNUMMEM',\n 'OMEMMUNUMMEMO',\n 'ROMEMMUMMEMOR',\n 'AROMEMMMEMORA',\n 'RAROMEMEMORAR',\n 'ERAROMEMORARE'\n ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"import {slider, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}