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

p5.js Coding Questions
1

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! :slight_smile:

2

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?

3

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 :slight_smile: