Anyflage
English | 日本語
A graphics tool that warps photos and objects and squeezes one into every blob of a camouflage pattern. From a distance it reads as camouflage; up close you see faces, people and cats.
https://ubiquitous-o.github.io/Anyflage/
How to use
- Choose image sets — "sample" is built in: 40 portraits that museums publish under CC0. Add your own images with "Add your own images". Background removal can keep the face only, the face and hair, the whole person, or an object
- Choose camouflage — approximations of military and hunting patterns, and patterns traced from real swatches. Set the blob size and colours. You can make your own colour sets
- Adjust the squeeze — ten fitting methods and the strength of seam carving. Methods and patterns can be compared side by side
- Export — pick a ratio or pixel size and save a PNG. There are sizes for Instagram and X, and a tileable image whose edges join on all four sides
The browser remembers the images you add and your settings. Background removal also runs in the browser. Images are never sent anywhere.
The interface is in Japanese and English. ⌘Z undoes. Hold B to see the image from before the last redraw.
Run it
npm install
npm run dev
npm run build writes to dist/. Pushing to main deploys to Pages through GitHub Actionsnpm run typecheck checks typesnpm run parity checks that the prototype engine and the TypeScript engine produce identical pixels. It only runs when the prototype (prototype/) and samples/ exist locally. Neither is in the repositorynpm run samples collects test images from public datasets into samples/. Their redistribution is restricted, so they are not committed
What's inside
src/engine/ — the engine. Builds the camouflage and squeezes images into the blobssrc/main.ts — the screen. Settings appear in the URL querysrc/cutout.ts, public/models/ — background removal. MediaPipe selfie segmentation and the small U²-Net (both Apache 2.0)src/i18n.ts — the English textpublic/swatches/ — patterns traced from real swatch images. Sources and licences are in public/swatches/index.jsonpublic/sets/sample/ — the sample set. CC0 portraits from the Art Institute of Chicago and The Metropolitan Museum of Art, cut out to the face and hair. Sources are in public/sets/sample.jsonscripts/collect-museum.ts, precut.html — tools for rebuilding the sample set. To cut out, start with ANYFLAGE_PRECUT=1 npm run dev and open /precut.html
