Add transparency to color

[coder14]

Hello. Can I make a color transparent without using RGBA? I have the value of the color and I want to make that transparent for example white=RGB(255,255,255)=16777215.

Thanks!!

[wilbert]

Yes, you can use hex notation.
A PureBasic color is like this $AABBGGRR where AA is alpha, BB is blue, GG is green and RR is red.

50% transparent yellow is $8000FFFF
In this case alpha is $80 (128), blue is $00 (0), green is $FF (255) and red is $FF (255).

25% transparent red is $400000FF
In this case alpha is $40 (64), blue is $00 (0), green is $00 (0) and red is $FF (255).

Another way would be to use the bitwise or operation

Code: Select all

Alpha25p = RGBA(0, 0, 0, 64)
Alpha50p = RGBA(0, 0, 0, 128)
Alpha75p = RGBA(0, 0, 0, 192)

Yellow = RGB(255, 255, 0)

YellowWithAlpha75p = Yellow | Alpha75p

Debug Hex(Yellow, #PB_Long)
Debug Hex(YellowWithAlpha75p, #PB_Long)

[IdeasVacuum]

What advantage do you gain in not using RGBA? The advantage of using it is readability.....

[wilbert]

What advantage do you gain in not using RGBA? The advantage of using it is readability.....

RGBA is a function so it can't be used to define a constant.

[IdeasVacuum]

...but it can be used to define an integer.

[netmaestro]

You have this option for ImageOutput or CanvasOutput:

Code: Select all

; Make an image with a pink background (we want the pink color to be transparent)
CreateImage(0, 256, 256, 24, RGB(255, 0, 255))

; Put a red circle on it
StartDrawing(ImageOutput(0))
  FrontColor(RGB(255, 0, 0))
  BackColor(RGB(255, 0, 255))
  Circle(128, 128, 80)
StopDrawing()

; We want to draw the image with a transparent color of pink, in this case to CanvasOutput()
; To accomplish this we will utilize a drawing callback

Procedure MakePinkTransparent(x, y, SourceColor, TargetColor)
  If SourceColor &$FFFFFF = RGB(255, 0, 255)
    ProcedureReturn TargetColor
  Else
    ProcedureReturn SourceColor
  EndIf
EndProcedure

OpenWindow(0, 0, 0, 640, 480, "", #PB_Window_ScreenCentered|#PB_Window_SystemMenu)
SetWindowColor(0, RGB(255, 255, 255))
ImageGadget(0, 60, 100, 256, 256, ImageID(0))
CanvasGadget(1, 316, 100, 256, 256)
TextGadget(2, 140, 70, 150, 20, "Normal Drawing")
TextGadget(3, 390, 70, 150, 20, "Drawing with Callback")

Repeat
  EventID = WaitWindowEvent()
  Select EventID
    Case #PB_Event_Repaint
      StartDrawing(CanvasOutput(1))
        DrawingMode(#PB_2DDrawing_CustomFilter)
        CustomFilterCallback(@MakePinkTransparent())
        DrawImage(ImageID(0), 0, 0)
      StopDrawing()
  EndSelect
Until EventID = #PB_Event_CloseWindow

[TI-994A]

...make a color transparent without using RGBA? I have the value of the color and I want to make that transparent for example white=RGB(255,255,255)=16777215.

Indisputably, great answers and examples from the veterans. Thanks guys!

However, assuming that you're averse to the RGBA() function because you lack the component values of the colour, you could simply split the colours using the Red(), Green(), Blue() functions, and then reassemble them with the RGBA() function, like so:

Code: Select all

Procedure getTransparentColour(opaqueColour, transparencyLevel)
  ProcedureReturn  RGBA(Red(opaqueColour), 
                        Green(opaqueColour), 
                        Blue(opaqueColour), 
                        transparencyLevel)
EndProcedure

red = 255
green = 65280
blue = 16711680

wFlags = #PB_Window_SystemMenu | #PB_Window_ScreenCentered
OpenWindow(0, #PB_Any, #PB_Any, 300, 300, "Alpha Colour", wFlags)
CanvasGadget(0, 0, 0, 300, 300)

StartDrawing(CanvasOutput(0))
  
  FrontColor(0)
  DrawingMode(#PB_2DDrawing_Transparent)
  DrawText(90, 40, "hidden ...... visible")
  DrawText(90, 140, "hidden ...... visible")
  DrawText(90, 240, "hidden ...... visible")
  
  Box(0, 0, 150, 100, red)  
  Box(0, 100, 150, 100, green)  
  Box(0, 200, 150, 100, blue)
  
  DrawingMode(#PB_2DDrawing_AlphaBlend)
  Box(150, 0, 150, 100, getTransparentColour(red, 50))
  Box(150, 100, 150, 100, getTransparentColour(green, 100))
  Box(150, 200, 150, 100, getTransparentColour(blue, 150))
  
StopDrawing()

While WaitWindowEvent() ! #PB_Event_CloseWindow : Wend

Hope it helps.

[wilbert]

you could simply split the colours using the Red(), Green(), Blue() functions, and then reassemble them with the RGBA() function

You could the same with a shift and bitwise or operation.

Code: Select all

green = 65280
alpha = 150

greenWithAlpha = green | alpha << 24

Debug Hex(green)
Debug Hex(greenWithAlpha)

[coder14]

Thanks to all for your help. Really good tips.

TI-994A thank you for your great example, exactly what I needed. Your procedure goes into my toolbox!

[mestnyi]

Code: Select all

Color = RGBA(Red(Color), Green(Color), Blue(Color), Transparency)
    Color = (Color | Transparency << 24)
    

This is equivalent to a decision?

[wilbert]

This is equivalent to a decision?

The exact equivalent if the color already contained alpha information that needs to be replaced should be

Code: Select all

Color = RGBA(Red(Color), Green(Color), Blue(Color), Transparency)
Color = (Color & $ffffff | Transparency << 24)

but yes, it's a matter of preference.
If you will compare on speed, you will see the second approach is faster but the first approach may be easier to understand if you look through the code.

[mestnyi]

So this was supposed to work?

Code: Select all

Global BackColor.l = RGBA(255, 0, 255, 150)
; Make an image with a pink background (we want the pink color to be transparent)
CreateImage(0, 256, 256, 32, BackColor)

; Put a red circle on it
StartDrawing(ImageOutput(0))
  FrontColor(RGB(255, 0, 0))
  BackColor(BackColor)
  Circle(128, 128, 80)
StopDrawing()

; We want to draw the image with a transparent color of pink, in this case to CanvasOutput()
; To accomplish this we will utilize a drawing callback
Procedure MakePinkTransparent(X, Y, SourceColor.l, TargetColor.l)
   If (SourceColor & $ffffff | Alpha(BackColor) << 24) = BackColor
  ;If SourceColor & $FFFFFF = BackColor
    ProcedureReturn TargetColor
  Else
    ProcedureReturn SourceColor
  EndIf
EndProcedure

OpenWindow(0, 0, 0, 640, 480, "", #PB_Window_ScreenCentered|#PB_Window_SystemMenu)
SetWindowColor(0, RGB(255, 255, 255))
ImageGadget(0, 60, 100, 256, 256, ImageID(0))
CanvasGadget(1, 316, 100, 256, 256)
TextGadget(2, 140, 70, 150, 20, "Normal Drawing")
TextGadget(3, 390, 70, 150, 20, "Drawing with Callback")

Repeat
  EventID = WaitWindowEvent()
  Select EventID
    Case #PB_Event_Repaint
      StartDrawing(CanvasOutput(1))
        DrawingMode(#PB_2DDrawing_CustomFilter)
        CustomFilterCallback(@MakePinkTransparent())
        DrawImage(ImageID(0), 0, 0)
      StopDrawing()
  EndSelect
Until EventID = #PB_Event_CloseWindow