A robot arm plans with A* over STRIPS states, then stacks the blocks to match your goal.
Classical symbolic planning, made physical. The world is described in STRIPS style, as facts like 'A is on B' and 'the hand holds C', changed by four operators with preconditions and effects: pick-up, unstack, put-down and stack. A* searches those states with a heuristic that counts blocks not yet 'well placed' (where the goal wants them, on something that is itself well placed), doubled because each must be picked up and put down at least once, so it never overestimates and the plan is as short as possible. The search runs a few expansions per frame and draws its tree as it grows: closed states tinted by their heuristic, the frontier hollow, the winning branch in gold, and its states in a filmstrip. Then the arm executes the plan: each operator becomes gripper waypoints eased with a minimum-jerk profile around the base, a two-link inverse kinematics solve poses the shoulder and elbow every frame, and the scene is drawn back to front with the arm cut into pieces so it sorts correctly against the blocks.
Try it. Drag the top block of any stack in the Goal card to another slot to change the goal; the arm finishes its current step and replans. New goal picks a random target, Scramble table drops the blocks into a new mess, and the speed button cycles 1x, 2x and 4x. Hover the search tree to see any state with its g, h and f. Keys: N new goal, S scramble, 1 to 3 for speed, space to pause.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a blocks world planner with JavaScript and the HTML canvas element: an AI that plans how to restack colored blocks, then a robot arm that carries out the plan. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Represent a state as an array of 4 table slots, each a stack of block letters from bottom to top, plus the block the hand is holding (or none).
- Write the four STRIPS operators as a successors(state) function: pick-up and unstack take a top block into the empty hand, put-down and stack place the held block into an empty slot or onto a clear block.
- Write A* with a binary heap. Use a heuristic that counts blocks that are not well placed (where the goal wants them, on something that is itself well placed), times two, since each needs at least a pick and a put.
- Draw the current state and the goal side by side as flat colored squares with letters, run A* when the page loads, and step through the plan one operator per second, listing the operators as text.
Once that works, make it beautiful:
- Draw the table and blocks in a simple 3D projection (top, front and side faces with different shades), sorted back to front.
- Add a two-link robot arm on a base. Turn each operator into waypoints for the gripper (over the stack, down, grip, up), ease between them, and use two-link inverse kinematics to place the elbow every frame.
- Run A* a few expansions per frame and draw its search tree as it grows, with the final plan's branch highlighted.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as dragging blocks to define a new goal and replanning, comparing A* against breadth-first search by nodes expanded, or a filmstrip of the states along the plan.
