-
Nov 30th, 2017, 05:24 PM
#1
Thread Starter
Lively Member
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.
-
Nov 30th, 2017, 06:02 PM
#2
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
-
Nov 30th, 2017, 06:32 PM
#3
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.
-
Dec 1st, 2017, 02:36 AM
#4
Thread Starter
Lively Member
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.
-
Dec 1st, 2017, 10:01 AM
#5
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
-
Dec 1st, 2017, 10:57 AM
#6
Thread Starter
Lively Member
Re: Dissolve from green to yellow?
Although your code gets the job done I am smitten with Sitten Spynne's missive.
(:
Gotta try it.....
-
Dec 1st, 2017, 11:47 AM
#7
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.
-
Dec 1st, 2017, 12:02 PM
#8
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
-
Dec 1st, 2017, 12:23 PM
#9
Thread Starter
Lively Member
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.
-
Dec 1st, 2017, 12:26 PM
#10
Thread Starter
Lively Member
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.
-
Dec 1st, 2017, 12:49 PM
#11
Re: Dissolve from green to yellow?
Originally Posted by GarySut
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
-
Dec 1st, 2017, 02:32 PM
#12
Re: Dissolve from green to yellow?
Originally Posted by GarySut
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.
-
Dec 1st, 2017, 03:00 PM
#13
Thread Starter
Lively Member
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?
-
Dec 1st, 2017, 03:25 PM
#14
Re: Dissolve from green to yellow?
Originally Posted by GarySut
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.
-
Dec 1st, 2017, 04:01 PM
#15
Re: Dissolve from green to yellow?
Originally Posted by GarySut
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
-
Dec 1st, 2017, 05:37 PM
#16
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.
-
Dec 1st, 2017, 09:46 PM
#17
Thread Starter
Lively Member
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.....
-
Dec 2nd, 2017, 05:33 PM
#18
Re: Dissolve from green to yellow?
That ought to toughen them up.
My usual boring signature: Nothing
-
Dec 5th, 2017, 04:13 AM
#19
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:
' Private Function BlendColors(ByVal color1 As Color, ByVal color2 As Color, ByVal alpha As Double) As Color Return Color.FromArgb((color1.R * (1 - alpha)) + (color2.R * alpha), (color1.G * (1 - alpha)) + (color2.G * alpha), (color1.B * (1 - alpha)) + (color2.B * alpha)) End Function
You could test this using a Timer to fade one color into the next like this:-
vbnet Code:
' Private Sub Timer1_Tick(sender As System.Object, e As System.EventArgs) Handles Timer1.Tick Me.BackColor = BlendColors(Color.Green, Color.Yellow, _currentAlpha) 'The bigger the value, the faster transition from one color 'to the other takes. Adjust this value until you get a 'speed you like. Personally, I find 0.03 to be pleasing. It's not 'to fast or too slow. But that's just my personal opinion _currentAlpha += 0.03 If _currentAlpha > 1 Then _currentAlpha = 0 Timer1.Enabled = False End If End Sub
The above code would correctly transition from Green to Yellow.
Originally Posted by Shaggy Hiker
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.
-
Dec 5th, 2017, 04:44 AM
#20
Thread Starter
Lively Member
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.
-
Dec 5th, 2017, 05:03 AM
#21
Thread Starter
Lively Member
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.
-
Dec 5th, 2017, 05:56 AM
#22
Addicted Member
Re: Dissolve from green to yellow?
Originally Posted by GarySut
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
-
Dec 5th, 2017, 06:09 AM
#23
Thread Starter
Lively Member
Re: Dissolve from green to yellow?
Corectamundo...
That was it.
I was thinking the error was elsewhere....
-
Dec 5th, 2017, 07:02 AM
#24
Re: Dissolve from green to yellow?
Here's the whole project, ColorBlendingSimple.zip.
Just click the button on the Form.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|