Converting color

[PhatPeterParticipant]

So I’m totally stuck after few days think about this problem. It’s a really tough problem.
How would you convert the color from RGBA Uint into a “color” datatype?

[EthernautParticipant]

Monkey

Function ToRGBA:UInt( c:Color ) Return UInt(c.R*255) Shl 24 | UInt(c.G*255) Shl 16 | UInt(c.B*255) Shl 8 | UInt(c.A*255) End Function FromRGBA:Color( rgba:UInt ) Local r:=(rgba Shr 24 & $ff)/255.0 Local g:=(rgba Shr 16 & $ff)/255.0 Local b:=(rgba Shr 8 & $ff)/255.0 Local a:=(rgba & $ff)/255.0 Return New Color( r,g,b,a ) End

1 2 3 4 5 6 7 8 9 10 11

Function ToRGBA:UInt( c:Color ) Return UInt(c.R*255) Shl 24 | UInt(c.G*255) Shl 16 | UInt(c.B*255) Shl 8 | UInt(c.A*255) End   Function FromRGBA:Color( rgba:UInt ) Local r:=(rgba Shr 24 & $ff)/255.0 Local g:=(rgba Shr 16 & $ff)/255.0 Local b:=(rgba Shr 8 & $ff)/255.0 Local a:=(rgba & $ff)/255.0 Return New Color( r,g,b,a ) End

[PhatPeterParticipant]

But how to set the colour to full or no alpha rrggbbaa so you can ERASE “color” an OVAL?
I just don’t understand how alpha is put in color, how to erase? is there a MODE for that?

[PhatPeterParticipant]

Is it kosher to use canvas.BlendMode = BlendMode.Opaque to set the absolute value of R G B *and Alpha* of a pixel?

[EthernautParticipant]

Yeah, the alpha is just a color channel, like red, green or blue.
You can set is as part of the color, or separately using “canvas.Alpha = myAlpha”.

Also remember that in openGL colors can have values higher than 1.0 – that’s HDR! Setting colors like that is essential to things like Glow shaders. It’s probably a good practice to not use UINT values of 0 to 255 unless you need to, and embrace colors as floating point values.

This:

Monkey

Namespace myapp #Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Class MyWindow Extends Window Method New() Super.New( "test",512, 512,WindowFlags.Resizable | WindowFlags.HighDPI ) End Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.Color = New Color( 1, 0.5, 0, 0.5 ) canvas.DrawRect( 100, 100, 200, 200 ) canvas.DrawRect( 150, 150, 200, 200 ) canvas.DrawRect( 200, 200, 200, 200 ) End End Function Main() New AppInstance New MyWindow App.Run() End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

Namespace myapp   #Import "<std>" #Import "<mojo>"   Using std.. Using mojo..   Class MyWindow Extends Window Method New() Super.New( "test",512, 512,WindowFlags.Resizable | WindowFlags.HighDPI ) End   Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.Color = New Color( 1, 0.5, 0, 0.5 ) canvas.DrawRect( 100, 100, 200, 200 ) canvas.DrawRect( 150, 150, 200, 200 ) canvas.DrawRect( 200, 200, 200, 200 ) End End     Function Main() New AppInstance New MyWindow App.Run() End

Will output three overlapping squares with transparency, like this:

[EthernautParticipant]

And if by “Erase” color you mean to make a color in an image transparent… that’s really not necessary anymore, simply export images as PNG files with transparency.

If you already have old images you’d like to use and you don’t want to change them using a graphics app… I guess you can make a monkey module that loads an image as a pixmap, specifies a color to be made transparent, finds all pixels in the pixmap that match that color and sets the color in those pixels to transparent and creates a new image from that pixmap…

…or you can just save the images as PNG with transparency!

[PhatPeterParticipant]

Wow, big thanks, good to know !
But what happens if you wants to change only the alpha but you want to keep the rest intact? Do you have to make it pixel by pixel or is a way to change alpha channel alone?

[abakoboParticipant]

Just give the canavas some drawing color and the whole image will be drawn with that modified color.Note that you are supposed to use premultiplied alphas in mx2 (I think, not really sure of when to deal with premultiplied alphas).

Monkey

