Maze generator & solver · gpt-6.1-sol
Output generated Cost / run $0.1147 Runtime 128.9s
Prompt for this run
Generate a random maze with the recursive-backtracker algorithm on a canvas, then animate an A-star or BFS solver finding the path from start to finish.
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
METRICS
Transcript · 23 messages
Generate a random maze with the recursive-backtracker algorithm on a canvas, then animate an A-star or BFS solver finding the path from start to finish.
index.html (15425 bytes)Successfully wrote to index.html
thinking
{"action":"reload","x":0,"y":0,"toX":0,"toY":0,"text":"","delta":0}Frame 1, +0ms
[Browser image supplied to model]
{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.","error: Loading the stylesheet 'data:text/css,' violates the following Content Security Policy directive: \"style-src 'unsafe-inline'\". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback. The action has been blocked."],"dom":"maze lab\n.\nAN ALGORITHM PLAYGROUND\nEXPLORE · GENERATE · SOLVE\nA little lost. By design.\n\nBuild a random maze. Watch an algorithm find its way out.\n\nEvery maze is a new possibility ↗\nThe maze\nREADY TO EXPLORE\nStart\nFinish\nExplored\nPath\n30 × 20 cells\nTHE CONTROLS\nMaze size\n30 × 20\nSmall · 20 × 14\nMedium · 30 × 20\nLarge · 40 × 28\nExtra large · 55 × 36\nSolver algorithm\nA* · Heuristic search\nBFS · Breadth-first search\nAnimation speed\nBalanced\nTAKE IT SLOW\nFULL SPEED\nNew maze\n▶\nFind the path\n\nGenerated with recursive backtracking.\nOne entrance. One exit. Always a way through.\n\nLIVE STATS\n↺ Reset\nCells explored\n0/ 600\nPath length\n—cells\nElapsed time\n0.0s\nMaze coverage\n0%\n⌘\nA small experiment in finding a way forward.\nRecursive backtracker +\nA* search","images":"attached"}
thinking
{"path":"index.html","edits":[{"oldText":"@import url('data:text/css,');\n","newText":""}]}Successfully replaced 1 block(s) in index.html.
{"action":"reload","x":0,"y":0,"toX":0,"toY":0,"text":"","delta":0}Frame 1, +0ms
[Browser image supplied to model]
{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"maze lab\n.\nAN ALGORITHM PLAYGROUND\nEXPLORE · GENERATE · SOLVE\nA little lost. By design.\n\nBuild a random maze. Watch an algorithm find its way out.\n\nEvery maze is a new possibility ↗\nThe maze\nREADY TO EXPLORE\nStart\nFinish\nExplored\nPath\n30 × 20 cells\nTHE CONTROLS\nMaze size\n30 × 20\nSmall · 20 × 14\nMedium · 30 × 20\nLarge · 40 × 28\nExtra large · 55 × 36\nSolver algorithm\nA* · Heuristic search\nBFS · Breadth-first search\nAnimation speed\nBalanced\nTAKE IT SLOW\nFULL SPEED\nNew maze\n▶\nFind the path\n\nGenerated with recursive backtracking.\nOne entrance. One exit. Always a way through.\n\nLIVE STATS\n↺ Reset\nCells explored\n0/ 600\nPath length\n—cells\nElapsed time\n0.0s\nMaze coverage\n0%\n⌘\nA small experiment in finding a way forward.\nRecursive backtracker +\nA* search","images":"attached"}
{"action":"click","x":1123,"y":516,"toX":0,"toY":0,"text":"","delta":0}Frame 1, +0ms
[Browser image supplied to model]
{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"maze lab\n.\nAN ALGORITHM PLAYGROUND\nEXPLORE · GENERATE · SOLVE\nA little lost. By design.\n\nBuild a random maze. Watch an algorithm find its way out.\n\nEvery maze is a new possibility ↗\nThe maze\nREADY TO EXPLORE\nStart\nFinish\nExplored\nPath\n30 × 20 cells\nTHE CONTROLS\nMaze size\n30 × 20\nSmall · 20 × 14\nMedium · 30 × 20\nLarge · 40 × 28\nExtra large · 55 × 36\nSolver algorithm\nA* · Heuristic search\nBFS · Breadth-first search\nAnimation speed\nInstant-ish\nTAKE IT SLOW\nFULL SPEED\nNew maze\n▶\nFind the path\n\nGenerated with recursive backtracking.\nOne entrance. One exit. Always a way through.\n\nLIVE STATS\n↺ Reset\nCells explored\n0/ 600\nPath length\n—cells\nElapsed time\n0.0s\nMaze coverage\n0%\n⌘\nA small experiment in finding a way forward.\nRecursive backtracker +\nA* search","images":"attached"}
{"action":"click","x":1006,"y":655,"toX":0,"toY":0,"text":"","delta":0}Frame 1, +0ms
[Browser image supplied to model]
{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"maze lab\n.\nAN ALGORITHM PLAYGROUND\nEXPLORE · GENERATE · SOLVE\nA little lost. By design.\n\nBuild a random maze. Watch an algorithm find its way out.\n\nEvery maze is a new possibility ↗\nThe maze\nFINDING A WAY…\nStart\nFinish\nExplored\nPath\n30 × 20 cells\nTHE CONTROLS\nMaze size\n30 × 20\nSmall · 20 × 14\nMedium · 30 × 20\nLarge · 40 × 28\nExtra large · 55 × 36\nSolver algorithm\nA* · Heuristic search\nBFS · Breadth-first search\nAnimation speed\nInstant-ish\nTAKE IT SLOW\nFULL SPEED\nNew maze\nⅡ\nPause exploration\n\nGenerated with recursive backtracking.\nOne entrance. One exit. Always a way through.\n\nLIVE STATS\n↺ Reset\nCells explored\n73/ 600\nPath length\n—cells\nElapsed time\n0.1s\nMaze coverage\n12%\n⌘\nA small experiment in finding a way forward.\nRecursive backtracker +\nA* search","images":"attached"}
{"action":"inspect","x":0,"y":0,"toX":0,"toY":0,"text":"","delta":0}Frame 1, +0ms
[Browser image supplied to model]
{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"maze lab\n.\nAN ALGORITHM PLAYGROUND\nEXPLORE · GENERATE · SOLVE\nA little lost. By design.\n\nBuild a random maze. Watch an algorithm find its way out.\n\nEvery maze is a new possibility ↗\nThe maze\nPATH FOUND\nStart\nFinish\nExplored\nPath\n30 × 20 cells\nTHE CONTROLS\nMaze size\n30 × 20\nSmall · 20 × 14\nMedium · 30 × 20\nLarge · 40 × 28\nExtra large · 55 × 36\nSolver algorithm\nA* · Heuristic search\nBFS · Breadth-first search\nAnimation speed\nInstant-ish\nTAKE IT SLOW\nFULL SPEED\nNew maze\n▶\nSolve again\n\nGenerated with recursive backtracking.\nOne entrance. One exit. Always a way through.\n\nLIVE STATS\n↺ Reset\nCells explored\n250/ 600\nPath length\n181cells\nElapsed time\n0.4s\nMaze coverage\n42%\n⌘\nA small experiment in finding a way forward.\nRecursive backtracker +\nA* search","images":"attached"}
thinking
**Optimizing CSS Layouts** I'm refining the visual fit by adjusting CSS for desktop views, specifically for screens wider than 901 pixels and shorter than 850 pixels. I’m reducing gaps, mainly in the header and control fields. My calculations show various padding and margin adjustments across elements. After tweaking these values, I aim to fit everything neatly within the specified dimensions. The footer height remains at 820 pixels, while the primary goal is to ensure the intro height aligns well within the overall layout.**Enhancing Layout for Live Stats** I think the current layout is clear, which is great, but I really need to ensure that the live stats are prominently visible. To achieve this, I plan to implement a tighter design for the header, main content, and controls. My goal is to make everything fit nicely within a 1200 by 800 pixel dimension using responsive media queries. This way, the user can easily access the important information without clutter.
{"path":"index.html","edits":[{"oldText":"</style>","newText":"@media(min-width:901px) and (max-height:850px){header{height:68px}main{paddinSuccessfully replaced 1 block(s) in index.html.
{"action":"reload","x":0,"y":0,"toX":0,"toY":0,"text":"","delta":0}Frame 1, +0ms
[Browser image supplied to model]
{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"maze lab\n.\nAN ALGORITHM PLAYGROUND\nEXPLORE · GENERATE · SOLVE\nA little lost. By design.\n\nBuild a random maze. Watch an algorithm find its way out.\n\nEvery maze is a new possibility ↗\nThe maze\nREADY TO EXPLORE\nStart\nFinish\nExplored\nPath\n30 × 20 cells\nTHE CONTROLS\nMaze size\n30 × 20\nSmall · 20 × 14\nMedium · 30 × 20\nLarge · 40 × 28\nExtra large · 55 × 36\nSolver algorithm\nA* · Heuristic search\nBFS · Breadth-first search\nAnimation speed\nBalanced\nTAKE IT SLOW\nFULL SPEED\nNew maze\n▶\nFind the path\n\nGenerated with recursive backtracking.\nOne entrance. One exit. Always a way through.\n\nLIVE STATS\n↺ Reset\nCells explored\n0/ 600\nPath length\n—cells\nElapsed time\n0.0s\nMaze coverage\n0%\n⌘\nA small experiment in finding a way forward.\nRecursive backtracker +\nA* search","images":"attached"}
thinking
**Adjusting layout panel** I’m looking at how the maze panel stretches the grid to the sidebar, which is causing some blank space at the bottom around 100. Aligning items to start in the workspace makes the panel more natural. The stats at the bottom around 800 visually conflict with the footer, but it’s still okay. Overall, there's no need to tweak the stats font. I’ll check the alignment and maybe grab a screenshot to compare the bottom at 725 versus the sidebar at 800. That should help!
{"path":"index.html","edits":[{"oldText":"grid-template-columns:minmax(0,1fr) 280px;gap:22px","newText":"grid-template-columns:minmax(0,1fr)Successfully replaced 1 block(s) in index.html.
Created **index.html** with: - Random recursive-backtracker mazes on canvas - Animated A* and BFS solvers - Maze-size and speed controls - Pause/resume, reset, and live statistics - Highlighted final solution path Fully self-contained and offline. Tested maze solving in the browser.