Instantly generate professional Voronoi diagrams and Delaunay triangulations with our free, browser-based tool. Perfect for designers, developers, and data visualization.
AI Generation Prompt
Technical Specification: Browser-Based Geometric Mesh Generator
Overview
A high-performance, single-file web application that generates Voronoi diagrams and Delaunay triangulations in real-time. The tool allows users to seed points on a canvas manually or generate random point sets, instantly visualizing the resulting geometric partitions and meshes.
Core Features
- Interactive Canvas: Click to add points, drag to move points, and watch the mesh update in real-time.
- Dual View Modes: Toggle visibility between Voronoi cells and Delaunay triangulation overlays.
- Point Control: Adjustable density sliders, clear-all functionality, and random distribution seeding.
- Custom Styling: Ability to toggle mesh line colors, point opacity, and line thickness.
- Export Capabilities: Export current designs as PNG or SVG files for professional design use.
- Performance: Optimized rendering loop to handle 500+ nodes fluidly.
User Interface (UI) Specification
- Layout:
- Sidebar: Left-aligned, fixed width, containing control panels for density, toggles for visibility (Voronoi/Delaunay), and export buttons.
- Main Canvas: Responsive viewport occupying the remaining space, using an off-white background (#F8FAFC).
- Top Navigation: Minimalist header with tool title and a link to usage instructions (via a slide-in modal).
- Visual Design:
- Aesthetic: Clean, high-contrast, modern "SaaS" aesthetic.
- Palette: Primary interface uses Slate-800 for text, White for backgrounds, and vibrant Indigo-600/Violet-500 for UI accents (buttons and active states).
- Typography: Sans-serif (system fonts like Inter or System-UI) for legibility.
- Transitions: Micro-interactions (e.g., hover states on buttons) use smooth 200ms cubic-bezier transitions.
Technical Implementation Directives
- Architecture: One single HTML file. CSS must be embedded in
<style>blocks; JS in<script>blocks. - Frameworks: No frameworks. Vanilla JavaScript required for logic. CDN allowed for geometry computation libraries (e.g., standard geometric solvers).
- Constraints:
- NO LOCALSTORAGE: In-memory state only. No user data persistence across sessions.
- NO ALERTS: Use custom CSS-based floating notifications for user feedback.
- LIGHT-MODE ONLY: Strict adherence to light-mode styling (White/Slate themes). No dark-mode toggles allowed.
- SANDBOX: App must function gracefully inside a sandboxed iframe. Ensure all
window.openorpromptcalls are replaced with UI elements.
- Performance: Use
requestAnimationFramefor the render loop to ensure smooth interactions while dragging points.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is a Voronoi diagram and why is it used?
A Voronoi diagram is a partitioning of a plane into regions based on the distance to points in a specific subset of the plane. Each region consists of all points closer to its corresponding seed point than to any other seed point. It is widely used in computational geometry for site analysis, spatial interpolation, and cellular pattern generation. In design and data visualization, Voronoi diagrams serve as a powerful tool to create natural, organic-looking geometric patterns. They are frequently utilized in urban planning to model service areas, in robotics for path planning, and in digital art for creating stylized aesthetic meshes that respond to point distribution.
What is the relationship between Voronoi diagrams and Delaunay triangulation?
Delaunay triangulation is the mathematical dual of the Voronoi diagram. While the Voronoi diagram creates polygons around individual points based on proximity, the Delaunay triangulation connects those points with non-overlapping triangles such that no point is inside the circumcircle of any triangle. This relationship allows the two structures to be generated simultaneously from the same set of input points. These two methods are fundamental in finite element analysis, 3D mesh reconstruction, and terrain modeling. By providing both views in this tool, you can visualize how point sets define complex spatial relationships and derive optimized triangular meshes from random or manually placed coordinate seeds.
How does this tool perform geometry calculations in the browser?
This application utilizes efficient, lightweight computational geometry algorithms running directly within the browser's JavaScript engine. By leveraging high-performance mathematical libraries via CDN, the tool computes thousands of point connections in real-time without needing a backend server or external processing power. All calculations are performed on the client side using HTML5 Canvas rendering. This ensures that your data remains private and that the tool remains lightning-fast, even when handling complex point sets or dense meshes. Because the processing is local, you can manipulate point counts and configurations interactively with near-zero latency.
Can I export my generated mesh designs?
Yes, the tool includes functionality to export your current visualization as high-resolution image files. You can save the generated mesh directly to your local device as a PNG file, which is ideal for use in design projects, presentations, or further processing in vector software. SVG export support is also included for scalable, resolution-independent workflows. To export, simply click the action button in the control panel. The tool will capture the current state of the canvas and trigger a browser download. Since this app runs entirely in the client, no files are stored on a server, ensuring complete privacy for your exported designs and geometric patterns.
Related Applications
Free EDI X12 Syntax Highlighter & Parser Tool
@Akhenaten
Free Online SQL Query Minifier & Code Compressor Tool
@Akhenaten
Free Hardy-Weinberg Equilibrium Allele Frequency Calculator
@Akhenaten
Free Scroll Progress Bar Code Generator - HTML/CSS/JS
@Akhenaten