Ooh, I made a pretty

[BasicallyPure]

I was working on a new title page for the next version of my soon to be updated image editor.
By chance, much trial and error, I hit upon a bit of simple code that produces an amazing image pattern IMO.
I thought it was worthy of its own topic in the Tricks 'n' Tips section.
It scales well for different image sizes.
I really have no idea exactly how the complexity of this pattern is produced.

At first I was plotting with the use of the RGBA() function and that worked fine when I was using x86 version of PB.
To my dismay I found it gave different and undesirable results when I switched to x64 version.
After some experimentation I was able to eliminate the use of RGBA() function and use bit shifting to obtain the desired
result for both x86 and x64 versions of PB.

You can disregard the drawing of the text, that's no big deal.
The real magic is in the two nested for/next loops.

Tested OK on Windows-7 and Linux Mint.

Code: Select all

EnableExplicit

Define.i c, x, y, z, t
#W = 1024
#H = 576
#image = 0

LoadFont(1,"Arial",36,#PB_Font_Bold | #PB_Font_Italic | #PB_Font_HighQuality)

Macro DrawShadowedText(txt)
   FrontColor($FFFFFF) ;shadow color
   x = (OutputWidth() - TextWidth(txt))/2
   DrawText(x+3,y+3,txt)
   FrontColor($44B8ED) ;text color
   DrawText(x,y,txt)
   y + t
EndMacro

If OpenWindow(0,0,0,#W,#H,"Cool Image ",#PB_Window_SystemMenu | #PB_Window_ScreenCentered)
   
   CreateImage(#image,#W,#H,32,0)
   
   StartDrawing(ImageOutput(#image))
      DrawingFont(FontID(1))
      DrawingMode(#PB_2DDrawing_AlphaBlend)
      
      For y = 0 To OutputHeight()-1
         For x = 0 To OutputWidth()-1
            c = (x * y) | %01010101
            z = (x+y)|z
            Plot(x, y, c!z + (c|z)<<8 + (c|z)<<16 + C<<27 )
         Next
      Next
      
      DrawingMode( #PB_2DDrawing_Transparent)
      t = TextHeight("Ag") ;arbitrary text
      y = OutputHeight()/2 - t*1.5
      DrawShadowedText("CQ Image Editor")
      DrawShadowedText("by")
      DrawShadowedText("BasicallyPure")
   StopDrawing()
   
   FreeFont(1)
   
   ImageGadget(#PB_Any,0,0,#W,#H,ImageID(#image))
   
   While WaitWindowEvent() ! #PB_Event_CloseWindow : Wend
   
EndIf

[Kukulkan]

Looks nice

How to safely change the used colours of the background pattern?

[BasicallyPure]

How to safely change the used colours of the background pattern?

I have no idea except by trial and error experimentation.
Magic is not an 'exact' science you know.

Plot(x, y, c!z + (c+z)<<8 + (c+z)<<16 + C<<27 ; C<<27 = Alpha

Because the formulas for each color component value can exceed 255, the color components will interact.
Red will alter green, green will alter blue, blue will alter alpha.
I don't know what alpha does when it exceeds 255, probably nothing.

[jack]

very nice

[davido]

@BasicallyPure,
Very nice image.
Looks the same on Windows and MacOSX.

[Keya]

just as amazing i find is achieving the effect with hardly any code! Im looking back and forth between the resulting image and the code and the two almost seem unrelated A lot of bang for the buck!

Code: Select all

      For y = 0 To OutputHeight()-1
         For x = 0 To OutputWidth()-1
            c = (x * y) | %01010101
            z = (x+y)|z
            Plot(x, y, c!z + (c|z)<<8 + (c|z)<<16 + C<<27 )
         Next
      Next

[BasicallyPure]

How to safely change the used colours of the background pattern?

After further thought I realized it is possible.
Preserve the pattern and change the colours by adding more code after the original image is created.

Code: Select all

EnableExplicit

Define.i c, x, y, z, t, Xmax, Ymax
Define.a r, g, b

#W = 1024
#H = 576
#image = 0

LoadFont(1,"Arial",36,#PB_Font_Bold | #PB_Font_Italic | #PB_Font_HighQuality)

Macro DrawShadowedText(txt)
   FrontColor($FFFFFF) ;shadow color
   x = (OutputWidth() - TextWidth(txt))/2
   DrawText(x+3,y+3,txt)
   FrontColor($44B8ED) ;text color
   DrawText(x,y,txt)
   y + t
EndMacro

If OpenWindow(0,0,0,#W,#H,"Cool Image ",#PB_Window_SystemMenu | #PB_Window_ScreenCentered)
   
   CreateImage(#image,#W,#H,32,0)
   
   StartDrawing(ImageOutput(#image))
      DrawingFont(FontID(1))
      DrawingMode(#PB_2DDrawing_AlphaBlend)
      
      Ymax = OutputHeight()-1
      Xmax = OutputWidth() -1
      
      ; create pattern, colors may not be desired
      For y = 0 To Ymax
         For x = 0 To Xmax
            c = (x * y) | %01010101
            z = (x+y)|z
            Plot(x, y, c!z + (c|z)<<8 + (c|z)<<16 + C<<27 )
         Next
      Next
      
      ; manipulate colors without changing pattern
      DrawingMode(#PB_2DDrawing_Default)
      
      For y = 0 To Ymax
         For x = 0 To Xmax
            ; decompose to components
            c = Point(x,y)
            r = Red(c)
            g = Green(c)
            b = Blue(c)
            
            ; modify components
            r * 0.5
            g * 1.5
            b * 1.25
            
            ; reassemble components and plot
            Plot(x, y, r | g<<8 | b<<16)
         Next
      Next
      
      DrawingMode( #PB_2DDrawing_Transparent)
      t = TextHeight("Ag") ;arbitrary text
      y = OutputHeight()/2 - t*1.5
      DrawShadowedText("CQ Image Editor")
      DrawShadowedText("by")
      DrawShadowedText("BasicallyPure")
   StopDrawing()
   
   FreeFont(1)
   
   ImageGadget(#PB_Any,0,0,#W,#H,ImageID(#image))
   
   While WaitWindowEvent() ! #PB_Event_CloseWindow : Wend
   
EndIf

[ar-s]

I prefere using a thing like that to create a shadow text

Code: Select all

    EnableExplicit

    Define.i c, x, y, z, t, xs, ys
    #W = 1024
    #H = 576
    #image = 0

    #TopLeft = 0
    #TopRight = 1
    #BottomLEFT = 2
    #BottomRight = 3

    LoadFont(1,"Arial",36,#PB_Font_Bold | #PB_Font_Italic | #PB_Font_HighQuality)


Procedure DrawShadowText(txt.s, Y, FrontColor, ShadowColor, Spacing = 3, Direction = #TopRight)
       Protected x,xs,ys,t
       
       x = (OutputWidth() - TextWidth(txt))/2
        
       Select Direction
          Case #TopRight
             xs = x + Spacing    : ys = y - Spacing
          Case #BottomLEFT
             xs = x - Spacing     : ys = y - Spacing 
          Case #BottomRight
             xs = x + Spacing     : ys = y + Spacing
          Case #TOPLeft
             xs = x - Spacing     : ys = y - Spacing
       EndSelect
       
        
        
       DrawingMode(#PB_2DDrawing_Transparent )
       
       DrawText(xs,ys,txt,ShadowColor)
       DrawText(x,y,txt, FrontColor)


EndProcedure




    If OpenWindow(0,0,0,#W,#H,"Cool Image ",#PB_Window_SystemMenu | #PB_Window_ScreenCentered)
       
       CreateImage(#image,#W,#H,32,0)
       
       StartDrawing(ImageOutput(#image))
          DrawingFont(FontID(1))
          DrawingMode(#PB_2DDrawing_AlphaBlend)
         
          For y = 0 To OutputHeight()-1
             For x = 0 To OutputWidth()-1
                c = (x * y) | %01010101
                z = (x+y)|z
                Plot(x, y, c!z + (c|z)<<8 + (c|z)<<16 + C<<27 )
             Next
          Next
         
          DrawingMode( #PB_2DDrawing_Transparent)
          t = TextHeight("Ag") ;arbitrary text
          
          DrawShadowText("Shadow Text",50, $0000FF, $0, 4, #BottomLEFT )
          DrawShadowText("by",90, $0000FF, $0, 4, #topRight )
          DrawShadowText("Ar-S",140, $00FF00, $00AA00, 3, #tOPLEFT )
          DrawShadowText("Feel the PB Power",190, $FF00FF, $0, 2, #BottomRight )
       StopDrawing()
       
       FreeFont(1)
       
       ImageGadget(#PB_Any,0,0,#W,#H,ImageID(#image))
       
       While WaitWindowEvent() ! #PB_Event_CloseWindow : Wend
       
    EndIf

[Kwai chang caine]

@BasicallyPure
It's incredible the effect that you get to set with as few lines
Very nice, very nice
Thanks

[Andre]

Impressive! Could be useful, thank you