Free Interactive Voronoi Diagram Generator & Fortune's Algorithm Visualizer

Overview

A high-performance, browser-based interactive simulator that allows users to visualize Fortune's Algorithm in real-time. This tool bridges the gap between theoretical computational geometry and practical understanding by animating the sweep line and beach line construction.

Core Features

• Interactive Canvas: Users can click to place arbitrary points (sites) on a 2D plane.
• Real-time Visualization: Smooth animation of the sweep line moving across the plane.
• Beach Line Rendering: Dynamic drawing of the parabolic arcs that form the beach line.
• Playback Controls: Play, pause, step-forward, step-backward, and reset buttons.
• Simulation Speed Control: Slider to adjust the velocity of the sweep line.
• Layer Toggle: Independently toggle the visibility of the sweep line, beach line, site points, and final Voronoi edges.
• Export Functionality: Capability to export the final diagram as a static SVG or high-resolution PNG image.

UI/UX Layout

• Header: Minimalistic navigation showing the tool name and a brief instruction tooltip.
• Main Content Area: A large, responsive centered canvas taking up 80% of the viewport width.
• Control Sidebar (Floating): A sleek panel positioned on the right or bottom (depending on device), housing playback buttons, speed slider, and layer visibility checkboxes.
• Info Overlay: A non-intrusive 'Help' icon that displays shortcuts (e.g., 'Space' to Play/Pause).

Visual Design (Light Mode Only)

• Background: Clean #FFFFFF with subtle grid lines (#F0F0F0) to help gauge spatial distribution.
• Elements:
  • Sites: Deep blue circles (#2563EB).
  • Sweep Line: Vibrant red horizontal dashed line (#DC2626).
  • Beach Line: Crisp orange paths (#EA580C).
  • Voronoi Edges: Sharp, dark grey lines (#374151).
• Typography: Sans-serif, human-readable fonts (e.g., Inter or system UI stacks).
• Animations: CSS transitions for UI elements; requestAnimationFrame for the canvas rendering loop.

Technical Constraints & Directives

• Single File: All HTML, CSS, and JS must be embedded in one .html file. CSS in <style>, JS in <script>.
• In-Memory Only: NO localStorage, sessionStorage, cookies, or IndexedDB. State must be handled entirely in JavaScript objects/arrays.
• Browser-Based: Use HTML5 Canvas API for high-performance rendering of the geometric entities.
• Responsive: Ensure the canvas resizes without clearing the existing points or breaking the simulation logic.
• No Dependencies: Use vanilla JavaScript for the algorithm implementation. No heavy frameworks like React or Vue.
• Clean Code: Use descriptive variable names and modular functions for the algorithm steps (e.g., handleSiteEvent(), handleCircleEvent(), updateBeachLine()).
• Iframe Safe: Avoid any calls that trigger popups or external navigation. All modals must be custom <div> overlays.