https://github.com/rmarchet/web-dither
A web tool to dither an image
https://github.com/rmarchet/web-dither
dithering dithering-algorithms filters glitch glitch-art modulation react typescript
Last synced: about 1 month ago
JSON representation
A web tool to dither an image
- Host: GitHub
- URL: https://github.com/rmarchet/web-dither
- Owner: rmarchet
- License: apache-2.0
- Created: 2025-04-14T19:32:36.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-26T07:22:06.000Z (11 months ago)
- Last Synced: 2025-10-29T23:51:07.633Z (6 months ago)
- Topics: dithering, dithering-algorithms, filters, glitch, glitch-art, modulation, react, typescript
- Language: TypeScript
- Homepage: https://rmarchet.github.io/web-dither/
- Size: 650 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# D!TR - Image Dithering
A web application that allows you to upload images and apply a variety of dithering and analog modulation effects.
## Features
- Image upload with preview
- Real-time dithering, glitch and analog modulation effect application
- Modern, responsive UI
- **FM-based analog glitch effects:**
- **Modulated Diffuse Y**: Frequency modulation/demodulation along the Y axis (horizontal scanlines)
- **Modulated Diffuse X**: Frequency modulation/demodulation along the X axis (vertical scanlines)
- Interactive controls for:
- Amplitude
- Frequency
- Phase
- Noise (glitch intensity)
- Classic dithering algorithms (Floyd-Steinberg, Bayer, Atkinson, etc.)
- Invert, scale, blur, and other image adjustments
## Prerequisites
- Node.js 20 or later
- npm (comes with Node.js) or yarn (recommended)
## Installation
1. Clone the repository:
```bash
git clone https://github.com/rmarchet/web-dither.git
cd web-dither
```
2. Install dependencies:
```bash
yarn install
```
## Development
To start the development server:
```bash
yarn start
```
This will start the development server at `http://localhost:3000`.
## Building for Production
To create a production build:
```bash
yarn build
```
The built files will be in the `dist` directory.
## How to Use
1. Click the "Load Image" button to select an image from your computer
2. The application will display a grayscale version of the image with no filters applied
3. Select a dithering or modulation style from the dropdown on the right
4. For **Modulated Diffuse Y** or **Modulated Diffuse X**, use the dedicated sliders to control amplitude, frequency, phase, block size, noise, and line spacing for analog/CRT/glitch effects
5. The effect is applied automatically and updates in real time
## Technologies Used
- React 18
- TypeScript
- Rollup (bundler)
- CSS Modules