Maze generator & solver · nemotron-3-ultra-550b-a55b
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.
transcript · 10 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.
thinking
The user wants a single-page web app that: 1. Generates a random maze using the recursive-backtracker algorithm on a canvas 2. Animates an A* or BFS solver finding the path from start to finish I'll create a self-contained index.html file with HTML, CSS, and JavaScript all in one file. No external resources. Let me plan the implementation: 1. Canvas for rendering the maze 2. Recursive backtracker maze generation (depth-first search with backtracking) 3. A* or BFS pathfinding algorithm with animation 4. Controls to regenerate maze, start solving, adjust speed, etc. I'll use BFS since it's simpler to animate step by step, but A* would also work well. Let me go with A* as it's more visually interesting (shows the heuristic exploration). Key components: - Maze grid (cells with walls) - Recursive backtracker generation - A* pathfinding with open/closed sets - Animation loop for both generation and solving - Visual distinction: walls, path, visited cells, current cell, start/end
/workspace/index.html (20717 bytes)Successfully wrote 20717 bytes to /workspace/index.html
thinking
The file has been created. Let me verify it works by checking if there are any syntax errors.
{"command":"cd /workspace && head -50 index.html"}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Maze Generator & A* Solver</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', system-ui, sans-serif; background: #1a1a2e; color: #eaeaea; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 20px; } h1 { font-size: 1.8rem; font-weight: 600; margin-bottom: 16px; background: linear-gradient(135deg, #00d4ff, #7c4dff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .container { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 900px; } .canvas-wrapper { position: relative; background: #0f0f1a; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 20px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03); } canvas { display: block;
thinking
The file looks good. Let me verify it's complete and properly structured by checking the end of the file.
{"command":"cd /workspace && tail -30 index.html"}document.getElementById('resetBtn').addEventListener('click', resetAll); document.getElementById('sizeSelect').addEventListener('change', (e) => { gridSize = parseInt(e.target.value); resizeCanvas(); resetAll(); }); document.getElementById('genSpeed').addEventListener('input', (e) => { generationSpeed = parseInt(e.target.value); document.getElementById('genSpeedVal').textContent = generationSpeed; }); document.getElementById('solveSpeed').addEventListener('input', (e) => { solveSpeed = parseInt(e.target.value); document.getElementById('solveSpeedVal').textContent = solveSpeed; }); window.addEventListener('resize', () => { resizeCanvas(); drawMaze(null, null, 'idle'); }); // ============ INITIALIZATION ============ resizeCanvas(); initMaze(); drawMaze(null, null, 'idle'); </script> </body> </html>
thinking
The file looks complete. Let me verify the file exists and check the size.
{"command":"ls -la /workspace/index.html"}-rw-r--r-- 1 node node 20721 Jul 22 18:05 /workspace/index.html
thinking
The file is created successfully. Let me provide a summary to the user.
Created `/workspace/index.html` — a self-contained single-page web app with: **Maze Generation (Recursive Backtracker)** - Depth-first search with backtracking algorithm - Animated step-by-step generation with adjustable speed - 4 grid sizes: 15×15 to 50×50 **A* Pathfinding Solver** - Manhattan distance heuristic - Real-time visualization of open set (cyan) and closed set (purple) - Animated final path reconstruction (gold) **Features** - Responsive canvas that scales to viewport - Generation & solving speed sliders (1-100) - Color-coded legend for all cell states - Status indicator with pulse animation - Reset button to clear and restart - Dark theme with gradient accents - No external dependencies — runs fully offline Open `index.html` in a browser to use. Click **"Generate Maze"** then **"Solve with A*"** to watch the algorithms in action.
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
EVALUATION
Maze grid never generates; only an empty grid with start/end markers and unclicked buttons ever show, no maze or solving occurs.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.