facet

A tool for making abstract art by partitioning an image into facets and transforming each one independently.

You define geometric curves — lines, circles, ellipses, parabolas, segments, circular sectors — on a rectangular field, or pick a tessellation preset (grid, triangular, hexagonal, Voronoi). The regions carved out by the intersections of those curves are the facets; the whole set is the facet field. Each facet is assigned an image transform (gaussian blur, median filter, pixelate, posterize, mean-color fill…). Placing the field over a source image applies each facet's transform to the pixels under it, producing an image you can export as PNG.

Fields can be built on an empty canvas or using a guide image, and are quick to create and edit. Built as a static site with a vanilla-JS editor and a C++/WASM render core — the same stack as its sibling project lattice-dsp.

Try it live

facet is hosted on GitHub Pages — no install needed: 👉 https://kenneide.github.io/facet/facet/public/

The site is automatically built and deployed on every push to main via GitHub Actions.

How it works

• Facet field — a set of geometric curves (or a tessellation preset) over a rectangular domain. Everything reduces to a per-pixel label map: each pixel is tagged with the facet it belongs to.
• Curves partition the plane by the sign of their implicit function f(x, y). Each pixel's facet id is the tuple of signs of every curve; only the sign-combinations that actually occur become facets.
• Transforms are applied per facet, masked to that facet's region so edges stay crisp. The editor previews in pure JS at low resolution; the full-quality render runs in WASM.

Prerequisites

• Editor only (create/edit/preview fields): just Python 3 for the dev server, and a modern browser. No build step.
• Full-res WASM render / export: the Emscripten SDK (emsdk), pinned to 3.1.61, and CMake ≥ 3.15.

Build & Run

Editor (no build required)

./launch_facet.sh          # macOS/Linux — serves web/ and opens the browser
launch_facet.bat           # Windows

Then open http://localhost:5051/facet/public/.

Full-res WASM render

Build the WASM module once, then reload the editor:

source ~/code/emsdk/emsdk_env.sh
emcmake cmake -S web/facet -B web/facet/build
cmake --build web/facet/build

The build emits web/facet/public/facet_wasm.js and .wasm (both gitignored; regenerated in CI). With them present, the editor's Render (full-res) and Export PNG actions become available.

VSCode

Use the tasks facet: Configure, facet: Build WASM, and facet: Serve.

Layout

web/
├── dev_server.py          # no-cache dev server (local only, not deployed)
├── lib/nlohmann/          # vendored header-only JSON
├── engine/                # shared image-compute framework (C++)
└── facet/
    ├── CMakeLists.txt      # Emscripten build
    ├── *.h / *.cpp         # C++ render core
    └── public/             # the static site: HTML, CSS, ES6 modules