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:

'Simple black/white shader effect

Import mojo2

'Our custom shader
Class BWShader Extends Shader

	Method New()
		Build( LoadString( "monkey://data/bwshader.glsl" ) )
	End
	
	'must implement this - sets valid/default material params
	Method OnInitMaterial:Void( material:Material )
		material.SetTexture "ColorTexture",Texture.White()
		material.SetScalar "EffectLevel",1
		material.SetScalar "color_r",1
		material.SetScalar "color_g",1
		material.SetScalar "color_b",1
		material.SetScalar "color_a",1
		
	End
	
	Function Instance:BWShader()
		If Not _instance _instance=New BWShader
		Return _instance
	End
	
	Private
	
	Global _instance:BWShader
	
End

Class ShaderEffect

	Method New()
		If Not _canvas _canvas=New Canvas

		_material=New Material( BWShader.Instance() )
	End
	
	Method SetLevel:Void( level:Float )
		_material.SetScalar "EffectLevel",level
	End
	
	Method SetColor:Void( r:Float, g:Float, b:Float, a:Float=1.0 )
		_material.SetScalar "color_r",r
		_material.SetScalar "color_g",g
		_material.SetScalar "color_b",b
		_material.SetScalar "color_a",a
	End
	
	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
	
	Private
	
	Global _canvas:Canvas	'shared between ALL effects
	
	Field _material:Material
	
End


Class MyApp Extends App

	Field sourceImage:Image
	Field targetImage:Image
	
	Field canvas:Canvas
	
	Field effect:ShaderEffect
	
	Field level:Float=1
	
	Method OnCreate()
		
		sourceImage=Image.Load( "default_player.png" )
		targetImage=New Image( sourceImage.Width,sourceImage.Height )
		
		effect=New ShaderEffect

		canvas=New Canvas
	End
	
	Method OnUpdate()
		If KeyDown( KEY_A )
			level=Min( level+.01,1.0 )
		Else If KeyDown( KEY_Z )
			level=Max( level-.01,0.0 )
		Endif
		If KeyHit(KEY_ESCAPE) Then OnClose()
		If KeyHit(KEY_SPACE) Then effect.SetColor(Rnd(1.0), Rnd(1.0), Rnd(1.0), 1.0)
	End
	
	Method OnRender()
	
		effect.SetLevel level
	
		effect.Render( sourceImage,targetImage )
		
		canvas.Clear(0, 0.5, 1, 1)
		canvas.SetBlendMode(BlendMode.Alpha)
		canvas.DrawImage(sourceImage, 100, 100)
		canvas.DrawImage targetImage,MouseX,MouseY
		
		canvas.DrawText "Effect level="+level+" (A/Z to change)",0,0
		canvas.DrawText "press [space] to change color",0,20
		
		canvas.Flush
	End
	
End

Function Main()
	New MyApp
End

and here the shader code:

uniform sampler2D ColorTexture;

uniform float EffectLevel;

uniform float color_r;
uniform float color_g;
uniform float color_b;
uniform float color_a;

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;
	
	//calculate magenta
	vec4 result=vec4( color_r, color_g, color_b, color_a)*color.a;
	
	//mix based on effect level
	color=vec4( mix( color.rgba,result,EffectLevel )) ;
	
	//write output
	b3d_FragColor=vec4( color );
}

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 :)