1.1.160 • Published 4 months ago

@thi.ng/pixel-dither v1.1.160

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
4 months ago

pixel-dither

npm version npm downloads Twitter Follow

This project is part of the @thi.ng/umbrella monorepo.

About

screenshot

Extensible image dithering w/ various algorithm presets. This is a support package for @thi.ng/pixel.

The package provides the following dithering algorithm presets (can also be very easily extended via definition of custom kernels):

  • Atkinson
  • Bayes (ordered dithering w/ customizable sizes & levels)
  • Burkes
  • Diffusion (1D row/column, 2D)
  • Floyd-Steinberg
  • Jarvis-Judice-Ninke
  • Sierra 2-row
  • Stucki
  • Threshold

Status

STABLE - used in production

Search or submit any issues for this package

Installation

yarn add @thi.ng/pixel-dither

ES module import:

<script type="module" src="https://cdn.skypack.dev/@thi.ng/pixel-dither"></script>

Skypack documentation

For Node.js REPL:

# with flag only for < v16
node --experimental-repl-await

> const pixelDither = await import("@thi.ng/pixel-dither");

Package sizes (gzipped, pre-treeshake): ESM: 1.07 KB

Dependencies

Usage examples

Several demos in this repo's /examples directory are using this package.

A selection:

ScreenshotDescriptionLive demoSource
Showcase of various dithering algorithmsDemoSource
Image dithering and remapping using indexed palettesDemoSource

API

Generated API docs

import { intBufferFromImage, GRAY8 } from "@thi.ng/pixel";
import { ditherWith, ATKINSON } from "@thi.ng/pixel-dither";

const img = intBufferFromImage("foo.jpg");

// apply dithering to all channels in given pixel buffer
ditherWith(ATKINSON, img);

// first convert to 8-bit gray before dithering
ditherWith(ATKINSON, img.as(GRAY8));

// ...or apply dithering to select channels only
// use custom threshold & error spillage/bleed factor
ditherWith(ATKINSON, img, { channels: [1, 2, 3], threshold: 0.66, bleed: 0.75 });

Custom dither kernels

All bundled algorithm presets (apart from orderedDither()) are implemented as DitherKernel configurations for, defining how each dithered pixel's error should be diffused/distributed to neighbors. This approach makes it very easy to define custom dither configs, like so:

const CUSTOM: DitherKernel = {
    // X offsets of neighbor pixels to update
    ox: [1],
    // Y offsets of neighbor pixels to update
    oy: [1],
    // error weights for updated pixels
    weights: [1],
    // bit shift (scale factor)
    shift: 1,
};

ditherWith(CUSTOM, img);

The above config will distribute the error to a single pixel @ offset (1,1). However the error will be bit-shifted by 1 bit to the right (aka division-by-2). In code form:

pixels[i + ox + oy * width] += (err * weight) >> shift;

Important: Ensure the offset positions only refer to still unprocessed pixels, i.e. those to the right and/or below the currently processed pixel (in following rows).

You can see the result of this kernel in the pixel-dither demo.

Authors

Karsten Schmidt

If this project contributes to an academic publication, please cite it as:

@misc{thing-pixel-dither,
  title = "@thi.ng/pixel-dither",
  author = "Karsten Schmidt",
  note = "https://thi.ng/pixel-dither",
  year = 2021
}

License

© 2021 Karsten Schmidt // Apache Software License 2.0

1.1.160

4 months ago

1.1.159

4 months ago

1.1.158

4 months ago

1.1.157

4 months ago

1.1.155

5 months ago

1.1.154

5 months ago

1.1.156

5 months ago

1.1.153

5 months ago

1.1.152

6 months ago

1.1.151

6 months ago

1.1.150

6 months ago

1.1.149

7 months ago

1.1.148

7 months ago

1.1.147

8 months ago

1.1.144

9 months ago

1.1.143

10 months ago

1.1.142

11 months ago

1.1.141

11 months ago

1.1.140

11 months ago

1.1.146

9 months ago

1.1.145

9 months ago

1.1.133

12 months ago

1.1.132

1 year ago

1.1.131

1 year ago

1.1.139

11 months ago

1.1.138

11 months ago

1.1.137

11 months ago

1.1.136

11 months ago

1.1.135

12 months ago

1.1.134

12 months ago

1.1.130

1 year ago

1.1.129

1 year ago

1.1.128

1 year ago

1.1.127

1 year ago

1.1.126

1 year ago

1.1.125

1 year ago

1.1.124

1 year ago

1.1.123

1 year ago

1.1.122

1 year ago

1.1.121

1 year ago

1.1.120

1 year ago

1.1.119

1 year ago

1.1.118

1 year ago

1.1.117

1 year ago

1.1.116

1 year ago

1.1.115

1 year ago

1.1.114

1 year ago

1.1.113

1 year ago

1.1.112

1 year ago

1.1.111

1 year ago

1.1.108

1 year ago

1.1.109

1 year ago

1.1.110

1 year ago

1.1.107

1 year ago

1.1.106

1 year ago

1.1.105

1 year ago

1.1.104

1 year ago

1.1.103

1 year ago

1.1.100

1 year ago

1.1.102

1 year ago

1.1.101

1 year ago

1.1.98

1 year ago

1.1.97

1 year ago

1.1.96

1 year ago

1.1.95

2 years ago

1.1.92

2 years ago

1.1.94

2 years ago

1.1.93

2 years ago

1.1.91

2 years ago

1.1.90

2 years ago

1.1.89

2 years ago

1.1.70

2 years ago

1.1.74

2 years ago

1.1.73

2 years ago

1.1.72

2 years ago

1.1.71

2 years ago

1.1.78

2 years ago

1.1.77

2 years ago

1.1.76

2 years ago

1.1.75

2 years ago

1.1.79

2 years ago

1.1.81

2 years ago

1.1.80

2 years ago

1.1.85

2 years ago

1.1.83

2 years ago

1.1.82

2 years ago

1.1.88

2 years ago

1.1.87

2 years ago

1.1.86

2 years ago

1.1.59

2 years ago

1.1.63

2 years ago

1.1.62

2 years ago

1.1.60

2 years ago

1.1.67

2 years ago

1.1.66

2 years ago

1.1.65

2 years ago

1.1.64

2 years ago

1.1.69

2 years ago

1.1.68

2 years ago

1.1.56

2 years ago

1.1.58

2 years ago

1.1.57

2 years ago

1.1.55

2 years ago

1.1.54

2 years ago

1.1.52

2 years ago

1.1.53

2 years ago

1.1.49

2 years ago

1.1.48

2 years ago

1.1.47

2 years ago

1.1.46

2 years ago

1.1.51

2 years ago

1.1.50

2 years ago

1.1.45

2 years ago

1.1.44

2 years ago

1.1.43

2 years ago

1.1.40

2 years ago

1.1.42

2 years ago

1.1.38

3 years ago

1.1.37

3 years ago

1.1.36

3 years ago

1.1.35

3 years ago

1.1.39

2 years ago

1.1.29

3 years ago

1.1.28

3 years ago

1.1.30

3 years ago

1.1.34

3 years ago

1.1.33

3 years ago

1.1.32

3 years ago

1.1.31

3 years ago

1.1.27

3 years ago

1.1.26

3 years ago

1.1.25

3 years ago

1.1.23

3 years ago

1.1.24

3 years ago

1.1.22

3 years ago

1.1.16

3 years ago

1.1.15

3 years ago

1.1.19

3 years ago

1.1.18

3 years ago

1.1.17

3 years ago

1.1.21

3 years ago

1.1.20

3 years ago

1.1.12

3 years ago

1.1.11

3 years ago

1.1.10

3 years ago

1.1.14

3 years ago

1.1.13

3 years ago

1.1.9

3 years ago

1.1.8

3 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.1.7

4 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

0.1.0

4 years ago