Fluid Colour - Abstract background.

Share your advanced PureBasic knowledge/code with the community.
pjay
Enthusiast
Enthusiast
Posts: 251
Joined: Thu Mar 30, 2006 11:14 am

Fluid Colour - Abstract background.

Post 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
miso
Enthusiast
Enthusiast
Posts: 462
Joined: Sat Oct 21, 2023 4:06 pm
Location: Hungary

Re: Fluid Colour - Abstract background.

Post by miso »

Nice!
BarryG
Addict
Addict
Posts: 4163
Joined: Thu Apr 18, 2019 8:17 am

Re: Fluid Colour - Abstract background.

Post by BarryG »

Nice! Didn't expect it to be animated. Thought it was just a static image.
User avatar
Caronte3D
Addict
Addict
Posts: 1361
Joined: Fri Jan 22, 2016 5:33 pm
Location: Some Universe

Re: Fluid Colour - Abstract background.

Post by Caronte3D »

Nice! 8)
It looks like an old school effect from the Amiga scene.
User avatar
moulder61
Enthusiast
Enthusiast
Posts: 193
Joined: Sun Sep 19, 2021 6:16 pm
Location: U.K.

Re: Fluid Colour - Abstract background.

Post 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.
"If it ain't broke, fix it until it is!

This message is brought to you thanks to SenselessComments.com

My PB stuff for Linux: "https://u.pcloud.link/publink/show?code ... z3MR0T3jyV
Justin
Addict
Addict
Posts: 948
Joined: Sat Apr 26, 2003 2:49 pm

Re: Fluid Colour - Abstract background.

Post by Justin »

:shock: pretty fancy
User avatar
idle
Always Here
Always Here
Posts: 5879
Joined: Fri Sep 21, 2007 5:52 am
Location: New Zealand

Re: Fluid Colour - Abstract background.

Post by idle »

nice one, you just invented LGBTQA friendly pasta! :lol:
Fred
Administrator
Administrator
Posts: 18175
Joined: Fri May 17, 2002 4:39 pm
Location: France
Contact:

Re: Fluid Colour - Abstract background.

Post by Fred »

Looks very nice !
User avatar
pf shadoko
Enthusiast
Enthusiast
Posts: 386
Joined: Thu Jul 09, 2015 9:07 am

Re: Fluid Colour - Abstract background.

Post by pf shadoko »

whaoo !
User avatar
minimy
Enthusiast
Enthusiast
Posts: 609
Joined: Mon Jul 08, 2013 8:43 pm
Location: off world

Re: Fluid Colour - Abstract background.

Post by minimy »

Preety effect! Lucy in the sky with diamonds ♫♪ :lol:
Very nice work!
If translation=Error: reply="Sorry, Im Spanish": Endif
threedslider
Enthusiast
Enthusiast
Posts: 396
Joined: Sat Feb 12, 2022 7:15 pm

Re: Fluid Colour - Abstract background.

Post by threedslider »

Nice work ! Hi and greeting to pjay ! :mrgreen:
User avatar
SPH
Enthusiast
Enthusiast
Posts: 566
Joined: Tue Jan 04, 2011 6:21 pm

Re: Fluid Colour - Abstract background.

Post by SPH »

Beautyful :idea:

!i!i!i!i!i!i!i!i!i!
!i!i!i!i!i!i!
!i!i!i!
//// Informations ////
Portable LENOVO ideapad 110-17ACL 64 bits
Version de PB : 6.12LTS - 64 bits
Post Reply