Created
January 8, 2016 17:41
-
-
Save gregkepler/803b03e04c396132b808 to your computer and use it in GitHub Desktop.
Map image luminance value between 2 colors
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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