Dot / Studio

A browser-based creative tool for applying generative dot/shape effects to images — inspired by halftone and pixel-art aesthetics. Upload any image and transform it into a pattern of squares, circles, diamonds, and more, driven by the image's own density and edge data.

---

Features

Shapes

8 shape types to choose from — Square, Circle, Diamond, Cross, Triangle, Line, Dot, Ring.

Placement modes

• Grid — shapes snap perfectly to a fixed grid, clean and aligned
• Scatter — shapes deviate from the grid with adjustable jitter for an organic feel

Detection modes

• Density — denser/darker image areas attract more shapes, like a halftone
• Edge — Sobel edge detection places shapes along contours and outlines
• Both — combines density and edge signals for maximum coverage

Area masking (brush tool)

Paint directly on the canvas to manually control where shapes appear:

• 🟢 Add zone — forces shapes to appear in painted areas regardless of detection
• 🔴 Remove zone — blocks shapes from appearing in painted areas
• Erase — removes painted mask zones

Style controls

• Independent colour pickers for filled and outline shapes
• Single unified shape size (consistent across all shapes)
• Opacity, stroke weight, mix filled + outline toggle
• Invert colours and invert detection
• 12 blend modes (Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion)

Canvas navigation

• Scroll to zoom, pinch on trackpad/touchscreen to zoom
• Drag to pan in View mode
• Zoom in/out buttons + Fit to view
• Keyboard shortcuts: V view, A add, R remove, E erase, +/- zoom, 0 fit

Export

• PNG — full source resolution
• JPEG — full source resolution, 95% quality
• SVG — true vector, every shape as a <rect> / <circle> / <polygon> with blend mode preserved

---

Usage

1. Open index.html in any modern browser — no install, no dependencies, no server needed
2. Drop or upload an image (JPG, PNG, WEBP)
3. Adjust the controls in the sidebar — preview updates live
4. Optionally paint add/remove zones with the brush tools
5. Export as PNG, JPEG, or SVG

---

Keyboard Shortcuts

Key	Action
V	View / Pan tool
A	Add zone brush
R	Remove zone brush
E	Erase brush
+ / =	Zoom in
-	Zoom out
0	Fit to view

---

Tech

Pure vanilla HTML, CSS, and JavaScript — no frameworks, no build step, no dependencies.

• Canvas 2D API for rendering and mask painting
• Sobel operator for edge detection
• Luminance sampling for density mapping
• Deterministic cell hashing for stable scatter placement

---

License

MIT — free to use, modify, and distribute.