canvas.Alpha=0.5) canvas.DrawImage(myImage,100,100)

1 2	canvas.Alpha=0.5) canvas.DrawImage(myImage,100,100)

or directly on the Image

Monkey

myimage.BlendMode=BlendMode.Alpha 'the default blendmode.. myimage.Color=New Color(0.5,0.5,0.5,0.5)

1 2 3

myimage.BlendMode=BlendMode.Alpha 'the default blendmode.. myimage.Color=New Color(0.5,0.5,0.5,0.5)

[nerobotParticipant]

When you draw to canvas, you blend pixels with existing ones.

The question is how to erase pixels in canvas.

It’s actual to make transparent HUD for AR-glasses stuff, when you need to make drawing area actually transparent to see through it.

I remember there was a similar topic but don’t remember the answer – is it possible or is it in TODO.

[dominique95Participant]

For creating Hud , I start with erased image, canvas.Clear(Color.None) and draw with BlendMode.Alpha
and adjust the Alpha component of the drawing color.
In the main loop , I draw this image on the screen. But it’s always the same.

Try this , using A, D, M, O,  and Up/Down Keys.
See the Color’s info under the mouse, blendmode will make sense.
Transparency is where you see the red balls.
Coded with Monkey2 1.1.06

Monkey

' --------------------------------------- ' alphatest2.monkey2 ' --------------------------------------- Namespace alphatest2 #Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Class MyWindow Extends Window Field pxm:Pixmap Field img:Image Field imgcanvas:Canvas Field opacity:Float Field blmode : BlendMode Field blmodename : String Method New() Super.New( "test",512, 512,WindowFlags.Resizable | WindowFlags.HighDPI ) pxm = New Pixmap( 300,300,PixelFormat.RGBA32 ) img = New Image( pxm,TextureFlags.None,Null ) imgcanvas = New Canvas(img) opacity = 0.5 blmode = BlendMode.Opaque blmodename = "Opaque" End Method OnRender( canvas:Canvas ) Override App.RequestRender() ' Draw your Screen background here (Red Circles) canvas.Clear(Color.Black) For Local lc:Int = 1 To 8 For Local li:Int = 1 To 6 canvas.Color = Color.Red canvas.DrawCircle( lc*55,li*55,25 ) Next Next ' Adjust Opacity and BlendMode If Keyboard.KeyPressed(Key.Up) opacity = Clamp( opacity+0.1,0.0,1.0 ) Elseif Keyboard.KeyPressed( Key.Down ) opacity = Clamp( opacity-0.1,0.0,1.0 ) Elseif Keyboard.KeyPressed( Key.A) blmode = BlendMode.Alpha blmodename = "Alpha" Elseif Keyboard.KeyPressed( Key.O) blmode = BlendMode.Opaque blmodename = "Opaque" Elseif Keyboard.KeyPressed( Key.M) blmode = BlendMode.Multiply blmodename = "Multiply" Elseif Keyboard.KeyPressed( Key.D) blmode = BlendMode.Additive blmodename = "Additive" Endif ' Draw orange squares into image according to params (opacity and BlendMode) ' These 9 next lines dont have to be in you main loop imgcanvas.Clear(Color.None) ' Clear the image And Alpha = 0.0 imgcanvas.Color = Color.Blue' And paint bottom half in blue and Alpha = 1.0 imgcanvas.DrawRect(0,0,pxm.Width,pxm.Height/2) imgcanvas.Color = New Color( 0.9, 0.4, 0.0, opacity ) imgcanvas.BlendMode=blmode imgcanvas.DrawRect( 50, 50, 100, 100 ) imgcanvas.DrawRect( 75, 75, 100, 100 ) imgcanvas.DrawRect( 100, 100, 100, 100 ) imgcanvas.Flush() ' Try the results without cheating canvas.Color = New Color( 1, 1, 1, 1 ) canvas.Alpha = 1 canvas.DrawImage( img,0,0 ) ' Show Pixels data Local ARGB:UInt If (Mouse.X<pxm.Width) And (Mouse.Y<pxm.Height) ARGB = pxm.GetPixelARGB(Mouse.X,Mouse.Y) canvas.DrawText( "image color ARGB $" + Hex(ARGB),0,Height-40 ) Endif canvas.DrawText( "Move the mouse pointer",0,Height-70 ) canvas.DrawText( "See alpha component (left 2 bytes) of the",0,Height-56 ) ' opacity and BlendMode canvas.DrawText("Opacity " +opacity,Width-150,Height-70 ) canvas.DrawText(blmodename,Width-150,Height-40) canvas.DrawText( "Up Down keys",Width-150,Height-56 ) canvas.DrawText( "A D M O keys",Width-150,Height-28 ) End End Function Main() New AppInstance New MyWindow App.Run() End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

