Generation Prompt
Page: Image Evolution - Hill Climbing Demo
Slogan: "Recreate images through polygon evolution"
Structure:
- Widget before:title → h1 + p.slogan centered
- Main → section.canvas-pair with two figure.canvas-wrapper
- #target-canvas (200x200) + figcaption "Target"
- #evolved-canvas (200x200) + figcaption "Evolved"
- Widget right:stats → Statistics (generation, similarity, polygons)
- Widget right:controls → Settings (polygon count) + Play/Reset buttons
- Widget after:algorithm → Algorithm explanation
- Widget modal:claude → Documentation
Target image: Generated geometric pattern (circles, rectangles, triangles)
Algorithm loop:
1. Pick random polygon
2. Create mutated copy (color, vertex, or translation)
3. Render test canvas with mutation
4. Calculate fitness (pixel difference from target)
5. Keep mutation if fitness improved
6. Increment generation counter
7. Update stats display
8. Repeat via requestAnimationFrame
Mutation types (random selection):
- 30%: Color channel ±25 or alpha ±0.1
- 40%: Single vertex ±10px
- 30%: Translate all vertices ±10px