Mojo2: Solid colorize visible pixels of image

Monkey Forums/Monkey Programming/Mojo2: Solid colorize visible pixels of image

Ratchet(Posted 2016) [#1]
I have a picture like this


My goal is to display it like this


The color must be variable.

Is it possible to do that using glEnable/glBlendFunc/glBlendFuncSeparate/glBlendEquationSeparate? Or do I have to use a shader (glsl)? How would this shader look like?

(Using SetColor will not bring this result)


PixelPaladin(Posted 2016) [#2]
Is the background of your image white or transparent?

If it is transparent, you could use a shader like in the examples:

use <monkey_dir>/modules/mojo2/bananas/shadereffect as base code.

in shadereffect.monkey add a clear command to ShaderEffect.Render so that it looks like this:
	Method Render:Void( source:Image,target:Image )
	
		_material.SetTexture "ColorTexture",source.Material.ColorTexture
		
		_canvas.Clear(0, 0, 0, 0)' <- CLEAR ALPHA
		
		_canvas.SetRenderTarget target
		_canvas.SetViewport 0,0,target.Width,target.Height
		_canvas.SetProjection2d 0,target.Width,0,target.Height
		
		_canvas.DrawRect 0,0,target.Width,target.Height,_material
		
		_canvas.Flush
	End

change the shader code (shadereffect.data/bwshader.glsl):
uniform sampler2D ColorTexture;

uniform float EffectLevel;

void shader(){

	//convert clip position to valid tex coords
	vec2 texcoords=(b3d_ClipPosition.st/b3d_ClipPosition.w)*0.5+0.5;
	
	//read source color
	vec4 color=texture2D( ColorTexture,texcoords ).rgba;
	
	//magenta
	vec3 result=vec3( color.a, 0.0, color.a);
	
	//mix based on effect level
	color=vec4( mix( color.rgb,result,EffectLevel ),color.a) ;
	
	//write output
	b3d_FragColor=vec4( color );
}

you can remove the 'EffectLevel' stuff if you don't need it.


Ratchet(Posted 2016) [#3]
Yes, the background is transparent.
Works very well... with magenta. But I can't find out how to use a variable color selected by the user. I'm not very good at shader stuff :/


PixelPaladin(Posted 2016) [#4]
You can send the colors to the shader by using uniforms (just like EffectLevel).
Here is the modified code for the example app:

and here the shader code:

It should also be possible to send the color to the shader as a vec4 somehow.
Also it's not a really black/white shader anymore :)


Ratchet(Posted 2016) [#5]
This is exactly what I need. I was searching for a solution for a long time, this is just perfect. Thank you so much :)