2.1.100 • Published 4 months ago

@thi.ng/porter-duff v2.1.100

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

porter-duff

npm version npm downloads Twitter Follow

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

About

Porter-Duff operators for packed ints & float-array alpha compositing.

This package provides all 13 fundamental Porter-Duff compositing / blending operators, and utilities to pre/post-multiply alpha. All operators are available for packed ARGB/ABGR 32bit packed ints or RGBA float vectors.

References

Status

STABLE - used in production

Search or submit any issues for this package

Related packages

Installation

yarn add @thi.ng/porter-duff

ES module import:

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

Skypack documentation

For Node.js REPL:

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

> const porterDuff = await import("@thi.ng/porter-duff");

Package sizes (gzipped, pre-treeshake): ESM: 1006 bytes

Dependencies

Usage examples

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

A selection:

ScreenshotDescriptionLive demoSource
Pixel buffer manipulationsDemoSource
Port-Duff image compositing / alpha blendingDemoSource

API

Generated API docs

Basic usage

import * as pd from "@thi.ng/porter-duff";

// packed int version (premultiplied ARGB)
pd.SRC_OVER_I(0x80800000, 0xcc0cc00)

// automatically premultiply inputs & post-multiply result
pd.porterDuffPInt(pd.SRC_OVER_I, 0x80ff0000, 0xcc00ff00);

// the above is same as:
pd.postmultiplyInt(
    pd.SRC_OVER_I(
        pd.premultiplyInt(0x80ff0000),
        pd.premultiplyInt(0xcc00ff00)
    )
)

// premultiplied float version [R,G,B,A]
pd.SRC_OVER_F([1, 0, 0, 0.5], [0, 1, 0, 0.8]);

Operators

Integer operators are suffixed with _I, float versions with _F. Consult above diagram for expected results.

  • CLEAR
  • SRC
  • DEST
  • SRC_OVER
  • DEST_OVER
  • SRC_IN
  • DEST_IN
  • SRC_OUT
  • DEST_OUT
  • SRC_ATOP
  • DEST_ATOP
  • XOR
  • PLUS

Custom operators

New operators (e.g. for blend modes) can be easily defined via porterDuff / porterDuffInt. Both functions take 2 function arguments to extract blend coefficients from the src & dest colors:

// coefficient functions take the normalized alpha values
// of both colors as arguments, but unused here...
const customOp = porterDuffInt(() => -0.5, () => 1);

custom operator

The following coefficient functions are included by default (and are used by all standard operators):

  • ZERO => 0
  • ONE => 1
  • A => alpha of src color
  • B => alpha of dest color
  • ONE_MINUS_A => 1 - alpha of src color
  • ONE_MINUS_B => 1 - alpha of dest color

Additional operators / modifiers

The following modifiers are also discussed in the original Porter-Duff paper (linked above).

  • darken / darkenInt
  • dissolve / dissolveInt
  • opacity / opacityInt

Pre/post-multiplied colors

All Porter-Duff operators expect colors with pre-multiplied alpha. Premultiplication is also recommended for transparent WebGL textures (especially when using mipmaps). For that purpose the following helpers might be useful:

  • premultiply / premultiplyInt
  • postmultiply / postmultiplyInt
  • isPremultiplied / isPremultipliedInt

Furthermore, existing PD operators can be wrapped with automatic pre/post-multiplies using porterDuffP / porterDuffPInt (see example above).

Note: HTML Canvas ImageData is using non-premultiplied colors.

Authors

Karsten Schmidt

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

@misc{thing-porter-duff,
  title = "@thi.ng/porter-duff",
  author = "Karsten Schmidt",
  note = "https://thi.ng/porter-duff",
  year = 2018
}

License

© 2018 - 2021 Karsten Schmidt // Apache Software License 2.0

2.1.100

4 months ago

2.1.99

5 months ago

2.1.98

5 months ago

2.1.96

6 months ago

2.1.97

5 months ago

2.1.95

6 months ago

2.1.94

6 months ago

2.1.93

6 months ago

2.1.92

7 months ago

2.1.91

8 months ago

2.1.90

8 months ago

2.1.89

9 months ago

