Results 1 to 24 of 24

Thread: Dissolve from green to yellow?

  1. #1

    Thread Starter
    Lively Member
    Join Date
    Apr 2017
    Posts
    72

    Dissolve from green to yellow?

    Using the code:
    btnPeg.BackColor = System.Drawing.Color.FromArgb(R, G, B)
    I would like to see the code that will dissolve the backcolor from green to yellow.

  2. #2
    Super Moderator Shaggy Hiker's Avatar
    Join Date
    Aug 2002
    Location
    Idaho
    Posts
    38,989

    Re: Dissolve from green to yellow?

    Looks like all you have to do is increase red from 0 to 255, so just decide how many steps you want, and how fast.

    You'll need a timer to do this, because you need to waste a whole bunch of time. For example, if you want the change to take two seconds, then you have 2000 milliseconds to change one value from 0 to 255, and you probably don't want the interval to be less than 100, so if we make it 100, you have 20 ticks in 2000 milliseconds. That would mean that each interval would increase the R by 13 (though the last one will be short), so the code in the timer tick would look like this:
    Code:
    'Outside the tick:
    Private mRedValue = 0
    
    'Inside the tick event handler
    mRedValue += 13
    If mRedValue>255 then
     whateverThisTimerIs.Stop
     mRedValue = 255
    End If
    btnPeg.BackColor = System.Drawing.Color.FromArgb(mRedValue, 255, 0)
    My usual boring signature: Nothing

  3. #3
    You don't want to know.
    Join Date
    Aug 2010
    Posts
    4,578

    Re: Dissolve from green to yellow?

    The traditional thing to do is to use some kind of interpolation. If you're using WPF you can do this for free. You end up writing something like:
    Code:
    <ColorAnimation From="{Color.Green}" To="{Color.Yellow} Duration="00:00:02" />
    But don't get me into the page-long "Why people don't use WPF". It's not that it's bad, it's that MS scared everyone away.

    What WPF is doing under the covers is "interpolating". The idea here is you want to move a number from 0 to 255 over some duration.

    If we express "where am I in the duration?" as a number from 0 to 1, then we can figure out what the Red value should be with this formula:
    Code:
    Dim r As Double = durationPercent * 255
    So for a 2 second duration, it's 0 at 0 seconds, 128 at 1 second (0.5), and 255 at 2 seconds (1.0).

    How do we pull that off?

    Here's a skeleton for the infrastructure.
    Code:
    Private _animationTicker As StopWatch
    
    ' The timer should have an interval of about 50ms. That's ~20FPS, and about
    ' the best you can expect out of WinForms. I have tried and tried to get
    ' more than 20FPS and it's just not consistent, even on beefy machines.
    Private _animationTimer As New Timer()
    
    Private _duration As TimeSpan = TimeSpan.FromSeconds(2)
    
    Public Sub StartAnimation()
    
        ' <Set the color to the "start" color.>
    
        _animationTimer.Start()
        _animationTicker.Start()
    
    End Sub
    
    Private Sub WhenTimerTicks(...)
        
        Dim redComponent = GetRedComponent()
        ' <Set the color to a new color with redComponent.>    
    
        If _animationTicker.Elapsed > _duration Then
            ' <set the color to the final color>
            _animationTimer.Stop()
            _animationTicker.Stop()
        End If
    
    End Sub
    
    Private Function GetRedComponent() As Integer
        Dim elapsed = _animationTicker.ElapsedMilliseconds
        Dim total = _duration.TotalMilliseconds
        Dim offset = elapsed / total
    
        Return 255 * offset
    End Function
    This answer is wrong. You should be using TableAdapter and Dictionaries instead.

  4. #4

    Thread Starter
    Lively Member
    Join Date
    Apr 2017
    Posts
    72

    Re: Dissolve from green to yellow?

    Thanks for the quick responses. Shaggy Hiker code is nice ad easy. I did not realize that all I had do was to change the red value. Sitten Spynne's code does look intriguing.

  5. #5
    Super Moderator Shaggy Hiker's Avatar
    Join Date
    Aug 2002
    Location
    Idaho
    Posts
    38,989

    Re: Dissolve from green to yellow?

    Frankly, I didn't realize that, either, and wouldn't have thought it was correct. However, I opened up Paint.NET and looked at the difference between full green (0,255,0), and full yellow, which proved to be 255,255,0), then looked at a few colors along the transition, and it became clear that the change in red was the only difference.
    My usual boring signature: Nothing

  6. #6

    Thread Starter
    Lively Member
    Join Date
    Apr 2017
    Posts
    72

    Re: Dissolve from green to yellow?

    Although your code gets the job done I am smitten with Sitten Spynne's missive.
    (:

    Gotta try it.....

  7. #7
    You don't want to know.
    Join Date
    Aug 2010
    Posts
    4,578

    Re: Dissolve from green to yellow?

    Here's a WPF window that, when loaded, starts to pulse its background color between green and yellow. Similar concepts can be applied to individual controls.

    Code:
    <Window x:Class="MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:WpfApp6"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525"
            x:Name="myWindow">
        <Grid>
            <Grid.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <BeginStoryboard>
                        <Storyboard Duration="0:0:2" 
                                    RepeatBehavior="Forever"
                                    AutoReverse="True">
                            <ColorAnimation From="Green" To="Yellow"
                                Storyboard.TargetName="myWindow"
                                Storyboard.TargetProperty="Background.Color" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Grid.Triggers>
        </Grid>
    </Window>
    This answer is wrong. You should be using TableAdapter and Dictionaries instead.

  8. #8
    Super Moderator Shaggy Hiker's Avatar
    Join Date
    Aug 2002
    Location
    Idaho
    Posts
    38,989

    Re: Dissolve from green to yellow?

    I have a few programs that pulses through ALL colors. For R, G, and B, I either add or subtract a small prime number, but not the same prime number for any of those three. So, I might use 5 for R, 7 for G, and 11 for B. Each timer tick, the small prime is added to the color component, and if it takes the component over 255, the sign is flipped and the remainder (now negative) is added in.

    I have not taken the time to prove that this technique will eventually hit EVERY possible color in the 24-bit color spectrum, but it seems likely that it either will, or will get mighty close. In any case, the result is a stoner trap: The item that is showing the colors, cycles through colors in a hypnotic, never quire repeating, sequence. It WILL repeat, of course, eventually, though it may take a VERY long time.
    My usual boring signature: Nothing

  9. #9

    Thread Starter
    Lively Member
    Join Date
    Apr 2017
    Posts
    72

    Re: Dissolve from green to yellow?

    I have been using:

    Code:
       Dim R, G, B As Integer
            For I As Integer = 1 To 15 'one cycle for each peg
                R = 1 + (254 * Rnd())
                G = 1 + (254 * Rnd())
                B = 1 + (254 * Rnd())
                btnPeg(I).BackColor = System.Drawing.Color.FromArgb(R, G, B)
            Next
    It works well enough that it doesn't matter of all colors get represented.

  10. #10

    Thread Starter
    Lively Member
    Join Date
    Apr 2017
    Posts
    72

    Re: Dissolve from green to yellow?

    I know WPF with a T instead of a P, are they similar (:

    I experimented but just got errors.
    Where does the code go.
    Tell me where to put it....
    Last edited by GarySut; Dec 1st, 2017 at 12:54 PM.

  11. #11
    Super Moderator Shaggy Hiker's Avatar
    Join Date
    Aug 2002
    Location
    Idaho
    Posts
    38,989

    Re: Dissolve from green to yellow?

    Quote Originally Posted by GarySut View Post
    I have been using:

    Code:
       Dim R, G, B As Integer
            For I As Integer = 1 To 15 'one cycle for each peg
                R = 1 + (254 * Rnd())
                G = 1 + (254 * Rnd())
                B = 1 + (254 * Rnd())
                btnPeg(I).BackColor = System.Drawing.Color.FromArgb(R, G, B)
            Next
    It works well enough that it doesn't matter of all colors get represented.
    That would bounce the colors around randomly. What I was doing was a steady, smooth, transition from one color to the next. I'm not changing any one value very much each time, so the colors cycle hypnotically.
    My usual boring signature: Nothing

  12. #12
    You don't want to know.
    Join Date
    Aug 2010
    Posts
    4,578

    Re: Dissolve from green to yellow?

    Quote Originally Posted by GarySut View Post
    I know WPF with a T instead of a P, are they similar (:

    I experimented but just got errors.
    Where does the code go.
    Tell me where to put it....
    WPF is the replacement for Windows Forms. Microsoft asked people to start using it somewhere around 2010 or so. Since it's a different framework, you have to make a new project type. Instead of making a "Windows Forms application", you have to make a "WPF application".

    When you do that, you'll end up in a file named "Form1.xaml". XAML is an XML-like markup language used to define object graphs in WPF. More specifically, the object graph a XAML file describes is "the visual tree" of the application, which means "the UI". There are a lot of clever ways to express "do this thing" via XAML, so sometimes you can pull off a trick like "animate the color when a button is clicked" without writing any VB code.

    This isn't a full-fledged application so much as a demonstration that animation's a native feature in WPF, rather than something that must be implemented manually.
    This answer is wrong. You should be using TableAdapter and Dictionaries instead.

  13. #13

    Thread Starter
    Lively Member
    Join Date
    Apr 2017
    Posts
    72

    Re: Dissolve from green to yellow?

    I fully understand it is a demo but I would like to see it inaction and then twerk it to my needs.

    I did create the WPF, saw the Form1.AMXL and then clicked on View Code. I used copy/paste to place the code suggested.
    Lotza errors....
    Objects missing?
    How is the code implemented?

  14. #14
    You don't want to know.
    Join Date
    Aug 2010
    Posts
    4,578

    Re: Dissolve from green to yellow?

    Quote Originally Posted by GarySut View Post
    I fully understand it is a demo but I would like to see it inaction and then twerk it to my needs.

    I did create the WPF, saw the Form1.AMXL and then clicked on View Code. I used copy/paste to place the code suggested.
    Lotza errors....
    Objects missing?
    How is the code implemented?
    You made a mistake when you clicked on "View Code", possibly.

    I believe the default state of the WPF designer puts two tabs at the bottom that say "Design" and "XAML" and expects you to swap between the two. This is a stupid default because very few people use the drag-and-drop designer in WPF, we prefer to write XAML. This was a smart default in 2010 when the XAML designer crashed every 45 seconds, but they fixed that long ago.

    At the bottom-right of the document panel, you should see three buttons. One looks kind of like "|||". The other looks kind of like "|-|". The third looks like two up arrows. Push that up arrow one. That puts the designer in a state where the designer is at the top, and the XAML is visible beneath it. This is how WPF developers tend to work. That Window with the XAML in it is where you should paste the XAML. There's a tiny bit of it that should change based on your project, but it's unused in this example so I doubt it would cause an error.

    If you try to paste XAML into a .vb file it won't work, because XAML isn't VB.
    This answer is wrong. You should be using TableAdapter and Dictionaries instead.

  15. #15
    Super Moderator Shaggy Hiker's Avatar
    Join Date
    Aug 2002
    Location
    Idaho
    Posts
    38,989

    Re: Dissolve from green to yellow?

    Quote Originally Posted by GarySut View Post
    I fully understand it is a demo but I would like to see it inaction and then twerk it to my needs.
    Now THERE's a visual I didn't need.
    My usual boring signature: Nothing

  16. #16
    Sinecure devotee
    Join Date
    Aug 2013
    Location
    Southern Tier NY
    Posts
    6,582

    Re: Dissolve from green to yellow?

    LOL. But since he did see its "inaction", why the need to twerk. (I can imagine the floor creaking at work as all the programmers are in their cubicle twerking their code).
    Last edited by passel; Dec 1st, 2017 at 05:40 PM.

  17. #17

    Thread Starter
    Lively Member
    Join Date
    Apr 2017
    Posts
    72

    Re: Dissolve from green to yellow?

    Hey, don't mock me, I am very good with inaction code....

    Yes, I give Twerking demonstrations on weekends.
    That is what I tell my students.
    They have such tender minds.....

  18. #18
    Super Moderator Shaggy Hiker's Avatar
    Join Date
    Aug 2002
    Location
    Idaho
    Posts
    38,989

    Re: Dissolve from green to yellow?

    That ought to toughen them up.
    My usual boring signature: Nothing

  19. #19
    Angel of Code Niya's Avatar
    Join Date
    Nov 2011
    Posts
    8,598

    Re: Dissolve from green to yellow?

    Just thought I'd chime in and say that the correct way to do this would be use alpha blending. You could write a function like this:-
    vbnet Code:
    1. '
    2.     Private Function BlendColors(ByVal color1 As Color, ByVal color2 As Color, ByVal alpha As Double) As Color
    3.  
    4.         Return Color.FromArgb((color1.R * (1 - alpha)) + (color2.R * alpha),
    5.                               (color1.G * (1 - alpha)) + (color2.G * alpha),
    6.                              (color1.B * (1 - alpha)) + (color2.B * alpha))
    7.  
    8.     End Function

    You could test this using a Timer to fade one color into the next like this:-
    vbnet Code:
    1. '
    2.     Private Sub Timer1_Tick(sender As System.Object, e As System.EventArgs) Handles Timer1.Tick
    3.         Me.BackColor = BlendColors(Color.Green, Color.Yellow, _currentAlpha)
    4.  
    5.         'The bigger the value, the faster transition from one color
    6.         'to the other takes. Adjust this value until you get a
    7.         'speed you like. Personally, I find 0.03 to be pleasing. It's not
    8.         'to fast or too slow. But that's just my personal opinion
    9.         _currentAlpha += 0.03
    10.  
    11.         If _currentAlpha > 1 Then
    12.             _currentAlpha = 0
    13.             Timer1.Enabled = False
    14.         End If
    15.     End Sub

    The above code would correctly transition from Green to Yellow.

    Quote Originally Posted by Shaggy Hiker View Post
    Frankly, I didn't realize that, either, and wouldn't have thought it was correct. However, I opened up Paint.NET and looked at the difference between full green (0,255,0), and full yellow, which proved to be 255,255,0), then looked at a few colors along the transition, and it became clear that the change in red was the only difference.
    Using the blending formula I posted, you could blend any two colours without have to do forensics on the colours yourself. It would blend any two colours accurately for any given alpha.
    Last edited by Niya; Dec 5th, 2017 at 04:27 AM.
    Treeview with NodeAdded/NodesRemoved events | BlinkLabel control | Calculate Permutations | Object Enums | ComboBox with centered items | .Net Internals article(not mine) | Wizard Control | Understanding Multi-Threading | Simple file compression | Demon Arena

    Copy/move files using Windows Shell | I'm not wanted

    C++ programmers will dismiss you as a cretinous simpleton for your inability to keep track of pointers chained 6 levels deep and Java programmers will pillory you for buying into the evils of Microsoft. Meanwhile C# programmers will get paid just a little bit more than you for writing exactly the same code and VB6 programmers will continue to whitter on about "footprints". - FunkyDexter

    There's just no reason to use garbage like InputBox. - jmcilhinney

    The threads I start are Niya and Olaf free zones. No arguing about the benefits of VB6 over .NET here please. Happiness must reign. - yereverluvinuncleber

  20. #20

    Thread Starter
    Lively Member
    Join Date
    Apr 2017
    Posts
    72

    Re: Dissolve from green to yellow?

    Easy, Elegant, nice....

    Add "Dim _CurrentAlha as double" and a button to enable the timer.
    I will see if it works with "System.Drawing.Color.FromArgb(R, G, B)" and twerk back.

  21. #21

    Thread Starter
    Lively Member
    Join Date
    Apr 2017
    Posts
    72

    Re: Dissolve from green to yellow?

    Apparently it doesn't, any suggestions?
    I can see why but don't see the fix.

    ' Me.BackColor = BlendColors(System.Drawing.Color.FromArgb(R1, G1, B1), System.Drawing.Color.FromArgb(R2, G2, B2) _CurrentAlpha)
    Last edited by GarySut; Dec 5th, 2017 at 05:17 AM.

  22. #22
    Addicted Member Goggy's Avatar
    Join Date
    Oct 2017
    Posts
    196

    Re: Dissolve from green to yellow?

    Quote Originally Posted by GarySut View Post
    Apparently it doesn't, any suggestions?
    I can see why but don't see the fix.

    ' Me.BackColor = BlendColors(System.Drawing.Color.FromArgb(R1, G1, B1), System.Drawing.Color.FromArgb(R2, G2, B2) _CurrentAlpha)
    Seems to me your missing a comma,

    Code:
    Me.BackColor = BlendColors(System.Drawing.Color.FromArgb(R1, G1, B1), System.Drawing.Color.FromArgb(R2, G2, B2), _CurrentAlpha)
    Utterly useless, but always willing to help

    As a finishing touch god created the dutch

  23. #23

    Thread Starter
    Lively Member
    Join Date
    Apr 2017
    Posts
    72

    Re: Dissolve from green to yellow?

    Corectamundo...
    That was it.

    I was thinking the error was elsewhere....

  24. #24
    Angel of Code Niya's Avatar
    Join Date
    Nov 2011
    Posts
    8,598

    Re: Dissolve from green to yellow?

    Here's the whole project, ColorBlendingSimple.zip.

    Just click the button on the Form.
    Treeview with NodeAdded/NodesRemoved events | BlinkLabel control | Calculate Permutations | Object Enums | ComboBox with centered items | .Net Internals article(not mine) | Wizard Control | Understanding Multi-Threading | Simple file compression | Demon Arena

    Copy/move files using Windows Shell | I'm not wanted

    C++ programmers will dismiss you as a cretinous simpleton for your inability to keep track of pointers chained 6 levels deep and Java programmers will pillory you for buying into the evils of Microsoft. Meanwhile C# programmers will get paid just a little bit more than you for writing exactly the same code and VB6 programmers will continue to whitter on about "footprints". - FunkyDexter

    There's just no reason to use garbage like InputBox. - jmcilhinney

    The threads I start are Niya and Olaf free zones. No arguing about the benefits of VB6 over .NET here please. Happiness must reign. - yereverluvinuncleber

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