Skip to content

Instantly share code, notes, and snippets.

@gregkepler
Created January 8, 2016 17:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gregkepler/803b03e04c396132b808 to your computer and use it in GitHub Desktop.
Save gregkepler/803b03e04c396132b808 to your computer and use it in GitHub Desktop.
Map image luminance value between 2 colors
// glsl fragment shader sample
// can be seen at https://www.shadertoy.com/view/MscGD2
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = fragCoord.xy / iResolution.xy;
vec3 color1 = vec3(90.0/255.0, 170.0/255.0, 251.0/255.0); // light color blue
vec3 color2 = vec3(5.0/255.0, 57.0/255.0, 109.0/255.0); // dark color blue
//vec3 color1 = vec3(247.0/255.0, 238.0/255.0, 87.0/255.0); // light color yellow
//vec3 color2 = vec3(182.0/255.0, 14.0/255.0, 77.0/255.0); // dark color dark red
vec3 texColor = texture2D(iChannel0, uv).xyz; // texture pixel color
// Replaces the color with a mix of the light and dark color based on the luminance of the original pixel color
// luminance value
// https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Shaders/Builtin/Functions/luminance.glsl
const vec3 W = vec3(0.2125, 0.7154, 0.0721);
float luminance = 1.0 - dot(texColor, W);
vec3 lumColor = mix(color1, color2, luminance);
vec3 newColor = lumColor;
fragColor = vec4(newColor,1.0);
}
// example for as3, which is similar to early android
import flash.display.MovieClip;
// standard luminance values
var lumR:Number = 0.2125;
var lumG:Number = 0.7154;
var lumB:Number = 0.0721;
//var lumR:Number = 0.3086;
//var lumG:Number = 0.6094;
//var lumB:Number = 0.0820;
var color1:Array = [90.0/255.0, 170.0/255.0, 251.0/255.0];
var color2:Array = [5.0/255.0, 57.0/255.0, 109.0/255.0];
//var color1:Array = [247.0/255.0, 238.0/255.0, 87.0/255.0];
//var color2:Array = [182.0/255.0, 14.0/255.0, 77.0/255.0];
// get difference of colors
var rDif = color1[0] - color2[0];
var gDif = color1[1] - color2[1];
var bDif = color1[2] - color2[2];
// movieclip on stage named "pic"
var pic:MovieClip = getChildByName("pic") as MovieClip;
// converts image to grayscale based on luminance value
var lumMat:Array = new Array();
lumMat=lumMat.concat([lumR, lumG, lumB, 0, 0]);
lumMat=lumMat.concat([lumR, lumG, lumB, 0, 0]);
lumMat=lumMat.concat([lumR, lumG, lumB, 0, 0]);
lumMat=lumMat.concat([0, 0, 0, 1, 0]);
// matrix to multiply value diff by color diff
var colorMat:Array = new Array();
colorMat=colorMat.concat([rDif, 0, 0, 0, color2[0] * 255 ]);
colorMat=colorMat.concat([0, gDif, 0, 0, color2[1] * 255 ]);
colorMat=colorMat.concat([0, 0, bDif, 0, color2[2] * 255 ]);
colorMat=colorMat.concat([0, 0, 0, 1, 0]);
var lum = new ColorMatrixFilter(lumMat);
var mat = new ColorMatrixFilter(colorMat);
// apply the filters
pic.filters = [lum, mat];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment