DITHR Tool

DITHR is a web tool on p5.js that allows users to upload and process 3D models (OBJ format), video files (MP4, MOV, WebM) and raster images, by applying rasterization algorithms with various customizable filters and custom gradient maps based on WebGL shaders.

The result can be exported to a PNG graphic file with several resolution settings, and it is also possible to capture and export video to MP4 / WebM format when loading 3D models or video files into the tool.

Moreover, by loading a 3D model into the program, the tool includes the possibility of interactive interaction with the model using a mouse or touchpad, featuring basic light settings, and animation setup of the movement of the object in space.

As always, the program provides a lot of ready-made presets for quick application of rasterization effects, plus you can export and save your own presets as JSON files for easy reuse.

Currently, the program allows you to choose one of the algorithms to process the image:

• ASCII text conversion using various built-in fonts
• Ordered dithering based on several Bayer matrices
• Basic halftone rasterization
• Halftone CMYK printing emulation rasterization
• Predefined patterns with blue noise textures for the void-and-cluster dithering method

If you want to know more about processing images with dithering algorithm, please take a look here:
https://en.wikipedia.org/wiki/Dither ↗
https://momentsingraphics.de/BlueNoise.html ↗
https://en.wikipedia.org/wiki/ASCII_art ↗

Performance and compatibility

The tool accepts raster images in JPG/PNG/WebP formats as source material, and it also support transparency. To import video into the program, please use the following types: MP4, MOV and WebM formats.

• 3D Objects: The tool supports 3D models in OBJ and STL formats. Models are loaded as geometry only: OBJ materials/textures via MTL files are not supported, and colored STL files or STL texture/color data are not preserved. For best performance, use lightweight/low-poly models. Very dense meshes may load slowly, freeze the browser, or fail to render.

• Browser: I recommend running the tool in Chrome browser, this is especially important for processing video files; for image processing I didn't notice a strong difference between Chrome/Firefox/Safari. In case you experience poor performance, try switching to a different browser.

• Video Export: During video export, the process may stop due to insufficient memory, especially with high resolution or long videos. If this happens, try reducing the resolution or length of the video. For large or high-resolution videos, consider exporting as a PNG sequence and later converting it to a video using the FFmpeg library.

• Screen size: A minimum resolution of 800x600 is required.

Please let me know if you're running into any issues or discover a bug while using the program.

Credits

I would like to acknowledge the use of several third-party libraries within this project and express my sincere gratitude to their creators for making these resources available:

• The p5.js ↗ Creative Coding Library, a product of the collective efforts of an incredible team;
• The Tweakpane ↗ interface library, ingeniously developed by Hiroki Kokubun;
• The H264 Encoder ↗ to capture the canvas as MP4 format by Trevor Sundberg;
• Repository contains Blue Noise textures ↗ by Moments in Graphics blog;
• Pixel fonts created by: int10h.org ↗, Damian Vila ↗, UrsaFrank ↗, GGBotNet ↗