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

Processing Coding Questions
1

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

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();
  
}
1 Like
2

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(…

1 Like
3

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

4

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 ?

5

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

6

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

7

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…

8

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

9

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

10

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?

11

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

12

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

13

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.

if(index==0)image(right arrow....
else if (index ==1)image (left arrow....
else if (....
1 Like
14

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

2 Likes
15

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 ?

16

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.