# How to get image to change direction when it touches a wall

**URL:** <https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528>\
**Category:** Coding Questions\
**Created:** [November 16, 2019, 10:18am UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528 "2019-11-16T10:18:35Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Banana132](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@Banana132](https://discourse.processing.org/u/Banana132)\
**Post date:** [November 16, 2019, 10:18am UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528/1 "2019-11-16T10:18:35Z")

</div>

Hi there, im quite new to processing and programming in general, im trying to get a different image when it hits a wall but also that it changes its image to the direction it is going after it has hit a wall. I have gotten the images to collide with walls and that it loops the images using a counter but I cant for the life of me get it to only change an image when it hits a wall. Ive looked on processing for guidance but i cant find anything. Im not looking for the answer just some pointers of what i should do. Ive jus thit a brick wall and have no idea where to go from here

Many thanks 😀

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

  int xSpeed;
  int ySpeed;
  
  int x1 = 0;
  int y1 = 0;
  int x2 = 150;
  int y2 = 75;

  //construc the walker
  walker(int x, int y, int dx, int dy)
  {
    this.x = x;
    this.y = y;
    this.xSpeed = dx;
    this.ySpeed = dy;
    //pre loading images in walker constructor
    img1 = loadImage("upright.jpg");
    img2 = loadImage("downright.jpg");
    img3 = loadImage("downleft.jpg");
    img4 = loadImage("upleft.jpg");
  }

  //image chaging method for the human
  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 || x < 0)
    {
      xSpeed *= -1;
    }
    y += ySpeed;
    if (y > height - y2 || y < 0)
    {
      ySpeed *= -1;
    }
    
  
  }

void setup()
{
  size(400, 400);
  human1 = new walker(width/2, height/2, 1, 1);
  human2 = new walker(width/2, height/2, 3, 2);
 
}

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 16, 2019, 10:37am UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528/2 "2019-11-16T10:37:09Z")

</div>

You need a int variable index that tells which image to show.

On collision say index++;

when showing an image say

if(index==0) image(…  
else if (index==1) image(…  
else if(index==2) image(…

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 16, 2019, 10:39am UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528/3 "2019-11-16T10:39:15Z")

</div>

Of course you need to check if index \> 3 index=0;

You could later have the image in an array and use the index as index

See tutorials section on website, tutorial arrays

---

<div class="post-metadata">

**Author:** ![Banana132](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@Banana132](https://discourse.processing.org/u/Banana132)\
**Post date:** [November 16, 2019, 11:01am UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528/4 "2019-11-16T11:01:33Z")

</div>

so would i need to possibly make a new method or function (im not sure which is which) that would basically check what the index number is while it collides with a wall and if it is, to add one to index to get the next number ?

---

<div class="post-metadata">

**Author:** ![Banana132](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@Banana132](https://discourse.processing.org/u/Banana132)\
**Post date:** [November 16, 2019, 11:10am UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528/5 "2019-11-16T11:10:27Z")

</div>

Also, apologies if I don’t make much sense, it’s hard for me to explain things and grasp what people tell me programming wise 😅

---

<div class="post-metadata">

**Author:** ![Banana132](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@Banana132](https://discourse.processing.org/u/Banana132)\
**Post date:** [November 16, 2019, 11:33am UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528/6 "2019-11-16T11:33:10Z")

</div>

Think I pressed the wrong reply button, I have replied, just underneith your reply 🙂

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 16, 2019, 11:46am UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528/7 "2019-11-16T11:46:59Z")

</div>

On collision you just increase index

It’s not a new function

When displaying an image, evaluate index to decide which image to show: if…else if…

---

<div class="post-metadata">

**Author:** ![Banana132](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@Banana132](https://discourse.processing.org/u/Banana132)\
**Post date:** [November 16, 2019, 12:17pm UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528/8 "2019-11-16T12:17:31Z")

</div>

Okay, I’ll give it a try when I’m near my pc again, thanks for the help 🙂

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 16, 2019, 12:19pm UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528/9 "2019-11-16T12:19:51Z")

</div>

I just see you have a if … else if… for your image using count

you have there count++ - you could move that line to the places where you have a collision

then the image woud change after 10 collisions.

You can change this value too

---

<div class="post-metadata">

**Author:** ![Banana132](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@Banana132](https://discourse.processing.org/u/Banana132)\
**Post date:** [November 16, 2019, 1:35pm UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528/10 "2019-11-16T13:35:29Z")

</div>

With doing this, would I be able to get it to select what image it is when it hits a specific wall so say if the image is an arrow and it hits the left wall, then the arrow points right to the right wall and if it hits the top, the arrow would point down?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 16, 2019, 3:42pm UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528/11 "2019-11-16T15:42:30Z")

</div>

Not when you say index++;

you would have to say specifically index=2; when the image at this position is the arrow pointing south.

The image approach is not flexible though; when you have made an arrow programmatically you can give it any angle with a rotation

---

<div class="post-metadata">

**Author:** ![Banana132](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@Banana132](https://discourse.processing.org/u/Banana132)\
**Post date:** [November 16, 2019, 5:16pm UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528/12 "2019-11-16T17:16:26Z")

</div>

Would I be able to like specifically make an image appear only when it hits a specific wall with what I have already as in with the if and else if statements I have, like just say “if this image is Equal to width, change to this picture” and so on with other images? Or is it not really possible

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 16, 2019, 6:06pm UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528/13 "2019-11-16T18:06:14Z")

</div>

> [@Banana132](#):
>
> if (x \> width - x2 || x \< 0) {  
> xSpeed \*= -1;  
> }

It’s possible

When you look at this section, you have to separate the check for left and right side. And not use ||

Where you change the speed, add a line where it says

- index =0; for left side, and
- index =1; for right side
- etc.

This means index stores the information which image to display! Hooray!

Now accordingly where you show the image, evaluate index and show the corresponding image.

```auto
if(index==0)image(right arrow....
else if (index ==1)image (left arrow....
else if (....

```

---

<div class="post-metadata">

**Author:** ![Banana132](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@Banana132](https://discourse.processing.org/u/Banana132)\
**Post date:** [November 16, 2019, 7:16pm UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528/14 "2019-11-16T19:16:24Z")

</div>

you sir or madam, are a genius, thanks for the help 🙂 its working how i wanted it to

---

<div class="post-metadata">

**Author:** ![Banana132](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@Banana132](https://discourse.processing.org/u/Banana132)\
**Post date:** [November 16, 2019, 8:02pm UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528/15 "2019-11-16T20:02:59Z")

</div>

just one more thing (sorry for all the questions, is there a way for it to alternates when it hits each side as in, it hits left side image1 then right side image2 and then back to image 1 and so on ? and the same for up and down iof possible ?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 16, 2019, 8:10pm UTC](https://discourse.processing.org/t/how-to-get-image-to-change-direction-when-it-touches-a-wall/15528/16 "2019-11-16T20:10:13Z")

</div>

In my way (when you split the if clause and get rid of || ) you have different images for left and right side automatically.

OR :

Do you mean you want another image the first time you hit the left side and then the second time you hit the same side (left)?

That would also be possible.

Eg when you say want to alternate between index 0 or index 4.  
Then you additionally check if lastIndexLeft was 0 or 4 and choose the other. Then set lastIndexLeft to the same value.