Implementing an image when it bounces off the wall it will show which direction its going to

Processing Coding Questions
1

So what im trying to do is when the image bounces of the wall it will show which direction its going to. (my images are arrows btw)

eg if it bounces of the right wall the arrow will point left and vice versa
and if it bounces from the top the arrow will point down and vice versa

what I’m trying to do is implement an index for this. eg

  • index =0; for left side, and
  • index =1; for right side
  • etc.
if(index==0)image(right arrow....
else if (index ==1)image (left arrow....
else if (....

i know I need to implement it into my collision with the wall but I don’t know when or how to do that. if I could get some guidance that would be appreciated…
//allowing images to move around x and y axis and to bounce off walls
void move()
{
x += xSpeed;

if (x > width - x2 )
{
  xSpeed *= -1;
}
if (x < 0)
{
  xSpeed *= -1;
}
y += ySpeed;
if (y > height - y2)
{
  ySpeed *= -1;
}
if (y < 0)
{
  ySpeed *= -1;
}

}

2

You already have all the parts. just need to combine them:

You check for collision and change the movement-direction. thats the place where you can set the index.
example:

// collision with right wall
if (x > width - x2 )
{
  xSpeed *= -1;  // change x-direction
  index = 1;  // set image-index
}
3

ive not set that image 1 = index 1.
or image 2 = index 2
image 3 = index 3.

how would I do that?

4

unless i make a separate variable eg Index1 and make that equal to image1 and then call it once it collides with right wall. Or is there an easier way for this ?

5

class code:

class arrow
{
  //declaring variables that will be used
  PImage img1, img2, img3, img4;
  int x, y;
  int speed;
  int count = 0;

  int xSpeed;
  int ySpeed;
  
  int index;  /// this will chnage to change the direction of the arrow i guess...
  
  int x1 = 0;
  int y1 = 0;
  int x2 = 150;
  int y2 = 75;

  //construc the arrow
  arrow(int x, int y, int dx, int dy)
  {
    this.x = x;
    this.y = y;
    this.xSpeed = dx;
    this.ySpeed = dy;
    //pre loading images in arrow constructor
    img1 = loadImage("Up.png");
    img2 = loadImage("Down.png");
    img3 = loadImage("Left.png");
    img4 = loadImage("Right.png");
  }

  //image changing method
  void render()
  {
    if (count < 10)
    {
      image(img1, x, y);
      img1.resize(150, 75);
    } else if (count < 20)

    {
      image(img2, x, y);
      img2.resize(150, 75);
    } else if (count < 30)

    {
      image(img3, x, y);
      img3.resize(150, 75);
    } else if (count < 40)

    {
      image(img4, x, y);
      img4.resize(150, 75);
    } else count = -1;

    count++;
  }



  //allowing images to move around x and y axis and to bounce off walls
  void move()
  {
    x += xSpeed;

    if (x > width - x2  )
    {
      xSpeed *= -1;
    }
    if (x < 0)
    {
      xSpeed *= -1;
    }
    y += ySpeed;
    if (y > height - y2)
    {
      ySpeed *= -1;
    }
    if (y < 0)
    {
      ySpeed *= -1;
    }
  }
  
  void update() {
    render();
    move();
  }
  
}  //end of class

setup code:

arrow white;
arrow green;

void setup()
{
  size(400, 400);
  white = new arrow(width/2, height/2, 1, 1);
  green = new arrow(width/2, height/2, 3, 2);
 
}


/*Setting background to white so does not leave trail of people
 objects getting their functions from arrow class */
void draw()
{
  background(255);
  white.update();
  green.update();
 
}
6

you already described it above. i thought you had this part done…

well, at the moment you change the image depending on a variable named “count”.
you can do the same thing depending on “index”.

So when collission happens you set “index” to 0, 1, 2 or 3.
Then, in your render() - function, you display the image that belongs to that direction:

//image changing method
  void render()
  {
    if (index == 0)
    {
      image(img1, x, y);
    } 
    else if (index == 1)
    {
      image(img2, x, y);
    }
    [ ... ]

(Btw.: the resize() function should not be called every frame, you can do that once when you load the image.)

7

thank you, I got it working after a few mistakes

1 Like
8

yeah well but your arrow is not only going -> and | (4 directions) but also \ and / (360 degrees of directions)

so in a better world, we had ONE image and rotate the angle so that it points exactly in the direction it flies to…

1 Like
9

truly for a beginner at this, i could have a try but i just fixed it after i figured out when it hits with top it doesnt face any of the directions i want, lol

1 Like
10

it actually might be easier to use rotate(), well ill get back to you if im stuck :slight_smile:

1 Like