Blend - brianchirls/Seriously.js GitHub Wiki

seriously.blend.js

The blend effect composes one layer on top of each other, using one of a number of "blend modes" similar to most of those available in image editing software like Photoshop.

Parameters

• bottom (image) - bottom image
• top (image) - top image
• opacity (number) - Multiplies the alpha value to create additional transparency on the top layer image.
  • min: 0
  • max: 1
  • default: 1
• sizeMode (enum) - determines how the height and width of the node are computed
  • options:
    • 'bottom': match the height and width of the bottom layer
    • 'top': match the height and width of the top layer
    • 'union': pick the larger of each height and width
    • 'intersection': pick the smaller of each height and width
  • default: bottom
• mode (enum) - blend mode, how the pixel values of the two layers are combined
  • options:
    • 'normal': Normal
    • 'lighten': Lighten
    • 'darken': Darken
    • 'multiply': Multiply
    • 'average': Average
    • 'add': Add
    • 'subtract': Subtract
    • 'divide': Divide
    • 'difference': Difference
    • 'negation': Negation
    • 'exclusion': Exclusion
    • 'screen': Screen
    • 'overlay': Overlay
    • 'softlight': Soft Light
    • 'hardlight': Hard Light
    • 'colordodge': Color Dodge
    • 'colorburn': Color Burn
    • 'lineardodge': Linear Dodge
    • 'linearburn': Linear Burn
    • 'linearlight': Linear Light
    • 'vividlight': Vivid Light
    • 'pinlight': Pin Light
    • 'hardmix': Hard Mix
    • 'reflect': Reflect
    • 'glow': Glow
    • 'phoenix': Phoenix
    • 'hue': Hue
    • 'saturation': Saturation
    • 'color': color
    • 'luminosity': Luminosity
    • 'darkercolor': Darker Color
    • 'lightercolor': Lighter Color
  • default: normal

Credits and License

Shader by Brian Chirls, heavily adapted from from blend mode shader by Romain Dura.

Released under MIT License along with Seriously.js