# Implementing an image when it bounces off the wall it will show which direction its going to
**URL:** https://discourse.processing.org/t/implementing-an-image-when-it-bounces-off-the-wall-it-will-show-which-direction-its-going-to/25469
**Category:** Coding Questions
**Created:** [November 16, 2020, 7:12pm UTC](https://discourse.processing.org/t/implementing-an-image-when-it-bounces-off-the-wall-it-will-show-which-direction-its-going-to/25469 "2020-11-16T19:12:25Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@TheGullible1](https://discourse.processing.org/u/TheGullible1)
#### Post date: [November 16, 2020, 7:12pm UTC](https://discourse.processing.org/t/implementing-an-image-when-it-bounces-off-the-wall-it-will-show-which-direction-its-going-to/25469/1 "2020-11-16T19:12:25Z")
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.
```auto
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;
}
```
}
```auto
```
---
### Author:  [@benja](https://discourse.processing.org/u/benja)
#### Post date: [November 16, 2020, 7:41pm UTC](https://discourse.processing.org/t/implementing-an-image-when-it-bounces-off-the-wall-it-will-show-which-direction-its-going-to/25469/2 "2020-11-16T19:41:44Z")
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:
```auto
// collision with right wall
if (x > width - x2 )
{
xSpeed *= -1; // change x-direction
index = 1; // set image-index
}
```
---
### Author:  [@TheGullible1](https://discourse.processing.org/u/TheGullible1)
#### Post date: [November 16, 2020, 7:42pm UTC](https://discourse.processing.org/t/implementing-an-image-when-it-bounces-off-the-wall-it-will-show-which-direction-its-going-to/25469/3 "2020-11-16T19:42:52Z")
ive not set that image 1 = index 1.
or image 2 = index 2
image 3 = index 3.
how would I do that?
---
### Author:  [@TheGullible1](https://discourse.processing.org/u/TheGullible1)
#### Post date: [November 16, 2020, 7:46pm UTC](https://discourse.processing.org/t/implementing-an-image-when-it-bounces-off-the-wall-it-will-show-which-direction-its-going-to/25469/4 "2020-11-16T19:46:44Z")
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 ?
---
### Author:  [@TheGullible1](https://discourse.processing.org/u/TheGullible1)
#### Post date: [November 16, 2020, 7:52pm UTC](https://discourse.processing.org/t/implementing-an-image-when-it-bounces-off-the-wall-it-will-show-which-direction-its-going-to/25469/5 "2020-11-16T19:52:35Z")
class code:
```auto
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:
```auto
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();
}
```
---
### Author:  [@benja](https://discourse.processing.org/u/benja)
#### Post date: [November 16, 2020, 9:19pm UTC](https://discourse.processing.org/t/implementing-an-image-when-it-bounces-off-the-wall-it-will-show-which-direction-its-going-to/25469/6 "2020-11-16T21:19:18Z")
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:
```auto
//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.)
---
### Author:  [@TheGullible1](https://discourse.processing.org/u/TheGullible1)
#### Post date: [November 16, 2020, 9:57pm UTC](https://discourse.processing.org/t/implementing-an-image-when-it-bounces-off-the-wall-it-will-show-which-direction-its-going-to/25469/7 "2020-11-16T21:57:53Z")
thank you, I got it working after a few mistakes
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 16, 2020, 10:08pm UTC](https://discourse.processing.org/t/implementing-an-image-when-it-bounces-off-the-wall-it-will-show-which-direction-its-going-to/25469/8 "2020-11-16T22:08:07Z")
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…
---
### Author:  [@TheGullible1](https://discourse.processing.org/u/TheGullible1)
#### Post date: [November 16, 2020, 10:10pm UTC](https://discourse.processing.org/t/implementing-an-image-when-it-bounces-off-the-wall-it-will-show-which-direction-its-going-to/25469/9 "2020-11-16T22:10:27Z")
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
---
### Author:  [@TheGullible1](https://discourse.processing.org/u/TheGullible1)
#### Post date: [November 16, 2020, 10:17pm UTC](https://discourse.processing.org/t/implementing-an-image-when-it-bounces-off-the-wall-it-will-show-which-direction-its-going-to/25469/10 "2020-11-16T22:17:04Z")
it actually might be easier to use rotate(), well ill get back to you if im stuck 🙂