' --------------------------------------- '          alphatest2.monkey2 ' --------------------------------------- Namespace alphatest2 #Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Class MyWindow Extends Window Field pxm:Pixmap Field img:Image Field imgcanvas:Canvas Field opacity:Float Field blmode : BlendMode Field blmodename : String Method New() Super.New( "test",512, 512,WindowFlags.Resizable | WindowFlags.HighDPI ) pxm = New Pixmap( 300,300,PixelFormat.RGBA32 ) img = New Image( pxm,TextureFlags.None,Null ) imgcanvas = New Canvas(img) opacity = 0.5 blmode = BlendMode.Opaque blmodename = "Opaque" End Method OnRender( canvas:Canvas ) Override App.RequestRender() ' Draw your Screen background here (Red Circles) canvas.Clear(Color.Black) For Local lc:Int = 1 To 8 For Local li:Int = 1 To 6 canvas.Color = Color.Red canvas.DrawCircle( lc*55,li*55,25 ) Next Next ' Adjust Opacity and BlendMode If Keyboard.KeyPressed(Key.Up) opacity = Clamp( opacity+0.1,0.0,1.0 ) Elseif  Keyboard.KeyPressed( Key.Down ) opacity = Clamp( opacity-0.1,0.0,1.0 ) Elseif Keyboard.KeyPressed( Key.A) blmode = BlendMode.Alpha blmodename = "Alpha" Elseif Keyboard.KeyPressed( Key.O) blmode = BlendMode.Opaque blmodename = "Opaque" Elseif Keyboard.KeyPressed( Key.M) blmode = BlendMode.Multiply blmodename = "Multiply" Elseif Keyboard.KeyPressed( Key.D) blmode = BlendMode.Additive blmodename = "Additive" Endif ' Draw orange squares into image according to params (opacity and BlendMode) ' These 9 next lines dont have to be in you main loop imgcanvas.Clear(Color.None)  ' Clear the image  And Alpha = 0.0 imgcanvas.Color = Color.Blue' And paint bottom half in blue and Alpha = 1.0 imgcanvas.DrawRect(0,0,pxm.Width,pxm.Height/2) imgcanvas.Color = New Color( 0.9, 0.4, 0.0, opacity ) imgcanvas.BlendMode=blmode imgcanvas.DrawRect(  50,  50, 100, 100 ) imgcanvas.DrawRect(  75,  75, 100, 100 ) imgcanvas.DrawRect( 100, 100, 100, 100 ) imgcanvas.Flush()     ' Try the results without cheating canvas.Color = New Color( 1, 1, 1, 1 ) canvas.Alpha = 1 canvas.DrawImage( img,0,0 ) ' Show Pixels data   Local ARGB:UInt If (Mouse.X<pxm.Width) And (Mouse.Y<pxm.Height) ARGB = pxm.GetPixelARGB(Mouse.X,Mouse.Y) canvas.DrawText( "image color ARGB   $" + Hex(ARGB),0,Height-40 ) Endif canvas.DrawText( "Move the mouse pointer",0,Height-70 ) canvas.DrawText( "See alpha component (left 2 bytes) of the",0,Height-56 ) ' opacity and BlendMode canvas.DrawText("Opacity " +opacity,Width-150,Height-70 ) canvas.DrawText(blmodename,Width-150,Height-40) canvas.DrawText( "Up Down keys",Width-150,Height-56 ) canvas.DrawText( "A D M O keys",Width-150,Height-28 ) End End Function Main() New AppInstance New MyWindow App.Run() End

[Author]

Posts