https://github.com/fidelthomet/dither-dither

web component for image and video dithering
https://github.com/fidelthomet/dither-dither

bluenoise dithering filter image shader video webcomponent

Last synced: about 1 month ago
JSON representation

web component for image and video dithering

• Host: GitHub
• URL: https://github.com/fidelthomet/dither-dither
• Owner: fidelthomet
• License: mit
• Created: 2024-08-22T10:37:45.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-09-14T14:36:21.000Z (2 months ago)
• Last Synced: 2024-10-01T02:41:47.797Z (about 2 months ago)
• Topics: bluenoise, dithering, filter, image, shader, video, webcomponent
• Language: JavaScript
• Homepage: https://fidelthomet.github.io/dither-dither/
• Size: 181 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# dither-dither

[demo](https://fidelthomet.github.io/dither-dither/)

`npm i dither-dither`

`import 'dither-dither'`

``

## What?

This is a web component for monochrome dithering. It works on images and videos. It's based on shaders and should be quite fast. It uses a blue noise threshold map. But you can also specify a custom threshold map.

## Why?

- looks nice

- small media files – in most cases you'll get away with using [images](https://github.com/fidelthomet/dither-dither/blob/main/public/hermannstrasse.jpg) and [videos](https://github.com/fidelthomet/dither-dither/blob/main/public/hermannstrasse.mp4) of atrocious quality

## How?

install the package through npm

```sh

npm i dither-dither

```

import in javascript…

```js

import 'dither-dither'

```

…or directly in your html file

```html

import "dither-dither";

```

use

```html

```

## Development

```sh

npm install

```

### Compile and Hot-Reload for Development

```sh

npm run dev

```

### Compile and Minify Library

```sh

npm run build

```

### Compile and Minify static Page

```sh

npm run build:site

```

### Lint with [ESLint](https://eslint.org/)

```sh

npm run lint

```