3f:null 40:["$","title",null,{"children":"How are Tip Toe paths generated? | Alex Lockwood | Observable"}] 46:T6c8,generateTipToeChart( tipToeContext, addDisabledTiles( tipToeContext, [ { row: 0, col: 2, enabled: true }, { row: 1, col: 2, enabled: true }, { row: 2, col: 2, enabled: true }, { row: 2, col: 3, enabled: true, isTranslucent: true }, { row: 2, col: 4, enabled: true, isTranslucent: true }, { row: 2, col: 5, enabled: true, isTranslucent: true }, { row: 2, col: 6, enabled: true, isTranslucent: true }, { row: 2, col: 7, enabled: true }, { row: 3, col: 7, enabled: true }, { row: 4, col: 7, enabled: true }, { row: 5, col: 7, enabled: true }, { row: 5, col: 6, enabled: true, isTranslucent: true }, { row: 5, col: 5, enabled: true }, { row: 6, col: 5, enabled: true }, { row: 7, col: 5, enabled: true }, { row: 7, col: 6, enabled: true, isTranslucent: true }, { row: 7, col: 7, enabled: true, isTranslucent: true }, { row: 7, col: 8, enabled: true, isTranslucent: true }, { row: 7, col: 9, enabled: true }, { row: 8, col: 9, enabled: true }, { row: 9, col: 9, enabled: true }, { row: 10, col: 9, enabled: true }, { row: 10, col: 8, enabled: true, isTranslucent: true }, { row: 10, col: 7, enabled: true, isTranslucent: true }, { row: 10, col: 6, enabled: true, isTranslucent: true }, { row: 10, col: 5, enabled: true, isTranslucent: true }, { row: 10, col: 4, enabled: true, isTranslucent: true }, { row: 10, col: 3, enabled: true, isTranslucent: true }, { row: 10, col: 2, enabled: true, isTranslucent: true }, { row: 10, col: 1, enabled: true }, { row: 11, col: 1, enabled: true }, { row: 12, col: 1, enabled: true }, ], ), );47:T91a,function getStepByStepEnabledTiles(context) { function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min) + min); } function clamp(num, min, max) { return Math.min(Math.max(num, min), max); } // This is the shuffle algorithm defined in the Fall Guys codebase. function fallGuysShuffle(list) { let m = list.length; while (m > 1) { m--; const num = Math.floor(Math.random() * list.length); const room = list[num]; list[num] = list[m]; list[m] = room; } } const {numRows, numCols, rowSteps, numPaths} = context; const previousColumns = []; let currentRow = -1; let currentColumn = 0; const tiles = []; const stepByStepTilesList = []; function generatePath() { const stepByStepTiles = []; fallGuysShuffle(rowSteps); currentRow = -1; currentColumn = getRandomInt(0, numCols); function connectPathToNextTile(row, col) { function pushCurrentTile() { tiles.push({ row: currentRow, col: currentColumn }); }; while (currentRow < row) { currentRow += 1; pushCurrentTile(); } if (row > 0) { stepByStepTiles.push([...tiles]); } while (currentColumn < col) { currentColumn += 1; pushCurrentTile(); } while (currentColumn > col) { currentColumn -= 1; pushCurrentTile(); } if (row > 0) { stepByStepTiles.push([...tiles]); } previousColumns.push(col); } connectPathToNextTile(0, currentColumn); for (let i = 0; i < rowSteps.length - 1; i++) { const row = clamp(currentRow + rowSteps[i], currentRow, numRows - 2); const col = (function() { const deviationFromCenter = d3.sum(previousColumns) / previousColumns.length - (numCols / 2); if ((currentColumn !== 0 && deviationFromCenter > 0) || (currentColumn === numCols - 1)) { return getRandomInt(0, currentColumn); } else { return getRandomInt(currentColumn + 1, numCols); } })(); connectPathToNextTile(row, col); } connectPathToNextTile(numRows - 1, currentColumn); stepByStepTilesList.push(stepByStepTiles); } for (let i = 0; i < numPaths; i++) { generatePath(); } return stepByStepTilesList; }48:[] 44:{"id":"862dbc57ecc92d18","slug":"tip-toe-paths","title":"How are Tip Toe paths generated?","thumbnail":"2a29cd91601b0cb3d447883c98a75f7554c654bb198c51766cb52b1696eb9b37","access_level":"public","create_time":"$D2023-06-13T17:59:07.518Z","update_time":"$D2023-10-03T19:12:33.505Z","view_time":null,"first_public_time":"$D2023-06-13T17:59:07.518Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6d132976a5d13ae0","login":"alexjlockwood","name":"Alex Lockwood","avatar_url":"https://avatars-next.observableusercontent.com/9202c2d37afa77f4123f2046c8f8db5f34f05f35d361cda0587576ce1b119493","tier":"starter_2024","bio":"","following":false},"version":736,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c44c7df024fdc0c2","login":"alexjlockwood","name":"Alex Lockwood","avatar_url":"https://avatars-next.observableusercontent.com/9202c2d37afa77f4123f2046c8f8db5f34f05f35d361cda0587576ce1b119493","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"c44c7df024fdc0c2","login":"alexjlockwood","name":"Alex Lockwood","avatar_url":"https://avatars-next.observableusercontent.com/9202c2d37afa77f4123f2046c8f8db5f34f05f35d361cda0587576ce1b119493","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"How are Tip Toe paths generated?","cells":[{"id":0,"value":"# How are Tip Toe paths generated?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":720,"value":"## Tip Toe race round","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":710,"value":"### Step #1\n\nPick the locations of the three 3x1 and two 4x1 blocks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":652,"value":"generateTipToeChart(\n tipToeContext, \n addDisabledTiles(\n tipToeContext,\n [\n { row: 0, col: 2, enabled: true },\n { row: 1, col: 2, enabled: true },\n { row: 2, col: 2, enabled: true },\n { row: 2, col: 7, enabled: true },\n { row: 3, col: 7, enabled: true },\n { row: 4, col: 7, enabled: true },\n { row: 5, col: 7, enabled: true },\n { row: 5, col: 5, enabled: true },\n { row: 6, col: 5, enabled: true },\n { row: 7, col: 5, enabled: true },\n { row: 7, col: 9, enabled: true },\n { row: 8, col: 9, enabled: true },\n { row: 9, col: 9, enabled: true },\n { row: 10, col: 9, enabled: true },\n { row: 10, col: 1, enabled: true },\n { row: 11, col: 1, enabled: true },\n { row: 12, col: 1, enabled: true },\n ],\n ),\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"### Step #2\n\nConnect the blocks horizontally so a single path to the finish is made.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":685,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"### Step #3\n\nRepeat this same process a second time so that 2 paths to the finish are made.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"viewof generateNewTipToePath1 = Inputs.button(\"Reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"generateTipToeChart(tipToeContext, tipToeStepByStepTiles2);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"viewof generateNewTipToePath2 = Inputs.button(\"Reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"## Tip Toe Finale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":726,"value":"For Tip Toe Finale, the algorithm is essentially the same except for 2 differences:\n\n1. Only one path to the finish line is generated instead of 2.\n2. Each path is made up of three 3x1 blocks, two 4x1 blocks, and two 5x1 blocks.\n\nNote that when you combine the three 3x1 blocks, two 4x1 blocks, and two 5x1 blocks, the resulting path should be 21 tiles long. However, since the grid is only 20 tiles long, this means the last tile in the generated path will be discarded.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":434,"value":"generateTipToeChart(finaleContext, finaleStepByStepTiles);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"viewof generateNewFinalePath = Inputs.button(\"Reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"function generateTipToeChart(context, stepByStepTiles) {\n const {numRows, numCols, tileColor} = context;\n const width = 300;\n const tilePadding = 2;\n const strokeWidth = 1;\n const tileSize = width / numCols;\n\n const div = d3.create(\"div\").style('overflow-x', 'auto')\n\n div.append(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", tileSize * numRows)\n .selectAll(\"rect\")\n .data(stepByStepTiles)\n .join(\"rect\")\n .style(\"fill\", ({enabled}) => tileColor(enabled))\n .style(\"fill-opacity\", ({isTranslucent}) => isTranslucent ? 0.35 : 1)\n .style(\"stroke\", \"#000\")\n .style(\"stroke-width\", strokeWidth)\n .attr(\"x\", ({col}) => ((numCols - col - 1) * tileSize) + tilePadding)\n .attr(\"y\", ({row}) => ((numRows - row - 1) * tileSize) + tilePadding)\n .attr(\"width\", tileSize - 2 * tilePadding)\n .attr(\"height\", tileSize - 2 * tilePadding);\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"tipToeStepByStepTiles1 = {\n generateNewTipToePath1;\n return getStepByStepTilesWithDelay(tipToeContext, [getStepByStepEnabledTiles(tipToeContext)[0]]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"tipToeStepByStepTiles2 = {\n generateNewTipToePath2;\n return getStepByStepTilesWithDelay(tipToeContext, getStepByStepEnabledTiles(tipToeContext));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"finaleStepByStepTiles = {\n generateNewFinalePath;\n return getStepByStepTilesWithDelay(finaleContext, getStepByStepEnabledTiles(finaleContext));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"async function* getStepByStepTilesWithDelay(context, stepByStepEnabledTiles) {\n const {numRows, numCols} = context;\n const stepByStepTiles = stepByStepEnabledTiles\n .flatMap(tiles => tiles)\n .map(enabledTiles => addDisabledTiles(context, enabledTiles));\n \n for (let i = 0; i < stepByStepTiles.length; i++) {\n yield stepByStepTiles[i];\n await Promises.delay(500);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"function addDisabledTiles(context, enabledTiles) {\n const {numRows, numCols} = context;\n const tiles = [];\n for (let row = 0; row < numRows; row++) {\n for (let col = 0; col < numCols; col++) {\n const enabledTile = enabledTiles.find(({row: r, col: c}) => r == row && c == col);\n if (enabledTile) {\n tiles.push({ ...enabledTile, row, col, enabled: true });\n } else {\n tiles.push({ row, col, enabled: false });\n }\n }\n }\n return tiles;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"function calculateStraightLineProbability(columns) {\n return runSimulation(tileSet => {\n // TODO: start with middle columns because they are more likely to be straight lines?\n return columns.some(col => {\n return d3.range(tipToeContext.numRows).every(row => hasTile(tileSet, row, col));\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"straightLineProbability = calculateStraightLineProbability(d3.range(tipToeContext.numCols));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"straightLineDownSideProbability = calculateStraightLineProbability([0, tipToeContext.numCols - 1]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"singleEndPathProbability = {\n return runSimulation(tileSet => {\n let numDoubleEndPaths = 0;\n for (let col = 0; col < tipToeContext.numCols; col++) {\n if (hasTile(tileSet, tipToeContext.numRows - 1, col)) {\n numDoubleEndPaths++;\n if (numDoubleEndPaths > 1) {\n return false;\n }\n }\n }\n return true;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"// TODO: figure out how these probabilities actually work (do they all add up to 1.0?)\nendPathColumnProbabilities = {\n const numSimulations = 10000;\n const map = new Map();\n for (let n = 0; n < numSimulations; n++) {\n // TODO: reuse code\n const stepByStepTiles = getStepByStepEnabledTiles(tipToeContext);\n const tileSet = new Set(stepByStepTiles[stepByStepTiles.length - 1].map(({row, col}) => `${row},${col}`));\n for (let col = 0; col < tipToeContext.numCols; col++) {\n if (hasTile(tileSet, tipToeContext.numRows - 1, col)) {\n map.set(col, (map.get(col) ?? 0) + 1);\n }\n }\n }\n return Array.from(map.entries())\n .map(([col, count]) => [tipToeContext.numCols - col, (count ?? 0) / numSimulations])\n .sort(([col1], [col2]) => col1 - col2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"function runSimulation(conditionFn) {\n const numSimulations = 10000;\n let numSuccess = 0;\n for (let n = 0; n < numSimulations; n++) {\n const stepByStepTiles = getStepByStepEnabledTiles(tipToeContext);\n const tileSet = new Set(stepByStepTiles[stepByStepTiles.length - 1].map(({row, col}) => `${row},${col}`));\n if (conditionFn(tileSet)) {\n numSuccess++;\n }\n }\n return numSuccess / numSimulations;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"function hasTile(set, row, col) {\n return set.has(`${row},${col}`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"tipToeContext = { \n return { \n numRows: 13, \n numCols: 10,\n rowSteps: [2, 2, 2, 3, 3],\n numPaths: 2,\n tileColor: (enabled) => enabled ? \"#F8FA8E\" : \"#DD8833\",\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"finaleContext = {\n return { \n numRows: 20, \n numCols: 8,\n rowSteps: [2, 2, 2, 3, 3, 4, 4],\n numPaths: 1,\n tileColor: (enabled) => enabled ? \"#F8FA8E\" : \"#09729a\",\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"