How DOT‑O‑MATIC Works

DOT‑O‑MATIC uses a sophisticated multi-stage algorithm to convert images into precise SVG stipple art. All processing happens entirely in your web browser, ensuring privacy and speed. Here's a detailed breakdown of the process:

Stage 1: Image Loading & Analysis

When you upload an image, DOT‑O‑MATIC loads it into a hidden HTML5 canvas element. The image is analyzed pixel-by-pixel to extract:

• Brightness Values: Each pixel's luminance is calculated using the standard formula: L = 0.2126×R + 0.7152×G + 0.0722×B
• Transparency Detection: Pixels with alpha values below 50% opacity are marked as transparent and excluded from dot placement
• Color Information: RGB values are preserved for source color mode or converted to grayscale for brightness-based coloring

The image data is stored in memory as a raw pixel array for fast random access during dot placement.

Stage 2: Dot Placement

Dots are placed using one of two strategies:

Random Placement (Default)

The algorithm generates random pixel coordinates across the image. For each candidate position:

• The pixel's darkness value (inverted brightness) is calculated
• A probability threshold is computed: P = darkness + (boost × 0.25)
• A random number determines if the dot is accepted based on this probability
• Darker areas have higher acceptance probability, resulting in more dots in dark regions

Grid Placement (Optional)

When "Align to grid" is enabled, the algorithm:

• Creates a regular grid based on the specified spacing
• Shuffles grid positions using a seeded random number generator
• Evaluates each grid cell using the same probability-based acceptance
• Results in uniform, structured dot patterns while still respecting image darkness

Stage 3: Collision Detection & Overlap Prevention

When "Prevent dot overlap" is enabled, DOT‑O‑MATIC uses a spatial grid optimization system:

• A 2D grid divides the image into cells (typically 10-20 pixels per cell)
• Each accepted dot is stored in its corresponding grid cell
• Before placing a new dot, the algorithm checks neighboring cells for existing dots
• Dot radius is calculated based on darkness: R = (minSize + range × darkness^gamma) / 2
• Collision is detected if the new dot's radius + padding would overlap any existing dot
• Only non-overlapping dots are kept, ensuring clean, professional results

Stage 4: Voronoi Optimization (Lloyd Relaxation)

The optional Voronoi optimization improves dot distribution using Lloyd's algorithm:

• Voronoi Diagram: The image is partitioned into Voronoi cells, where each cell contains all points closest to a specific dot
• Centroid Calculation: For each Voronoi cell, the algorithm finds the "center of mass" weighted by the image darkness
• Dot Relocation: Each dot is moved toward its cell's weighted centroid
• Iteration: This process repeats for the specified number of iterations (typically 5-20)
• Result: Dots spread more evenly while still clustering in darker image regions

More iterations produce smoother distribution but require more processing time. The algorithm samples the image at regular intervals (controlled by "Cell sample step") to balance accuracy and performance.

Stage 5: Dot Sizing & Color Assignment

Each dot's final size and color are determined:

• Size: R = (minSize + range × darkness^gamma) × unitScale / 2
• Gamma Correction: The gamma value (0.25 to 4.0) adjusts the size distribution curve. Lower gamma increases contrast; higher gamma creates smoother transitions
• Color Modes:
  • Single Color: All dots use the user-selected color
  • Source Image Colors: Each dot samples the RGB value at its position
  • Grayscale from Brightness: Converts pixel RGB to grayscale based on luminance

Stage 6: SVG Generation

The final SVG file is generated with precise unit scaling:

• Each dot is converted to an SVG shape (circle, square, triangle, or star)
• Coordinates and sizes are scaled from pixels to the selected output units (inches or millimeters)
• The SVG viewBox and dimensions are set to match your specified canvas size
• Colors are applied as fill attributes or CSS (depending on color mode)
• The output is valid, scalable SVG that can be edited in Illustrator, Inkscape, or any vector editor

Performance Optimizations

DOT‑O‑MATIC uses several techniques to ensure fast processing:

• Spatial Hashing: O(1) collision detection using grid cells
• Efficient Sampling: Configurable sampling step reduces Voronoi computation time
• Progressive Rendering: Preview canvas updates in real-time during processing
• Async Processing: Non-blocking algorithms allow UI to remain responsive
• Seeded Random: Deterministic random number generator for reproducible results

Key Parameters Explained

Min Dot Size:

The smallest dot size (used in brightest image areas)

Dot Size Range:

Additional size added in darker areas (max size = min + range)

Gamma:

Controls the size distribution curve. Lower = more contrast, higher = smoother

Placement Boost:

Adds a flat probability increase (0-1) to all dot placement attempts

Padding:

Additional space between dots as a percentage of dot radius

Iterations (Voronoi):

Number of Lloyd relaxation iterations (more = smoother, slower)

Browser Compatibility

DOT‑O‑MATIC requires modern browser features including:

• HTML5 Canvas API for image processing
• JavaScript ES6+ features (arrow functions, destructuring, async/await)
• Blob API for file download
• Web Workers support (for future optimization)

Works best in Chrome, Firefox, Safari, and Edge (latest versions).