Image Blending Algorithm–Part II

This is the continuation of my previous post Image Blending Algorithm–Part I regarding digital image blending algorithms. I will continue to reveal more blending mode algorithms used in Adobe Photoshop and iPaintPro.  In part I, five image blending algorithms have been revealed: Multiply, Screen, Overlay, Hard Light and Soft Light.  This post will introduce another 4 image blending algorithms: Color Dodge, Color Burn, Linear Color Dodge and Linear Color Burn.

Blending Mode: Color Dodge

Code Fragment:

//v1: channel value taken from source image
//v2: channel value taken from destination image
var BLENDING_MACRO = {
    multiply: function(v1,v2){return v1 * v2 / 255;},
    screen  : function(v1,v2){return v1 + v2 – v1 * v2 / 255;},
    overlay : function(v1,v2){
       return (v2 < 128) ? (2 * v1 * v2 / 255):(255 - 2 * (255 - v1) * (255 - v2) / 255);
    },
    softlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }else{
         return v2 - v2 * ((127.5 -  v1) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }
    },
    hardlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5);
      }else{
         return v2 * v1 / 127.5;
      }
    },
    colordodge: function (v1,v2){
      return (v1 === 255) ? v1:Math.min(255, ((v2 << 8 ) / (255 - v1)));
    }
};

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

blending_canvas(canvas1,canvas2,"colordodge");

Blending Effect Screenshot taken from iPaintPro:

Blending Mode: Color Burn

Code Fragment:

//v1: channel value taken from source image
//v2: channel value taken from destination image
var BLENDING_MACRO = {
    multiply: function(v1,v2){return v1 * v2 / 255;},
    screen  : function(v1,v2){return v1 + v2 – v1 * v2 / 255;},
    overlay : function(v1,v2){
       return (v2 < 128) ? (2 * v1 * v2 / 255):(255 - 2 * (255 - v1) * (255 - v2) / 255);
    },
    softlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }else{
         return v2 - v2 * ((127.5 -  v1) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }
    },
    hardlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5);
      }else{
         return v2 * v1 / 127.5;
      }
    },
    colordodge: function (v1,v2){
      return (v1 === 255) ? v1:Math.min(255, ((v2 << 8 ) / (255 - v1)));
    },
    colorburn:function(v1,v2){
      return (v1 === 0) ? v1:Math.max(0, (255 - ((255 - v2) << 8 ) / v1));
    }
};

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

blending_canvas(canvas1,canvas2,"colorburn");

Blending Effect Screenshot taken from iPaintPro:

Blending Mode: Linear Color Dodge

Code Fragment:

//v1: channel value taken from source image
//v2: channel value taken from destination image
var BLENDING_MACRO = {
    multiply: function(v1,v2){return v1 * v2 / 255;},
    screen  : function(v1,v2){return v1 + v2 – v1 * v2 / 255;},
    overlay : function(v1,v2){
       return (v2 < 128) ? (2 * v1 * v2 / 255):(255 - 2 * (255 - v1) * (255 - v2) / 255);
    },
    softlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }else{
         return v2 - v2 * ((127.5 -  v1) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }
    },
    hardlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5);
      }else{
         return v2 * v1 / 127.5;
      }
    },
    colordodge: function (v1,v2){
      return (v1 === 255) ? v1:Math.min(255, ((v2 << 8 ) / (255 - v1)));
    },
    colorburn:function(v1,v2){
      return (v1 === 0) ? v1:Math.max(0, (255 - ((255 - v2) << 8 ) / v1));
    },
    linearcolordodge:function(v1,v2){
      return Math.min(v1 + v2, 255);
    }
};

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

blending_canvas(canvas1,canvas2,"linearcolordodge");

Blending Effect Screenshot taken from iPaintPro:

Blending Mode: Linear Color Burn

Code Fragment:

//v1: channel value taken from source image
//v2: channel value taken from destination image
var BLENDING_MACRO = {
    multiply: function(v1,v2){return v1 * v2 / 255;},
    screen  : function(v1,v2){return v1 + v2 – v1 * v2 / 255;},
    overlay : function(v1,v2){
       return (v2 < 128) ? (2 * v1 * v2 / 255):(255 - 2 * (255 - v1) * (255 - v2) / 255);
    },
    softlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }else{
         return v2 - v2 * ((127.5 -  v1) / 127.5) * (0.5 - Math.abs(v2-127.5)/255);
      }
    },
    hardlight: function (v1,v2){
      if ( v1 > 127.5 ){
         return v2 + (255 - v2) * ((v1 - 127.5) / 127.5);
      }else{
         return v2 * v1 / 127.5;
      }
    },
    colordodge: function (v1,v2){
      return (v1 === 255) ? v1:Math.min(255, ((v2 << 8 ) / (255 - v1)));
    },
    colorburn:function(v1,v2){
      return (v1 === 0) ? v1:Math.max(0, (255 - ((255 - v2) << 8 ) / v1));
    },
    linearcolordodge:function(v1,v2){
      return Math.min(v1 + v2, 255);
    },
    linearcolorburn:function(v1,v2){
      return ((v1 + v2) < 255) ? 0 : (v1 + v2 - 255);
    },
};

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

blending_canvas(canvas1,canvas2,"linearcolorburn");

Blending Effect Screenshot taken from iPaintPro: