koobas.hobune.stream
Interpolating from one color to the other repeatedly
What I want to do: I am trying to interpolate the color of a cube from green to red and back. Between each of these interpolations is a 4 second pause.
What I am seeing: When the game starts the cube remains green for 4 seconds then suddenly shifts to red. Afterwards it interpolates from red to green and back but without the 4 second pause.
My Code
private const float TRANSITION_PERIOD = 1;
private const float GREEN_TO_RED = 2;
private const float RED_TO_GREEN = 3;
private float playerAnimState = 0;
private float colorDuration = 4;
private float mLerp = 0;
private float time = 0;
private Color playerColor;
Start function:
renderer.material.color = Color.green;
playerAnimState = TRANSITION_PERIOD;
Update function:
playerColor = this.renderer.material.color;
if ( playerAnimState == TRANSITION_PERIOD )
{
time += Time.deltaTime;
if ( time >= colorDuration )
{
time = 0;
if ( playerColor == Color.green )
{
playerAnimState = GREEN_TO_RED;
}
else
{
playerAnimState = RED_TO_GREEN;
}
}
}
else if ( playerAnimState == GREEN_TO_RED )
{
mLerp = Mathf.PingPong( Time.time, interpolateDuration ) / interpolateDuration;
renderer.material.color = Color.Lerp ( Color.green, Color.red, mLerp );
playerColor = renderer.material.color;
if ( playerColor == Color.red )
{
playerAnimState = TRANSITION_PERIOD;
}
}
else if ( playerAnimState == RED_TO_GREEN )
{
mLerp = Mathf.PingPong( Time.time, interpolateDuration ) / interpolateDuration;
renderer.material.color = Color.Lerp ( Color.red, Color.green, mLerp );
playerColor = renderer.material.color;
if ( playerColor == Color.green )
{
playerAnimState = TRANSITION_PERIOD;
}
}
Thanks for the help. I have gone through my logic on paper and it seems correct. I suspect it may have something to do with Time but am not sure what could be causing it to misbehave. I have tried separating this code from the overall project but this problem still occurs.
Thanks for the link. I'm going to spend a little more time seeing if I can figure this out. If not I'll go right to Fades. Thanks.
I might be late to the party, but why not both Lerp and PingPong?
var pingPong = Mathf.PingPong(Time.time, 1);
var color = Color.Lerp(BaseColor, InterpolatingColor, pingPong);
image.color = color;
I think your solution may be overly complicated. To Lerp you want to move the third Color.Lerp parameter from 0 to 1 over the time period. I don't think you need to use PingPong for this. I bet if you attached a debugger you'd be seeing mLerp getting set to some funky value that messes your code up.
Try something like this.
float duration = interpolateDuration;
if ( playerAnimState == GREEN_TO_RED )
{
duration -= Time.deltaTime;
mLerp = (interpolateDuration - duration ) / interpolateDuration;
renderer.material.color = Color.Lerp ( Color.green, Color.red, mLerp );
playerColor = renderer.material.color;
if ( mLerp > = 1)
{
playerAnimState = TRANSITION_PERIOD;
duration = 1.0f;
}
}
I tried this method with and without PingPong and printed mLerp both times. When I did use PingPong the square changed from green to red after 4 seconds. However it never changed back to green. mLerp was: 0 (until it changed to red), .992xxxx, .996xxxx, .993xxxx, .995xxxx
It repeated this pattern where the first two digits stayed .99.
When I tried it without PingPong mLerp was: 0 (for 4 seconds), .0522xxxx
The digits beyond .0522 would increase/decrease.
