Paints a pixel picture, proves its clues have one answer, then solves it line by line.
The forge paints a small procedural picture (a mushroom, an owl, a whale, a sailboat, a symmetric critter grown by a cellular automaton) and reads the run lengths of every row and column off it as clues. To prove the clues pin the picture down, it runs a line solver: for each line, a dynamic program over blocks placed and cells used finds every placement consistent with what is already known, so cells filled in all of them are filled and cells empty in all of them are crossed, and each change wakes the crossing lines. If line logic stalls it probes a cell for a contradiction, and if that stalls too a backtracking search counts solutions, pinning a printed hint wherever two of them differ before checking again. Then the same solver works the big grid, tightest lines first, drawing the left-packed (blue) and right-packed (orange) blocks whose overlap forces cells. When the last cell falls, the image blooms into a shaded pixel painting over an ordered-dither backdrop.
Try it. Watch, or press Play it (or click the grid) to solve it yourself: left click or drag to fill, right click or shift-drag to cross, and repeat to clear. Hint shows the next line deduction, or outlines any wrong cells first. New picture forges another puzzle and the speed button cycles Slow, Normal and Fast. Keys: N new picture, P play, H hint, arrows for speed.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a nonogram (picture-logic puzzle) generator and solver with JavaScript and the HTML canvas element. 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:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and draws a 15 x 15 grid with room for clue numbers to the left of the rows and above the columns.
- Hard-code a small picture as 15 strings of '#' and '.', and compute each row's and column's clue: the lengths of its runs of filled cells.
- Write a line solver. Given a clue and a line of cells that are unknown, filled or empty, find which cells are filled in every valid placement of the blocks and which are empty in every placement. Brute force over placements is fine to start.
- Keep a grid of unknown cells and a queue of lines. Solve one line per animation step, write in what it proves, and add the crossing lines of any changed cells to the queue. Highlight the line being worked on.
- When the grid is complete, draw the picture.
Once that works, make it beautiful:
- Replace the brute force with a dynamic program over (blocks placed, cells used), run forward and backward, so lines of any length are instant.
- Show the reasoning: draw the blocks packed as far left as possible and as far right as possible, since cells covered by the same block in both are certain.
- Generate pictures procedurally from circles and triangles, give them a palette, and when the puzzle is solved let the colors bloom across the grid from the center.
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 checking that a generated puzzle has exactly one solution with a backtracking search, a play mode with click and drag to fill cells, or a dithered sky behind the finished picture.
