This repository contains a small browser demo that implements a weighted variant of Lloyd’s algorithm (stippling) using d3-delaunay and a Web Worker. Points are initialized with rejection sampling and iteratively moved to weighted Voronoi centroids based on image lightness.

Repository structure

stippling-d3-repo/
├── README.md
├── package.json
├── index.html
├── src/
│   ├── main.js
│   └── worker.js
├── assets/
│   └── image.png
└── LICENSE

Stippling (weighted Lloyd) — d3 + Web Worker

This small demo converts an image to a stippled rendering using a weighted Lloyd relaxation (Voronoi centroids weighted by image lightness). A Web Worker performs the heavy computation and streams intermediate point positions back to the main thread so you can watch the relaxation.

What you'll find

• index.html — the demo page and UI
• src/main.js — page logic, canvas rendering and image processing
• src/worker.js — the worker implementing the algorithm (based on the code you provided)
• assets/image.png — add your own image here (or overwrite with obama.png)

Requirements

• A modern browser (Chrome, Firefox, Edge, Safari)
• A static file server (browsers block some worker/importScripts patterns when opened via file://). You can use either of these quick options:
  • npm install then npm start (uses serve) — easiest if you want an npm workflow
  • npx serve (no install) — runs a simple static server
  • python -m http.server 8000 (Python 3)

Quick start

1. Clone the repo:

   git clone <repo-url>
   cd stippling-d3-repo

2. Put a test image in `assets/image.png` (replace the placeholder image). Recommended: small to medium sizes for quick runs (e.g. 800×600).

3. Run a static server from the repository root. Examples:

   ```bash
   # Option A: using npm script
   npm install
   npm start

   # Option B: using npx (no install)
   npx serve . -l 5000

   # Option C: using Python (no Node required)
   python -m http.server 8000
   ```

4. Open the demo in your browser:

   * `http://localhost:5000` (if using `serve` with port 5000)
   * `http://localhost:8000` (if using Python's http.server)

5. Use the UI controls to set the number of points, and press **Start**. The worker will stream points and the canvas will render them as black dots on a white background.

### Notes & debugging

* If the demo renders nothing, open the developer console — network errors (blocked CDN or worker import) will show up there.
* The worker loads `d3-delaunay` from a CDN via `importScripts`. If you need an offline build, replace that import with a locally hosted copy of `d3-delaunay` and update `src/worker.js` accordingly.
* The worker is set up to run a fixed number of iterations (80) and will post intermediate coordinates after each iteration so you see the progressive relaxation.