Image Blending Algorithm – Part IV

This is the continuation of my series regarding digital image blending algorithms. If you want to read other posts in this series, here is the list just for your convenient:

1. Image Blending Algorithm–Part I
2. Image Blending Algorithm–Part II
3. Image Blending Algorithm–Part III

This post will bring in four more image blending algorithms: Linear Light, Pin Light, Vivid Light, Hard Mix. These blending mode will use the previous introduced blending mode as sub-procedure.

Blending Mode: Linear Light

Code Fragment:

//v1: channel value taken from source image
//v2: channel value taken from destination image
var BLENDING_MACRO = {
    //
    // previous introduced blending modes will be skipped to save page space.
    // ....
    //
    //
    linearlight:  function(v1,v2){
                     return (v1 < 128)
                            ? BLENDING_MACRO.linearburn(v2,(2 * v1))
                            : BLENDING_MACRO.lineardodge(v2,(2 * (v1 - 128)));
                  }
}

Now to apply the Linear Light blending mode to two canvas, we can simply call our generic method using this macro.

blending_canvas(canvas1,canvas2,"linearlight");

Blending Effect Screenshot taken from iPaintPro:

Blending Mode: Pin Light

Code Fragment:

//v1: channel value taken from source image
//v2: channel value taken from destination image
var BLENDING_MACRO = {
    //
    // previous introduced blending modes will be skipped to save page space.
    // ....
    //
    //
    linearlight:  function(v1,v2){
                     return (v1 < 128)
                            ? BLENDING_MACRO.linearburn(v2,(2 * v1))
                            : BLENDING_MACRO.lineardodge(v2,(2 * (v1 - 128)));
                  },
    pinlight:     function(v1,v2){
                     return (v1 < 128)
                            ? BLENDING_MACRO.darken(v2,(2 * v1))
                            : BLENDING_MACRO.lighten(v2,(2 * (v1 - 128)));
                  }
}

Now to apply the Pin Lightblending mode to two canvas, we can simply call our generic method using this macro.

blending_canvas(canvas1,canvas2,"pinlight");

Blending Effect Screenshot taken from iPaintPro:

Blending Mode: Vivid Light

Code Fragment:

//v1: channel value taken from source image
//v2: channel value taken from destination image
var BLENDING_MACRO = {
    //
    // previous introduced blending modes will be skipped to save page space.
    // ....
    //
    //
    linearlight:  function(v1,v2){
                     return (v1 < 128)
                            ? BLENDING_MACRO.linearburn(v2,(2 * v1))
                            : BLENDING_MACRO.lineardodge(v2,(2 * (v1 - 128)));
                  },
    pinlight:     function(v1,v2){
                     return (v1 < 128)
                            ? BLENDING_MACRO.darken(v2,(2 * v1))
                            : BLENDING_MACRO.lighten(v2,(2 * (v1 - 128)));
                  },
    vividlight:   function(v1,v2){
                     return (v1 < 128)
                            ? BLENDING_MACRO.colorburn(v2,(2 * v1))
                            : BLENDING_MACRO.colordodge(v2,(2 * (v1 - 128)));
                  }
}

Now to apply the Vivid Light blending mode to two canvas, we can simply call our generic method using this macro.

blending_canvas(canvas1,canvas2,"vividlight");

Blending Effect Screenshot taken from iPaintPro:

Blending Mode: Hard Mix

Code Fragment:

//v1: channel value taken from source image
//v2: channel value taken from destination image
var BLENDING_MACRO = {
    //
    // previous introduced blending modes will be skipped to save page space.
    // ....
    //
    //
    linearlight:  function(v1,v2){
                     return (v1 < 128)
                            ? BLENDING_MACRO.linearburn(v2,(2 * v1))
                            : BLENDING_MACRO.lineardodge(v2,(2 * (v1 - 128)));
                  },
    pinlight:     function(v1,v2){
                     return (v1 < 128)
                            ? BLENDING_MACRO.darken(v2,(2 * v1))
                            : BLENDING_MACRO.lighten(v2,(2 * (v1 - 128)));
                  },
    vividlight:   function(v1,v2){
                     return (v1 < 128)
                            ? BLENDING_MACRO.colorburn(v2,(2 * v1))
                            : BLENDING_MACRO.colordodge(v2,(2 * (v1 - 128)));
                  },
    hardmix:      function(v1,v2){
                     return (BLENDING_MACRO.vividlight(v1,v2) < 128) ? 0 : 255;
                  }
}

Now to apply the Hard Mix blending mode to two canvas, we can simply call our generic method using this macro.

blending_canvas(canvas1,canvas2,"hardmix");

Blending Effect Screenshot taken from iPaintPro:

So far all the blending modes we have talked all work in RGB color space. However there is another set of blending modes that using HSL color space will be introduced in another post, those are HUE, SATURATION,COLOR and LUMINOSITY