ditherit — Interactive ASCII & Dot Art
ditherit turns an image, GIF, or video into dithered dots or ASCII and can move those dots with a spring force. Export includes a still, a WebM, or generated code.
Drop your image, video, or GIF
Supports PNG, JPG, WebP, GIF, MP4, WebM, MOV
How to convert images and videos into interactive ASCII & dithered dot art?
ditherit turns an image, GIF, or video into dots or ASCII. Video sampling stops at 90 frames on a canvas whose long side is 600 pixels. Pointer effects are repel, attract, wave, noise, vortex, and breathe. PNG export defaults to 600×600. Background removal is a corner flood fill with tolerance 32. The React snippet imports ditherit-react and does not include the image.
Key Takeaways
- Pointer effects are repel, attract, wave, noise, vortex, and breathe.
- Image dithering runs in a web worker. Algorithms are Floyd-Steinberg, Atkinson, Bayer 8×8, and a hard threshold.
- Video sampling stops at 90 frames. WebM recording uses the 600-pixel canvas.
- React code export copies a snippet that imports ditherit-react. The asset path is a placeholder.
Physics Dot Repulsion
Pointer movement can repel, attract, wave, add noise, vortex, or breathe the dots. Radius and strength are the two controls.
Video & GIF Dithering
A GIF or video is sampled up to 90 frames on a canvas whose long side is 600 pixels. WebM recording uses that canvas.
Export React Component
The React export is a snippet that imports ditherit-react. The image path is a placeholder, and the package is not included in the snippet.
About ditherit Interactive ASCII & Dot Art Studio
ditherit turns an image, GIF, or video into dithered dots or ASCII and can move those dots with a spring force. Export includes a still, a WebM, or generated code.
How to Use
- 1An image, GIF, or video can be opened. Video sampling stops at 90 frames, and the working canvas uses a 600-pixel long side.
- 2The algorithm list is Floyd-Steinberg, Atkinson, ordered Bayer 8×8, or a hard threshold.
- 3Dot size, spacing, contrast, and brightness are controls.
- 4The pointer can repel, attract, wave, add noise, vortex, or breathe the dots.
- 5PNG export uses the width and height fields. The default is 600×600. SVG, WebM, and a React snippet are separate exports.
Key Benefits
- Media is decoded and drawn in the browser. Photos and videos are not uploaded.
- Image dithering runs in a web worker. The page does not measure a frame rate.
- Dot color and background color are hex values. Named palettes such as Game Boy are on the separate dither studio page.
- SVG export uses the same width and height as the PNG. It is not a fixed print size.
Frequently Asked Questions
The page does not ask for payment or add a watermark. The site repository is private, so this page does not grant an MIT license.
Decoding, dithering, physics, and canvas drawing run in the browser. The media is not uploaded.
The algorithm list is Floyd-Steinberg, Atkinson, ordered Bayer 8×8, and a hard threshold. Sobel is used for optional glyph edges, not as its own algorithm. There is no halftone mode and no Bayer 4×4 mode.
Export React Code copies a snippet that imports ditherit-react and sets the image path to /path/to/your/asset. The snippet does not include the pixels or the package.