Image Blending Algorithm–Part II » Online painting applications (original) (raw)

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_colordodge

iPaintPro Image Blending: Color Dodge

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_colorburn

iPaintPro Image Blending: Color Burn

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_linearcolordodge

iPaintPro Image Blending: Linear Color Dodge

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:

blending_linearcolorburn

iPaintPro Image Blending: Linear Color Burn

To be continued…