2.1.87

11 months ago

2.1.88

10 months ago

2.1.85

12 months ago

2.1.86

11 months ago

2.1.83

12 months ago

2.1.84

12 months ago

2.1.81

1 year ago

2.1.82

1 year ago

2.1.80

1 year ago

2.1.79

1 year ago

2.1.78

1 year ago

2.1.77

1 year ago

2.1.76

1 year ago

2.1.75

1 year ago

2.1.74

1 year ago

2.1.73

1 year ago

2.1.72

1 year ago

2.1.71

1 year ago

2.1.70

1 year ago

2.1.69

1 year ago

2.1.67

1 year ago

2.1.68

1 year ago

2.1.66

1 year ago

2.1.65

1 year ago

2.1.64

1 year ago

2.1.63

1 year ago

2.1.59

1 year ago

2.1.61

1 year ago

2.1.62

1 year ago

2.1.60

1 year ago

2.1.58

1 year ago

2.1.57

1 year ago

2.1.56

2 years ago

2.1.55

2 years ago

2.1.54

2 years ago

2.1.53

2 years ago

2.1.52

2 years ago

2.1.51

2 years ago

2.1.38

2 years ago

2.1.39

2 years ago

2.1.36

2 years ago

2.1.37

2 years ago

2.1.35

2 years ago

2.1.49

2 years ago

2.1.47

2 years ago

2.1.48

2 years ago

2.1.45

2 years ago

2.1.46

2 years ago

2.1.43

2 years ago

2.1.44

2 years ago

2.1.41

2 years ago

2.1.42

2 years ago

2.1.40

2 years ago

2.1.50

2 years ago

2.1.34

2 years ago

2.1.33

2 years ago

2.1.32

2 years ago

2.1.31

2 years ago

2.1.28

2 years ago

2.1.29

2 years ago

2.1.30

2 years ago

2.1.27

2 years ago

2.1.25

2 years ago

2.1.26

2 years ago

2.1.24

2 years ago

2.1.23

2 years ago

2.1.21

3 years ago

2.1.22

3 years ago

2.1.20

3 years ago

2.1.16

3 years ago

2.1.17

3 years ago

2.1.14

3 years ago

2.1.15

3 years ago

2.1.18

3 years ago

2.1.19

3 years ago

2.1.12

3 years ago

2.1.13

3 years ago

2.1.11

3 years ago

2.1.9

3 years ago

2.1.10

3 years ago

2.1.8

3 years ago

2.1.6

3 years ago

2.1.7

3 years ago

2.1.5

3 years ago

2.1.4

3 years ago

2.0.8

4 years ago

2.1.2

4 years ago

2.1.1

4 years ago

2.1.3

4 years ago

2.1.0

4 years ago

2.0.7

4 years ago

2.0.4

4 years ago

2.0.6

4 years ago

2.0.3

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

0.1.50

4 years ago

0.1.49

4 years ago

0.1.48

4 years ago

0.1.47

4 years ago

0.1.46

4 years ago

0.1.45

4 years ago

0.1.44

4 years ago

0.1.43

4 years ago

0.1.41

4 years ago

0.1.42

4 years ago

0.1.40

4 years ago

0.1.38

4 years ago

0.1.37

4 years ago

0.1.36

5 years ago

0.1.35

5 years ago

0.1.34

5 years ago

0.1.33

5 years ago

0.1.32

5 years ago

0.1.31

5 years ago

0.1.30

5 years ago

0.1.29

5 years ago

0.1.28

5 years ago

0.1.27

5 years ago

0.1.26

5 years ago

0.1.25

5 years ago

0.1.24

5 years ago

0.1.23

5 years ago

0.1.22

5 years ago

0.1.21

5 years ago

0.1.20

5 years ago

0.1.19

5 years ago

0.1.18

5 years ago

0.1.17

5 years ago

0.1.16

5 years ago

0.1.15

5 years ago

0.1.14

5 years ago

0.1.13

5 years ago

0.1.12

5 years ago

0.1.11

5 years ago

0.1.10

5 years ago

0.1.8

5 years ago

0.1.9

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

6 years ago

0.1.4

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago