Results 1 to 17 of 17

Thread: [RESOLVED] Diagional Color Gradient

  1. #1

    Thread Starter
    Fanatic Member AccessShell's Avatar
    Join Date
    Oct 2013
    Posts
    790

    Resolved [RESOLVED] Diagional Color Gradient

    I have code for virtical gradient
    Code:
    Private Sub FadeVertical(ByVal pic As PictureBox, _    ByVal start_r As Single, ByVal start_g As Single, ByVal start_b As Single, _
        ByVal end_r As Single, ByVal end_g As Single, ByVal end_b As Single, _
        ByVal start_y, ByVal end_y)
        
    ' Fade colors in a vertical area of a PictureBox.
    Dim hgt As Single
    Dim wid As Single
    Dim r   As Single
    Dim g   As Single
    Dim b   As Single
    Dim dr  As Single
    Dim dg  As Single
    Dim db  As Single
    Dim Y   As Single
    
    
        wid = pic.ScaleWidth
        hgt = end_y - start_y
        dr = (end_r - start_r) / hgt
        dg = (end_g - start_g) / hgt
        db = (end_b - start_b) / hgt
        r = start_r
        g = start_g
        b = start_b
        For Y = start_y To end_y
            pic.Line (0, Y)-(wid, Y), RGB(r, g, b)
            r = r + dr
            g = g + dg
            b = b + db
        Next Y
            
    End Sub
    I have code for a horizontal gradient
    Code:
    Private Sub FadeHorizontal(ByVal pic As PictureBox, _    ByVal start_r As Single, ByVal start_g As Single, ByVal start_b As Single, _
        ByVal end_r As Single, ByVal end_g As Single, ByVal end_b As Single, _
        ByVal start_x, ByVal end_x)
        
    ' Fade colors in a vertical area of a PictureBox.
    Dim hgt As Single
    Dim wid As Single
    Dim r   As Single
    Dim g   As Single
    Dim b   As Single
    Dim dr  As Single
    Dim dg  As Single
    Dim db  As Single
    Dim X   As Single
    
    
        hgt = pic.ScaleHeight
        wid = end_x - start_x
        dr = (end_r - start_r) / wid
        dg = (end_g - start_g) / wid
        db = (end_b - start_b) / wid
        r = start_r
        g = start_g
        b = start_b
        For X = start_x To end_x
            pic.Line (X, 0)-(X, hgt), RGB(r, g, b)
            r = r + dr
            g = g + dg
            b = b + db
        Next X
            
    End Sub
    I can't seem to make some code, using the above concept for a diagonal gradient.
    Any help would be appreciated

    Thanks

  2. #2
    PowerPoster Arnoutdv's Avatar
    Join Date
    Oct 2013
    Posts
    5,871

    Re: Diagional Color Gradient

    In your previous thread Olaf Schmidt gave you an example of a rotating triangle with a gradient fill

  3. #3

    Thread Starter
    Fanatic Member AccessShell's Avatar
    Join Date
    Oct 2013
    Posts
    790

    Re: Diagional Color Gradient

    If you're referencing
    https://www.vbforums.com/showthread....gle&highlight=

    thread, I don't see it. That thread was referencing triangle gradients, not "Top Left to Bottom Right" or "Bottom Left to Top Right" gradients (a.k.a diagonal gradients).

  4. #4
    PowerPoster
    Join Date
    Jun 2013
    Posts
    7,219

    Re: Diagional Color Gradient

    Quote Originally Posted by AccessShell View Post
    If you're referencing
    https://www.vbforums.com/showthread....gle&highlight=

    thread, I don't see it.
    The routine, which produced Gradients in any Angle was in post #12.

    And yes, it was doing that within "the confines" of an "outer triangle"...
    (but it should be relatively easy to adapt - to your new "diagonal rectangle-gradients").

    If you want it "totally newbie-friendly", then please use the help of a decent graphics-lib.

    Below is again the minimal-code for an otherwise empty Form (the project only needs a reference to the RC6-lib):
    Code:
    Private Sub Form_Resize()
      ScaleMode = vbPixels: Caption = "Resize me"
      
      Dim CC As cCairoContext, Grd As cCairoPattern
      Set CC = Cairo.CreateSurface(ScaleWidth, ScaleHeight).CreateContext
     
      Set Grd = Cairo.CreateLinearPattern(0, 0, CC.Surface.Width, CC.Surface.Height)
          Grd.AddColorStop 0, vbRed
          Grd.AddColorStop 1, vbYellow
      CC.Paint 1, Grd
      
      Set Picture = CC.Surface.Picture
    End Sub
    The above is using "the current Form-area", and re-creates a diagonal two-color-gradient -
    in the Form-BackGround-Picture-Prop (any time the Form gets changed in size).

    HTH

    Olaf

  5. #5

    Thread Starter
    Fanatic Member AccessShell's Avatar
    Join Date
    Oct 2013
    Posts
    790

    Re: Diagional Color Gradient

    Thank you Olaf. I thought it might be the code using RC6, which, of course, I don't have. That was one of the reasons I was hoping to do it in a similar manner that I do the Verical and Horizontal gradients.

  6. #6
    PowerPoster
    Join Date
    Jun 2013
    Posts
    7,219

    Re: Diagional Color Gradient

    Quote Originally Posted by AccessShell View Post
    I thought it might be the code using RC6, which, of course, I don't have.
    Well, the code in post #12 here: https://www.vbforums.com/showthread....=1#post5571108
    ... was using only VB6-Line-calls to produce the angled-gradients... (without RC6).

    Cannot understand though, why you try to make it "as hard as possible" on yourself,
    with all your recent graphics-experiments.

    Downloading and installing the RC6 on your Dev-machine will only take 2 minutes or so...:
    - after that you'd be free to "be creative" (with regards to graphics) -
    - and not tied down with "coding" (the most basic render-routines yourself)

    Olaf

  7. #7

    Thread Starter
    Fanatic Member AccessShell's Avatar
    Join Date
    Oct 2013
    Posts
    790

    Re: Diagional Color Gradient

    Ok, you made a good point. Please tell me again where to find it. And then tell me how to install it.

    Thanks

  8. #8
    PowerPoster
    Join Date
    Jun 2013
    Posts
    7,219

    Re: Diagional Color Gradient

    Quote Originally Posted by AccessShell View Post
    Ok, you made a good point. Please tell me again where to find it. And then tell me how to install it.
    Same thread as before - post #21:
    https://www.vbforums.com/showthread....=1#post5571226

    If you find these instructions "too sparse" (or stumble about something when you try to install it) -
    just ask for clarification here...

    Olaf

  9. #9

    Thread Starter
    Fanatic Member AccessShell's Avatar
    Join Date
    Oct 2013
    Posts
    790

    Re: Diagional Color Gradient

    Is Cairo and RC6 the same thing?
    I went to the download page. I am not sure exactly what to download.

  10. #10
    PowerPoster
    Join Date
    Jun 2013
    Posts
    7,219

    Re: Diagional Color Gradient

    Quote Originally Posted by AccessShell View Post
    Is Cairo and RC6 the same thing?
    The Cairo-wrapper makes up a larger part o the RC6, yes...

    Quote Originally Posted by AccessShell View Post
    I went to the download page. I am not sure exactly what to download.
    Select the Download.htm on the left-hand-side tree-control...
    - then download the RC6BaseDlls.zip
    - and unpack it into a new folder on your local hard-disk (e.g. C:\RC6\...)
    - after that, start the "Register-in-place"-scripts within the unpacked Folder-content

    Olaf

  11. #11

    Thread Starter
    Fanatic Member AccessShell's Avatar
    Join Date
    Oct 2013
    Posts
    790

    Re: Diagional Color Gradient

    Never mind. I got the third step to complete properly
    RC6 is now in the IDE reference list

    Select the Download.htm on the left-hand-side tree-control...

    - then download the RC6BaseDlls.zip ***DONE***
    - and unpack it into a new folder on your local hard-disk (e.g. C:\RC6\...) ***DONE***
    - after that, start the "Register-in-place"-scripts within the unpacked Folder-content ***PROBLEM***

    See Attached
    Name:  Results.jpg
