Need help with a gradual lerpColor fading function.

Programming Questions

el_brendo

Need help with a gradual lerpColor fading function.

in Programming Questions • 2 years ago

Hey guys, first year student currently struggling my way through one of my early assignments and have hit a serious stumbling block.

I know it mustn't be that hard, but I have spent hours trying to solve how to get my ball to hit the wall of its respective color change to that color then have it gradually fade back to the neutral color two diameters away from the wall.

Any help would be much appreciated, I've tried so many methods and none have worked correctly. So I give you my code, the clean slate, and would very much welcome all and any help.

Thankyou.

float xPos, yPos, xSpeed, ySpeed, posMorpher;

float top, right, left, bottom;

float radius;

float yBumperWidth, yBumperHeight, xBumperWidth, xBumperHeight;

float fMorpher, sMorpher;

color rC, lC, bC, tC, nC;

int balls = 20;

int rCounter = 00;

int lCounter = 00;

int tCounter = 00;

int bCounter = 00;

void setup()

{

size(800,600);

smooth();

noStroke();

xPos = width/2;

yPos = height/2;

xSpeed = 5.0f;

ySpeed = 5.0f;

frameRate(40);

}

void draw()

{

background(0);

top = 0;

bottom = height;

left = 0;

right = width;

radius = (width + height)/25;

yBumperWidth = (width + height)/40;

yBumperHeight = (width + height)/15;

xBumperWidth = (width + height)/15;

xBumperHeight = (width + height)/40;

rC = color(242, 68, 68);

lC = color(35,65,240);

bC = color(90,0,180);

tC = color(35,255,18);

nC = color(250,250,250);

xPos += xSpeed;

yPos += ySpeed;

//-------------------------------------------------------------------------theBall

fill(255);

ellipse(xPos, yPos, (width + height)/25, (width + height)/25);

//----------------------------------------------------------------------theBumpers

rectMode(CENTER);

fill(lC);

rect(yBumperWidth/2, yPos, yBumperWidth, yBumperHeight);

fill(rC);

rect(right-((yBumperWidth)/2), yPos, yBumperWidth, yBumperHeight);

fill(tC);

rect(xPos, xBumperHeight/2, xBumperWidth, xBumperHeight);

fill(bC);

rect(xPos, bottom - (xBumperHeight/2), xBumperWidth, xBumperHeight);

//wallBounce

xPos = constrain(xPos, left + radius/2 + yBumperWidth, right - radius/2 - yBumperWidth);

if(xPos >= right - radius/2 - yBumperWidth || xPos <= left + radius/2 + yBumperWidth)

{

xSpeed = -xSpeed;

}

yPos = constrain(yPos, top + radius/2 + xBumperHeight, bottom - radius/2 - xBumperHeight);

if(yPos >= bottom - radius/2 - xBumperHeight || yPos <= top + radius/2 + xBumperHeight)

{

ySpeed = -ySpeed;

}

//colorChanger

//---------------------------------------------------rightChange

if (xPos >= right - radius/2 - yBumperWidth)

{

rCounter += 1;

println("Right Bumper hit = " + rCounter + " times");

}

//----------------------------------------------------leftChange

if (xPos <= left + radius/2 + yBumperWidth)

{

//here is where I need help with the lerpColor function. I think this is where it should sit.

lCounter += 1;

println("Left Bumper hit = " + lCounter + " times");

}

//---------------------------------------------------bottomChange

if (yPos >= bottom - radius/2 - xBumperHeight)

{

bCounter += 1;

println("Bottom Bumper hit = " + bCounter + " times");

}

//------------------------------------------------------topChange

if (yPos <= top + radius/2 + xBumperHeight)

{

tCounter += 1;

println("Top Bumper hit = " + tCounter + " times");

}

Replies(4)

nardove

Re: Need help with a gradual lerpColor fading function.

2 years ago

To change the color of the ball when it hits a wall just do:

1- Create a ballColor variable and initialize it

color rC, lC, bC, tC, nC, ballColor;

and in the stup()

ballColor = nC;

2- Change the ballColor value to the wall color when it hits

if (xPos <= left + radius/2 + yBumperWidth)
{
//here is where I need help with the lerpColor function. I think this is where it should sit.
lCounter += 1;
println("Left Bumper hit = " + lCounter + " times");
ballColor = lC;
}
//---------------------------------------------------bottomChange
if (yPos >= bottom - radius/2 - xBumperHeight)
{
bCounter += 1;
println("Bottom Bumper hit = " + bCounter + " times");
ballColor = bC;
}

Do the same for the rest of you if statements

3- To change the color back (not very accurate but may get you started) get the current ballColor values and then increment or decrement the value until it reach the desired color, adjust the colorChangeFactor to speed up or down the color change rate

//-------------------------------------------------------------------------theBall
int r = (int)red(ballColor);
int g = (int)green(ballColor);
int b = (int)blue(ballColor);
int colorChangeFactor = 5;
// gradually change red color
if ( red(ballColor) < red(nC) ) r += colorChangeFactor;
else if ( red(ballColor) > red(nC) ) r -= colorChangeFactor;
// gradually change green color
if ( green(ballColor) < green(nC) ) g += colorChangeFactor;
else if ( green(ballColor) > green(nC) ) g -= colorChangeFactor;
// gradually change blue color
if ( blue(ballColor) < blue(nC) ) b += colorChangeFactor;
else if ( blue(ballColor) > blue(nC) ) b -= colorChangeFactor;
ballColor = color(r, g, b);
fill(ballColor);
ellipse(xPos, yPos, (width + height)/25, (width + height)/25);

I will suggest to move this block of code

rC = color(242, 68, 68);
lC = color(35,65,240);
bC = color(90,0,180);
tC = color(35,255,18);
nC = color(250,250,250);

To the setup method, unless you want to change the colors on every frame, there is no need to have them in the draw() this will also help your framerate if your sketch gets more complicated

Also check toxiclibs colorutils library for a more sophisticated color management solution

Hope that helps!

- rS

el_brendo

Re: Re: Need help with a gradual lerpColor fading function.

2 years ago

Thankyouu, that helps so very much.

I followed your advice and placed the colors in the setup() area, and the wall hit is fine (I had that working in the past, thought it must have needed to go differently to get that color fade. The only problem I had was with the third section.

With this part:

int r = (int)red(ballColor);

Is that exactly how it is meant to be written? 'red' is a function itself and as a result can it be used as a naming function. Is that where I should place the three color values. Sorry, I don't understand the syntax of that line. Why is the int in brackets before red?

And I understand the logic of

if ( red(ballColor) < red(nC) ) r += colorChangeFactor;

else if ( red(ballColor) > red(nC) ) r -= colorChangeFactor;

but does this allow it to reset to red on each bumper hit?

I know I am asking a lot here, so thankyou.

nardove

Re: Need help with a gradual lerpColor fading function.

2 years ago

What this line of code does

int r = (int)red(ballColor);

is to get the red value out of the color, in this case ballColor, the (int) is to get the integer value that the red() function returns(red, green and blue methods return a float value), this is not mandatory but since I work with integer values I want to get the value as int, for a better understanding of the color type and its related functions check the Processing reference page.

Regarding the if statement its only purpose is to change the color back to its original state, cant remember if that is your goal but that is essentially all it does, if the color value is bigger decrement until it reach its bounds else increment... we have to do it for each color red, green and blue them we change the value of ballColor to the new RGB values, hope that make sense

There are many other solutions to achieve your goals, this is just the first that pop my mind to illustrate how to change the color back, you can try to change all those if else statements and use the lerpColor()

- rS

el_brendo

Re: Re: Need help with a gradual lerpColor fading function.

2 years ago

Ok, I couldn't quite figure out what you meant, but I managed to figure out the lerpFunction();

I'll show you where its at.

int balls = 100;

float[] xPos = new float[balls];

float[] yPos = new float[balls];

float xSpeed, ySpeed, posMorpher;

float top, right, left, bottom;

float radius;

float yBumperWidth, yBumperHeight, xBumperWidth, xBumperHeight;

float fMorpher, sMorpher;

color rC, lC, bC, tC, nC, ballColor;

float[] xPosBalls = new float[20];

float[] yPosBalls = new float[20];

float lerpNeutral, lerpSpeed;

int rCounter = 00;

int lCounter = 00;

int tCounter = 00;

int bCounter = 00;

void setup()

{

size(800,600);

smooth();

xSpeed = 5.0f;

ySpeed = 5.0f;

lerpNeutral = 0;

lerpSpeed = .1;

for (int i = 0; i < balls; i ++)

{

xPos[i] = width/2;

yPos[i] = height/2;

println (xPos[i]);

}

frameRate(40);

rC = color(242, 68, 68);

lC = color(35,65,240);

bC = color(90,0,180);

tC = color(35,255,18);

nC = color(250,250,250);

ballColor = nC;

}

void draw()

{

background(0);

top = 0;

bottom = height;

left = 0;

right = width;

radius = (width + height)/25;

yBumperWidth = (width + height)/40;

yBumperHeight = (width + height)/15;

xBumperWidth = (width + height)/15;

xBumperHeight = (width + height)/40;

//-------------------------------------------------------------------------theBall

fill(ballColor);

ellipse(xPos[1], yPos[1], (width + height)/25, (width + height)/25);

xPos[1] += xSpeed;

yPos[1] += ySpeed;

//----------------------------------------------------------------------theBumpers

rectMode(CENTER);

fill(lC);

rect(yBumperWidth/2, yPos[1], yBumperWidth, yBumperHeight);

fill(rC);

rect(right-((yBumperWidth)/2), yPos[1], yBumperWidth, yBumperHeight);

fill(tC);

rect(xPos[1], xBumperHeight/2, xBumperWidth, xBumperHeight);

fill(bC);

rect(xPos[1], bottom - (xBumperHeight/2), xBumperWidth, xBumperHeight);

//wallBounce

xPos[1] = constrain(xPos[1], left + radius/2 + yBumperWidth, right - radius/2 - yBumperWidth);

if(xPos[1] >= right - radius/2 - yBumperWidth || xPos[1] <= left + radius/2 + yBumperWidth)

{

xSpeed = -xSpeed;

}

yPos[1] = constrain(yPos[1], top + radius/2 + xBumperHeight, bottom - radius/2 - xBumperHeight);

if(yPos[1] >= bottom - radius/2 - xBumperHeight || yPos[1] <= top + radius/2 + xBumperHeight)

{

ySpeed = -ySpeed;

}

lerpNeutral =+ lerpSpeed;

//colorChanger

//---------------------------------------------------rightChange

if (xPos[1] >= right - radius/2 - yBumperWidth)

{

rCounter += 1;

println("Right Bumper hit = " + rCounter + " times");

}

if ((xPos[1] <= right - radius/2 - yBumperWidth) && (xPos[1] > right - (radius/2) * 6 - yBumperWidth))

{

ballColor = lerpColor(rC, nC, norm(xPos[1], right - radius/2 - yBumperWidth, right - (radius/2) * 6 - yBumperWidth));

}

//----------------------------------------------------leftChange

if (xPos[1] <= left + radius/2 + yBumperWidth)

{

lCounter += 1;

println("Left Bumper hit = " + lCounter + " times");

ballColor = lC;

}

if ((xPos[1] >= left + radius/2 + yBumperWidth) && (xPos[1] <= (left + radius/2) * 6 + yBumperWidth))

{

ballColor = lerpColor(lC, nC, norm(xPos[1], left + radius/2 + yBumperWidth, (left + radius/2) * 6 + yBumperWidth));

}

//---------------------------------------------------bottomChange

if (yPos[1] >= bottom - radius/2 - xBumperHeight)

{

bCounter += 1;

println("Bottom Bumper hit = " + bCounter + " times");

ballColor = bC;

}

if ((yPos[1] <= bottom - radius/2 - xBumperHeight) && (yPos[1] >= bottom - (radius/2) * 6 - xBumperHeight))

{

ballColor = lerpColor(bC, nC, norm(yPos[1], bottom - radius/2 - xBumperHeight, bottom - (radius/2) * 6 - xBumperHeight));

}

//------------------------------------------------------topChange

if (yPos[1] <= top + radius/2 + xBumperHeight)

{

tCounter += 1;

println("Top Bumper hit = " + tCounter + " times");

ballColor = tC;

}

//topFadeEffect

if ((yPos[1] >= top + radius/2 + xBumperHeight) && (yPos[1] <= top + (radius/2) * 6 + xBumperHeight))

{

ballColor = lerpColor(tC, nC, norm(yPos[1], top + radius/2 + xBumperHeight, top + (radius/2) * 6 + xBumperHeight));

}

The only problem is, I need to make it so it lerp's only after hitting the wall. Any thoughts?

Top Reply