Page 1 of 1

Fluid Colour - Abstract background.

Posted: Wed May 14, 2025 10:03 pm
by pjay
I've been developing an OpenGL-based drawing & compositing library for a while now & was recently reproducing some Adobe Illustrator type examples to test it's current capabilities - I thought one of these examples could be replicated in native PureBasic code, so gave it a go & the result is below:

Image

Code: Select all

; 'Fluid Colour' using PB sprites - PJay 05/2025 - [PB6.11+ Win x64]

EnableExplicit
If InitSprite() = 0 Or InitKeyboard() = 0 Or InitMouse() = 0 : MessageRequester("Error", "Can't open the sprite system", 0) : End : EndIf

#Width = 1024 : #Height = 768 : #Sprite_Main = 0 : #Sprite_BG = 1 : #App = "'Fluid Colour' - Abstract Background [PJay - 05/2025]"
#Step = 1 ; x step when drawing, 1 or 2 required to maintain illusion, but 16 is quite artistically spiny...

Structure sRGBAA : r.a : g.a : b.a : a.a : EndStructure
Procedure _Mix(*c1.sRGBAA, *c2.sRGBAA, t.f)
  ProcedureReturn RGBA((*c1\r * (1.0 - t)) + (*c2\r*t), (*c1\g*(1.0 - t)) + (*c2\g*t), (*c1\b*(1.0 - t)) + (*c2\b*t), (*c1\a*(1.0 - t)) + (*c2\a*t))
EndProcedure
Procedure MakeSprites() ; make the gradient background and main sprite.
  Protected x, y, ang.f, c1 = RGBA(255,220,45,255), c2 = RGBA(252,60,135,255), c3 = RGBA(60,60,140,255)
  CreateImage(0,#Width,#Height) : CreateSprite(#Sprite_BG,#Width,#Height)
  StartVectorDrawing(ImageVectorOutput(0))
  VectorSourceLinearGradient(0, 0, 0, #height) : VectorSourceGradientColor(RGBA(50, 99, 150, 255), 0.0) : VectorSourceGradientColor(RGBA(80, 170, 255, 255), 1.0)
  AddPathBox(0, 0, #Width, #Height) : FillPath() : StopVectorDrawing() 
  StartDrawing(SpriteOutput(#Sprite_BG)) : DrawImage(ImageID(0),0,0) : StopDrawing()
  CreateImage(0, 512, 512, 32, #PB_Image_Transparent) : CreateSprite(#Sprite_Main, 512, 512, #PB_Sprite_AlphaBlending)
  StartDrawing(ImageOutput(0)) : DrawingMode(#PB_2DDrawing_AllChannels)
  For y = 0 To 250
    For x = 0 To 150 Step 30
      ang = Radian(x) + (Sin((y / 80.0) + 1.3) * 0.25)
      Circle(256 + y * Cos(ang), 256 + y * Sin(ang), 6, _Mix(@c1, @c2, 1.0 - (y / 255))) ; DrawSD(#sdCircle, px, py, (asize * 0.01), asize * 0.0061)
    Next
    For x = 0 To 150 Step 30
      ang = Radian(x + 180) + (Sin((y / 80.0) + 1.3) * 0.25)
      Circle(256 + y * Cos(ang), 256 + y * Sin(ang), 6, _Mix(@c2, @c3, 1.0 - (y / 255)))
    Next
  Next : StopDrawing() ;: SaveImage(0,"C:\temp\pudl\pbsprite.bmp")
  StartDrawing(SpriteOutput(#Sprite_Main)) : DrawingMode(#PB_2DDrawing_AllChannels) : DrawImage(ImageID(0),0,0) : StopDrawing()
EndProcedure

Define time, size.f, ang.f, offset, PosY.f, angdiff.f, xf.f, event, Exit = 0
If OpenWindow(0, 0, 0, #Width / DesktopResolutionX(), #Height / DesktopResolutionY(), #App, #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  If OpenWindowedScreen(WindowID(0), 0,0, #Width, #Height, 1, 0, 0) : MakeSprites() ;,#PB_Screen_NoSynchronization)
    Repeat
      ExamineKeyboard() : DisplaySprite(#Sprite_BG,0,0) : time = ElapsedMilliseconds()
      size.f = 128 : ang.f = time / 10.0 : offset + 1 : Posy.f = 150.0 : angdiff.f = Sin(time / 1000.0) * 0.1 : xf.f = -size
      While xf.f < #Width
        ZoomSprite(#Sprite_Main, size, size) : RotateSprite(#Sprite_Main, ang, #PB_Absolute)
        DisplayTransparentSprite(#Sprite_Main, xf, posy + Sin((((xf + offset) / 100.0)) * 160.0) + Sin(((xf - offset) / 170.0)) * 120.0)
        posy + (0.15 * #Step) : xf.f + #step : size + (0.185 * #Step) : ang + (angdiff * #Step)
      Wend : FlipBuffers()
      Repeat : Event = WindowEvent() : If Event = #PB_Event_CloseWindow : Exit = 1 : EndIf : Until Event = 0
    Until Exit Or KeyboardPushed(#PB_Key_Escape)
  Else
    MessageRequester("Error", "Can't open windowed screen!", 0)
  EndIf
EndIf

The original video which inspired this can be viewed here: https://www.youtube.com/watch?v=KD0ChM3-8ZU

Re: Fluid Colour - Abstract background.

Posted: Wed May 14, 2025 11:39 pm
by miso
Nice!

Re: Fluid Colour - Abstract background.

Posted: Thu May 15, 2025 8:42 am
by BarryG
Nice! Didn't expect it to be animated. Thought it was just a static image.

Re: Fluid Colour - Abstract background.

Posted: Thu May 15, 2025 9:25 am
by Caronte3D
Nice! 8)
It looks like an old school effect from the Amiga scene.

Re: Fluid Colour - Abstract background.

Posted: Thu May 15, 2025 4:43 pm
by moulder61
@pjay

Very nice. :D

It reminds me of something Mr.L did a while back.

I was also pleased to find it runs nicely on Linux. 8)

Moulder.

Re: Fluid Colour - Abstract background.

Posted: Thu May 15, 2025 10:04 pm
by Justin
:shock: pretty fancy

Re: Fluid Colour - Abstract background.

Posted: Thu May 15, 2025 11:19 pm
by idle
nice one, you just invented LGBTQA friendly pasta! :lol:

Re: Fluid Colour - Abstract background.

Posted: Fri May 16, 2025 8:39 am
by Fred
Looks very nice !

Re: Fluid Colour - Abstract background.

Posted: Fri May 16, 2025 11:31 am
by pf shadoko
whaoo !

Re: Fluid Colour - Abstract background.

Posted: Sat May 17, 2025 1:25 am
by minimy
Preety effect! Lucy in the sky with diamonds ♫♪ :lol:
Very nice work!

Re: Fluid Colour - Abstract background.

Posted: Sat May 17, 2025 7:37 pm
by threedslider
Nice work ! Hi and greeting to pjay ! :mrgreen:

Re: Fluid Colour - Abstract background.

Posted: Thu May 22, 2025 1:11 pm
by SPH
Beautyful :idea: