# How do I change the color of the rectangle after hitting a bounce?

For a school project I am learning P5.Js at the moment. one of my assignments is that I have a moving rectangle. It bounces of the walls from the xPosition and yPosition, so it can go any direction.

My assignment is that I need to make the square green after it hits the wall (any wall) 4 times. I struggle a bit finding out how to do it. Someone that could give a helping hand how to implement it? also how could I make sure the square won’t go slightly off-canvas when hitting a specific wall? (I used -50 for the height and width in the ‘if’ condition to counter it, but is there any other way?)

``````var xPositie;
var yPositie;
var richtingX;
var richtingY;

function setup () {
createCanvas (500, 400);

// het kiezen van de positie waar het vierkantje komt. richting X voor de snelheid in de horizontale richting, Y voor in de verticale richting

// random() om een random positie te kiezen bij iedere refresh
xPositie = random(0, 500);
yPositie = random(0, 400);
richtingX = 3;
richtingY = 3;
}

function draw () {

//achtergrond grijs
background (175);
fill(255, 0, 0);

//geef rectangle de random positie
rect(xPositie, yPositie, 60, 60);

//geef rectangle de snelheden
xPositie += richtingX;
yPositie += richtingY;

//als xPositie meer is dan de breedte of minder dan 0, wordt hij terug gekaatst, zelfde voor yPositie.

if (xPositie >= width - 50 || xPositie <= 0) {
richtingX = -richtingX;

}

if (yPositie >= height - 50|| yPositie <= 0) {
richtingY = -richtingY;
}
}
``````

any help is appreciated!

You want to do something after 4 bounces, right?

So it makes sense to have a variable that tracks how many bounces have happened.

When the sketch starts, no bounces have happened.

When the ball changes directions, a bounce has happened, so add one to the number of bounces.

Now that you know how many bounces there are, can you write a condition to change the fill color `if` there have been enough bounces?

Thank you for mention so. I managed to add it in.

I hate it how simple things like this sometimes not pop up in my mind, until someone gives me a mention about it. I change the code into the following :

``````var xPositie;
var yPositie;
var richtingX;
var richtingY;
var bounce;
var rectColor;

function setup () {
createCanvas (500, 400);

// het kiezen van de positie waar het vierkantje komt. richting X voor de snelheid in de horizontale richting, Y voor in de verticale richting

// random() om een random positie te kiezen bij iedere refresh
xPositie = random(0, 500);
yPositie = random(0, 400);
richtingX = 3;
richtingY = 3;

//rectColor variabele nodig inplaats van pure RGB code voor de verandering.

rectColor = color(255, 0, 0);

//bounce - het aantal x gestuiterd. begint bij 0
bounce = 0;
}

function draw () {

//achtergrond grijs
background (175);
fill(rectColor);

//geef rectangle de random positie
rect(xPositie, yPositie, 60, 60);

//geef rectangle de snelheden
xPositie += richtingX;
yPositie += richtingY;

//als xPositie meer is dan de breedte of minder dan 0, wordt hij terug gekaatst, zelfde voor yPositie.

if (xPositie >= width - 50 || xPositie <= 0) {
richtingX = -richtingX;
bounce = bounce + 1;

}

if (yPositie >= height - 50|| yPositie <= 0) {
richtingY = -richtingY;
bounce = bounce + 1
}

if (bounce == 4) {
rectColor = color(0, 255, 0);
}
}
``````

And this seemed to work perfectly