Views: 220
Size:  28.0 KB
    Last edited by AccessShell; Jun 30th, 2022 at 12:12 PM.

  12. #12
    PowerPoster
    Join Date
    Jun 2013
    Posts
    7,219

    Re: Diagional Color Gradient

    Quote Originally Posted by AccessShell View Post
    Never mind. I got the third step to complete properly
    RC6 is now in the IDE reference list
    Ah, well... seems you misunderstood what I meant with "unpack" (aka "unzip" or "extract") -
    and instead tried to call the register-in-place-script directly on the "zip-File itself" (which acts as a kind of virtual folder).

    Anyways - I hope everything is working now...
    (including the example I've posted here: https://www.vbforums.com/showthread....=1#post5571203 )

    Olaf

  13. #13

    Thread Starter
    Fanatic Member AccessShell's Avatar
    Join Date
    Oct 2013
    Posts
    790

    Re: Diagional Color Gradient

    I was able, with RC6, to make a Top Left to Bottom Right (TLBR) gradient.

    What needs to done to make it TRBL (Top Right ro Bottom Left)?

  14. #14
    PowerPoster
    Join Date
    Jun 2013
    Posts
    7,219

    Re: Diagional Color Gradient

    Quote Originally Posted by AccessShell View Post
    I was able, with RC6, to make a Top Left to Bottom Right (TLBR) gradient.
    What needs to done to make it TRBL (Top Right ro Bottom Left)?
    I'd make a commonly usable (generic) routine out of the little example first -
    and what's then left, is only the correct "parametrizing" of such a sub-routine
    (which now works with any VB6-Canvas-Object ... be it a Form or a PictureBox):

    In the code below, I've colorized the 4 Gradient-PointVector-Parameters (x1/y1, x2/y2):
    - in red (for the already shown TLBR-Gradient)
    - in blue (for a gradient-direction switch to TRBL)
    - the GradientConstruction-line, where these passed arguments are applied, I've marked bold

    Code:
    Private Sub Form_Load()
      Caption = "Click me"
    End Sub
    
    Private Sub Form_Click()
      Dim WPxl: WPxl = Me.ScaleX(Me.ScaleWidth, Me.ScaleMode, vbPixels)
      Dim HPxl: HPxl = Me.ScaleY(Me.ScaleHeight, Me.ScaleMode, vbPixels)
     
      SetGradientPictureOn Me, WPxl, HPxl, vbRed, vbYellow, _
                           0, 0, WPxl, HPxl
      MsgBox "you see a Top-Left(red) to Bottom-Right(yellow) gradient"
    
      SetGradientPictureOn Me, WPxl, HPxl, vbRed, vbYellow, _
                           WPxl, 0, 0, HPxl
      MsgBox "and now a Top-Right(red) to Bottom-Left(yellow) gradient"
    End Sub
    
    Sub SetGradientPictureOn(Dest As Object, WPxls, HPxls, Color1, Color2, x1, y1, x2, y2)
      Dim CC As cCairoContext, Grd As cCairoPattern
      Set CC = Cairo.CreateSurface(WPxls, HPxls).CreateContext
     
      Set Grd = Cairo.CreateLinearPattern(x1, y1, x2, y2)
          Grd.AddColorStop 0, Color1
          Grd.AddColorStop 1, Color2
      CC.Paint 1, Grd
      
      Set Dest.Picture = CC.Surface.Picture
    End Sub
    HTH

    Olaf

  15. #15

    Thread Starter
    Fanatic Member AccessShell's Avatar
    Join Date
    Oct 2013
    Posts
    790

    Re: Diagional Color Gradient

    Thank you. I have not studied it, or tried it yet, But I imagine that this could work for any angle. especially vertial and horizontal. I just would would adjust the red or blue values.

  16. #16
    PowerPoster
    Join Date
    Jun 2013
    Posts
    7,219

    Re: Diagional Color Gradient

    Quote Originally Posted by AccessShell View Post
    Thank you. I have not studied it, or tried it yet, But I imagine that this could work for any angle. especially vertial and horizontal. I just would would adjust the red or blue values.
    Yep, you got it...

    The 4 "text-colored red or blue"-arguments are just two points,
    which describe a "gradient-direction-vector".

    Below is a Form_Click replacement, which shows:
    - (in red) the 4 arguments for a left-to-right horizontal gradient
    - (in blue) the 4 arguments for a top-to-bottom vertical gradient

    Code:
    Private Sub Form_Click()
      Dim WPxl: WPxl = Me.ScaleX(Me.ScaleWidth, Me.ScaleMode, vbPixels)
      Dim HPxl: HPxl = Me.ScaleY(Me.ScaleHeight, Me.ScaleMode, vbPixels)
     
      SetGradientPictureOn Me, WPxl, HPxl, vbRed, vbYellow, _
                           0, 0, WPxl, 0
      MsgBox "you see a Left(red) to Right(yellow) gradient"
    
      SetGradientPictureOn Me, WPxl, HPxl, vbRed, vbYellow, _
                           0, 0, 0, HPxl
      MsgBox "and now a Top(red) to Bottom(yellow) gradient"
    End Sub
    Olaf

  17. #17

    Thread Starter
    Fanatic Member AccessShell's Avatar
    Join Date
    Oct 2013
    Posts
    790

    Re: Diagional Color Gradient

    The code worked like a charm. Name:  Composite.jpg
Views: 168
Size:  11.9 KB

    Thanks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width