Dithermate
A laboratory of images, pixels and textures. Inside the browser.
Dithering is a way of forming tones and shadows using few pixels and few colours. In Dithermate, that limitation becomes raw material: you open an image, try an algorithm, and watch another visual language appear.
It's a space to experiment with images, pixel art and textures without leaving the browser. The controls and the result sit together, and the processing happens on your own computer.
Stack and implementation
Next.js · React · TypeScript · Tailwind CSS · Canvas API · Web Workers · MediaPipe
The dithering engine processes images in the browser, using Canvas and Web Workers to keep the controls responsive while you adjust them. MediaPipe handles face detection and automatic cropping. The same algorithms feed the image editor, the pixel art editor and the texture lab.
From a photo to another language
Different algorithms distribute pixels in different ways. You can compare results, swap the palette and adjust brightness, contrast and scale until you find the effect. Then the image can leave as PNG or SVG.
Textures with no starting image
Here the image is born from shapes calculated pixel by pixel. Spheres, waves, noise and other fields pass through the same dithering engine. The adjustments can also become motion, and the result can be exported as an image, an animation or code.
Pixels that stay editable
In the pixel art editor, an image can become a layer in the colours of the chosen palette. From there, brush, eraser, fill and layers let you keep working pixel by pixel.