Technical Specification: Voronoi Stained Glass Pattern Generator

Overview

A high-performance, single-file browser application that allows users to generate, edit, and export Voronoi diagrams tailored for stained glass art. The app uses the Delaunay triangulation algorithm (via Voronoi calculation) to create intricate polygon mosaics.

Core Features

• Interactive Canvas: Click to add points, drag to move points, and watch the Voronoi pattern update in real-time.
• Customizable Solder Lines: Adjust the stroke width and color of the Voronoi edges to simulate different solder/came thickness.
• Color Palette Studio: Assign random or custom colors to individual cells or regions.
• SVG Export Engine: One-click download of the current pattern as a clean, production-ready SVG file.
• Responsive Controls: Sidebar-based control panel that collapses on mobile devices, ensuring the drawing canvas takes priority.
• Randomization: One-click "Scatter" function to create organic, non-uniform distributions of points.

UI/UX Design

• Aesthetic: A premium, light-themed SaaS look. Crisp, high-contrast, professional sans-serif typography (e.g., Inter or System-UI).
• Layout:
  • Top Navigation: Title and primary action buttons (Export, Clear, Reset).
  • Main Area: A centered, full-viewport responsive <canvas> element surrounded by a drop-shadow container.
  • Sidebar: Floating control panel with sliders for point count, gap thickness, and color preset selectors.
• Animations: Subtle CSS transitions on buttons (hover states) and smooth fade-ins when elements are generated or deleted.

Color Palette (Light Mode)

• Background: #F9FAFB (Soft light grey)
• Primary Surface: #FFFFFF (Pure white)
• Accent Color: #3B82F6 (Vibrant electric blue)
• Text: #1F2937 (Dark slate)
• Border/Dividers: #E5E7EB (Subtle grey)

Technical Implementation Directives

• Architecture: All logic contained within a single index.html. CSS and JS will be embedded in <style> and <script> tags.
• State Management: All application state (points array, settings) must be stored in standard JavaScript objects. Strictly NO use of localStorage, sessionStorage, or cookies due to sandboxed environment requirements.
• Dependencies: Use a CDN-linked lightweight Voronoi calculation library (e.g., d3-delaunay or a standalone Voronoi.js script).
• Performance: Ensure the requestAnimationFrame loop is efficient to prevent lag when users drag points on large point sets.
• Compatibility: Application must handle window resizing events to re-center or adjust the canvas coordinate system dynamically.
• Security: Ensure all external resources are loaded via HTTPS. No eval() or dynamic script injection.
• Interaction: Custom modals for "How to use" or "Export Options" to avoid the use of blocked alert() or prompt() methods.