# Change object direction when reaching edges

**URL:** <https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761>\
**Category:** Coding Questions\
**Created:** [October 20, 2020, 7:06pm UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761 "2020-10-20T19:06:29Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![lukeltw](https://avatars.discourse-cdn.com/v4/letter/l/d6d6ee/32.png) [@lukeltw](https://discourse.processing.org/u/lukeltw)\
**Post date:** [October 20, 2020, 7:06pm UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/1 "2020-10-20T19:06:29Z")

</div>

How can I change the direction of my image?

As you know, a fish has a head, unlike a ball, each side could be its head, so when my fish reach the right side, I want to let them turn around, and now they are just moving backward.  
…  
PImage fishpic;

Fish [] groupers = new Fish[5];

void setup() {  
size(800, 800);  
stroke(10);  
strokeWeight(6);  
line(0, 600, 800, 600);  
fishpic = loadImage(“grouper.png”);  
fishpic.resize(0, 80);  
for (int i = 0; i\<groupers.length; i++) {  
groupers[i] = new Fish(50);  
}  
}

void draw() {  
background(255);  
//image(fishpic,150,0300);  
for (int i = 0; i\<groupers.length; i++) {  
groupers[i].display();  
groupers[i].fishmoving();  
groupers[i].turn();  
stroke(10);  
strokeWeight(6);  
line(0, 300, 800, 300);  
}  
}  
…  
…  
class Fish {  
float x;  
float y;  
float xSpeed;  
float diameter;  
Fish(float Medium) {  
x=random(500);  
y=random(300,750);  
xSpeed = 2;  
diameter = Medium;  
}

void display() {  
image(fishpic,x,y);  
}

void fishmoving() {  
x = x + xSpeed;

}

void turn() {  
if (x+160 \>width || x \< 0 ) {  
xSpeed = xSpeed \* -1;  
}  
}  
}  
…

 ![pf fish](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/706248f8674e58bf7bb4db6d9e488e152c30794e.jpeg)

---

<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:** [October 20, 2020, 10:19pm UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/2 "2020-10-20T22:19:49Z")

</div>

for your image load it in a image sofware like irfanview and mirror it and save as a new name.

in processing load both images

have a variable that indicates whether a fish goes left or right.

When it goes left, display image 1, otherwise 2

---

<div class="post-metadata">

**Author:** ![lukeltw](https://avatars.discourse-cdn.com/v4/letter/l/d6d6ee/32.png) [@lukeltw](https://discourse.processing.org/u/lukeltw)\
**Post date:** [October 21, 2020, 12:25am UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/3 "2020-10-21T00:25:37Z")

</div>

Thank you @Chrisir I think it’s good advice. However, after I mirrored the fish pic, then somehow every two fish are sticking together, instead of going in different directions. They are swimming like this…

 ![twofish](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/482e9463b048ff375bb8f5fbf3c2dbbb7d1ee369.jpeg)

```auto

```

```auto
class Fish {
  float x;
  float y;
  float xSpeed;
  float diameter; 
  float t = 0;
  float tSpeed = 3;
  Fish(float Medium) {
    x=random(500);
    y=random(300, 950);
    xSpeed =random(1, 2.5);
    diameter = Medium;
  }

  void display() {
    image(fishpic, x, y);
    image(fishpic2, x, y);
 
  }

  void fishmoving() {
    x = x + xSpeed;
  }

  void turn() {
    if (x+140 >width || x < 0 ) {
      xSpeed = xSpeed * -1;
    }
  }
  void timing() {
    strokeWeight(1);
    rect(t, 0, 1, 60);
    t = t + tSpeed;
  }
  void newyear() {
    if (t > width) {
      t = 0;
    }
  }
  void catching() {
  }
}

```

```auto
PImage fishpic;
PImage fishpsa;
PImage fishpic2;

Fish [] groupers = new Fish[5];

void setup() {
  size(1000, 1000);
  stroke(10);
  strokeWeight(6);
  line(0, 600, 800, 600);
  fishpic = loadImage("grouper.png");
  fishpic.resize(0, 70);
  fishpic2 = loadImage("grouper2.png");
   fishpic2.resize(0, 70);
  fishpsa = loadImage("fishpsa.jpg");
  fishpsa.resize(0, 240);
  for (int i = 0; i<groupers.length; i++) {
    groupers[i] = new Fish(50);
  }
}

void draw() {
  background(255);
  strokeWeight(0);
  line(0, 300, 1000, 300);
  rect(0, 300, 1000, 700);
  fill(67, 42, 0);
  rect(0, 60, 800, 240);
  fill(55, 122, 216);
  image(fishpsa, 683, 60);
  for (int i = 0; i<groupers.length; i++) {
    groupers[i].display();
    groupers[i].fishmoving();
    groupers[i].turn();
    groupers[i].timing();
    groupers[i].newyear();
  }
}
void mousePressed() {
  for (int i = 0; i<groupers.length; i++)
    groupers[i].catching();
}

```

---

<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:** [October 21, 2020, 9:21am UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/4 "2020-10-21T09:21:08Z")

</div>

Here

```auto
    image(fishpic, x, y);
    image(fishpic2, x, y);

```

you just draw both fishs!!! No wonder they are on top.

Read again what I wrote:

> [@Chrisir](#):
>
> have a variable that indicates whether a fish goes left or right.
> 
> When it goes left, display image 1, otherwise 2

Can you do this?

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![lukeltw](https://avatars.discourse-cdn.com/v4/letter/l/d6d6ee/32.png) [@lukeltw](https://discourse.processing.org/u/lukeltw)\
**Post date:** [October 21, 2020, 2:14pm UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/5 "2020-10-21T14:14:34Z")

</div>

Thank you @Chrisir, so after a while, finally I figured how to divided my two fishs into two single fish, I felt its kinda a progress, even though it’s still not what I wanted. By making this happen, I added another three new variables “m” “n” “mSpeed”, the problem is that I still don’t know how to do it as you said, have one variable indicates the directions of my fish.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3e566712b9a7566f5e20c348ad429403735d567c.jpeg)

```auto
class Fish {
  float x;
  float y;
  float m;
  float n;
  float xSpeed;
  float mSpeed;
  float diameter; 
  float t = 0;
  float tSpeed = 3;
  Fish(float Medium) {
    x=random(500);
    y=random(300, 950);
    m=random(500);
    n=random(300, 950);
    xSpeed =random(1, 2.5);
    mSpeed =random(1, 2.5);
    diameter = Medium;
  }

  void display() {
    image(fishpic, x, y);
    image(fishpic2, m, n); 
  }

  void fishmoving() {
    x = x + xSpeed;
  }

  void turn() {
    if (x+140 >width || x < 0 ) {
      xSpeed = xSpeed * -1;
    }
  }
   void fish2moving() {
    m = m + mSpeed;
  }
    void turn2() {
    if (m+140 >width || m < 0 ) {
      mSpeed = mSpeed * -1;
    }
  }
  void timing() {
    strokeWeight(1);
    rect(t, 0, 1, 60);
    t = t + tSpeed;
  }
  void newyear() {
    if (t > width) {
      t = 0;
    }
  }
  void catching() {
  }
}

```

```auto
 PImage fishpic;
PImage fishpsa;
PImage fishpic2;
PImage catching;

Fish [] groupers = new Fish[5];

void setup() {
  size(1000, 1000);
  stroke(10);
  strokeWeight(6);
  line(0, 600, 800, 600);
  fishpic = loadImage("grouper.png");
  fishpic.resize(0, 70);
  fishpic2 = loadImage("grouper2.png");
  fishpic2.resize(0, 70);
  fishpsa = loadImage("fishpsa.jpg");
  fishpsa.resize(0, 240);
  catching = loadImage("catchingfish.png");
  catching.resize(0, 240);
  for (int i = 0; i<groupers.length; i++) {
    groupers[i] = new Fish(50);
  }
}

void draw() {
  background(255);
  strokeWeight(0);
  line(0, 300, 1000, 300);
  rect(0, 300, 1000, 700);
  fill(67, 42, 0);
  rect(0, 60, 800, 240);
  fill(55, 122, 216);
  image(fishpsa, 683, 60);
  image(catching,0,60);
  for (int i = 0; i<groupers.length; i++) {
    groupers[i].display();
    groupers[i].fishmoving();
    groupers[i].turn();
    groupers[i].fish2moving();
    groupers[i].turn2();
    groupers[i].timing();
    groupers[i].newyear();
  }
}

void mousePressed() {
  for (int i = 0; i<groupers.length; i++)
    groupers[i].catching();
}

```

---

<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:** [October 21, 2020, 2:21pm UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/6 "2020-10-21T14:21:05Z")

</div>

Hello,

**Setting the marker indicating the direction**

your code:

> [@lukeltw](#):
>
> ```auto
> void turn() {
> if (x+140 >width || x < 0 ) {
> xSpeed = xSpeed * -1;
> }
> }
> 
> ```

better

```auto
  void turn() {
    if (x+140 > width ) { // right border 
      xSpeed = abs(xSpeed) * -1; // always neg! 
      fishIsMovingLeft = true; // set our marker for direction 
    }

   if ( x < 30 ) { // left 
      xSpeed = abs(xSpeed); // always pos! 
      fishIsMovingLeft = false; // set our marker for direction 
   }
  }//func 

```

* * *

**Displaying the Fish**

```auto
  void display() {
    if(fishIsMovingLeft) // evaluate the marker for direction
       image(fishpic, x, y);
    else 
      image(fishpic2, x, y); 
  }

```

**Remark**

- I don’t know why you have m,n and `fish2moving()` and `turn2()`

Chrisir

---

<div class="post-metadata">

**Author:** ![lukeltw](https://avatars.discourse-cdn.com/v4/letter/l/d6d6ee/32.png) [@lukeltw](https://discourse.processing.org/u/lukeltw)\
**Post date:** [October 21, 2020, 10:54pm UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/7 "2020-10-21T22:54:30Z")

</div>

Thank you @Chrisir

I never realized that the function “abs()” could be used here, in fact, it’s the first time I use “abs()”, such a lesson for me.

To remark: I guess I was trying to let the two fish moving individually first and then find some way to let them swim in the correct direction. But you just made the program instantly display a correct picture, compare with you, I was too stupid.

---

<div class="post-metadata">

**Author:** ![lukeltw](https://avatars.discourse-cdn.com/v4/letter/l/d6d6ee/32.png) [@lukeltw](https://discourse.processing.org/u/lukeltw)\
**Post date:** [October 21, 2020, 11:04pm UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/8 "2020-10-21T23:04:48Z")

</div>

I don’t know if it’s ok to ask another question under the same topic, but my program just run into a new error.

So I am trying to let users catch the fish, and every time they catch one, I created a scoreboard to count. But somehow the number on my score doesn’t add when they catch a new fish, but I feel like there is no flaw in my syntax.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fab989b32279830ad7884c438686ce65852dfd34.jpeg)

```auto
PImage fishpic;
PImage fishpsa;
PImage fishpic2;
PImage user;
PImage calendar;

Fish [] groupers = new Fish[20];

void setup() {
  size(1000, 1000);
  stroke(10);
  strokeWeight(6);
  line(0, 600, 800, 600);
  fishpic = loadImage("grouper.png");
  imageMode(CENTER);
  fishpic.resize(0, 70);
  fishpic2 = loadImage("grouper2.png");
  fishpic2.resize(0, 70);
  fishpsa = loadImage("public service announcement.jpg");
  fishpsa.resize(0, 240);
  user = loadImage("user.png");
  user.resize(0, 240);
  calendar = loadImage("calendar.png");
  calendar.resize(1000, 70);
  for (int i = 0; i<groupers.length; i++) {
    groupers[i] = new Fish(50);
  }
}

void draw() {
  background(255);
  strokeWeight(0);
  rect(0, 300, 1000, 700);  
  fill(67, 42, 0);
  rect(0, 60, 800, 240);
  fill(232, 176, 146); 
  image(fishpsa, 840, 180);
  image(user, 90, 180);
  fill(55, 122, 216); 
  image(calendar, 500, 25);
  line(350, 0, 350, 59);
  line(835, 0, 835, 59);
  for (int i = 0; i<groupers.length; i++) {
    groupers[i].display();
    groupers[i].fishmoving();
    groupers[i].turn();
    groupers[i].timing();
    groupers[i].remonth();
    groupers[i].numberOFfish();
  }
}

void mousePressed() {
  for (int i = 0; i<groupers.length; i++) {
    groupers[i].catching();
  }
}

```

```auto
class Fish {
  float x;
  float y;
  float xSpeed;
  float diameter; 
  boolean fishMovingLeft = false;
  float t = 0;
  float tSpeed = 2;
  int fishnumber = 0;
  Fish(float Medium) {
    x=random(500);
    y=random(350, 920);
    xSpeed =random(1, 10);
    diameter = Medium;
  }

  void display() {
    if (fishMovingLeft)  
      image(fishpic, x, y);
    else 
    image(fishpic2, x, y);
  }

  void fishmoving() {
    x = x + xSpeed;
  }

  void turn() {
    if (x+70 > width ) { 
      xSpeed = abs(xSpeed) * -1;  
      fishMovingLeft = true;
    }

    if ( x-65 < 0 ) {  
      xSpeed = abs(xSpeed);  
      fishMovingLeft = false;
    }
  }

  void timing() {
    strokeWeight(1);
    rect(t, 0, 1, 60);
    t = t + tSpeed;
  }
  void remonth (){
    if (t > width) {
      t = 0;
    }
  }
  void numberOFfish() {
    fill(55, 122, 216);
    text("Can you catch 20 fish?", 250, 150);
    textSize(30);
    text("Fish: " + fishnumber, 250, 200);
  }
  void catching() {
    float distance = sqrt((x-mouseX)*(x-mouseX)+(y-mouseY)*(y-mouseY));
    if (distance<=20 && ((t > 350)&&(t<835))) {
      x = -50;
      y = -50;
      fishnumber = fishnumber +1;
    }
  }
}

```

---

<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:** [October 21, 2020, 11:15pm UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/9 "2020-10-21T23:15:53Z")

</div>

> [@lukeltw](#):
>
> swim in the correct direction.

I just wanted to mention that when you initially let the fishes swim in different direction randomly (I haven’t checked) our direction marker is not yet set correctly. This happens only when a reflection occurs. You could correct/add this.

---

<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:** [October 21, 2020, 11:24pm UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/10 "2020-10-21T23:24:22Z")

</div>

Regarding score

Please check the dist() command to get the distance

I think t could be a problem, it’s increased every frame so the condition for t is only met a few seconds (in catching ())

Distance 20 is also very small, try 66

---

<div class="post-metadata">

**Author:** ![lukeltw](https://avatars.discourse-cdn.com/v4/letter/l/d6d6ee/32.png) [@lukeltw](https://discourse.processing.org/u/lukeltw)\
**Post date:** [October 21, 2020, 11:44pm UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/11 "2020-10-21T23:44:35Z")

</div>

Sorry, I don’t really get it, the reason I set “t” to allow the user only can catch fish during certain months(the calendar on the top of the program), so basically I think “t” itself is a condition for the function catching.

```auto
  void catching() {
    float distance = dist(x,y,mouseX,mouseY);
    if (distance<=66 && ((t > 350)&&(t<835))) {
      x = -50;
      y = -50;
      fishnumber = fishnumber +1;
    }
  }

```

---

<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:** [October 22, 2020, 1:05am UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/12 "2020-10-22T01:05:03Z")

</div>

Ok

But did you try without checking t?

---

<div class="post-metadata">

**Author:** ![lukeltw](https://avatars.discourse-cdn.com/v4/letter/l/d6d6ee/32.png) [@lukeltw](https://discourse.processing.org/u/lukeltw)\
**Post date:** [October 22, 2020, 1:32am UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/13 "2020-10-22T01:32:25Z")

</div>

I just tried run it without checking t

```auto
  void catching() {
    float distance = dist(x,y,mouseX,mouseY);
    if (distance<=66) {
      x = -50;
      y = -50;
      fishnumber = fishnumber +1;
    }
  }

```

I found an interesting thing, so at the beginning, before I click any fish, the scoreboard shows 0

 ![1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1df8bc38656b50650fdaca2bc450f52460e91824.jpeg)

then after I catch one fish, the board shows a number like 0 and 1 overlapped, and it shows like this while I catching other fish.

 ![111](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4f97bfea8c7783d95699f328e6723dbdfbe216a4.jpeg)

Then when I finish catching all fish, the scoreboard

 ![11](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2e2c2f7858312fc36d2406e54d2ec64889fe2432.jpeg) shows the number 1

And then I added " checking t " back, it shows the same thing, so I feel like its not because of t

---

<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:** [October 22, 2020, 12:35pm UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/14 "2020-10-22T12:35:47Z")

</div>

Sorry for being late.

This is part of the class, which is wrong. Instead it must be a global variable, so before setup().

```auto
// score 
int fishnumber = 0;

```

fishnumber / score is not a property of one fish but of the Game Logic as a whole therefore it must be a global variable, so before setup().

**Remark**

a line command in setup makes no sense.

---

<div class="post-metadata">

**Author:** ![lukeltw](https://avatars.discourse-cdn.com/v4/letter/l/d6d6ee/32.png) [@lukeltw](https://discourse.processing.org/u/lukeltw)\
**Post date:** [October 22, 2020, 8:11pm UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/15 "2020-10-22T20:11:45Z")

</div>

Thank you @Chrisir

Now its working 🙂

And how about this new code in setup()

```auto
void setup() {                               
  size(1000, 1000);
  imageMode(CENTER);
  fishpic = loadImage("grouper.png");              
  fishpic.resize(0, 70);
  fishpic2 = loadImage("grouper2.png");
  fishpic2.resize(0, 70);
  fishpsa = loadImage("public service announcement.jpg");
  fishpsa.resize(0, 240);
  user = loadImage("user.png");
  user.resize(0, 240);
  calendar = loadImage("calendar.png");
  calendar.resize(1000, 70);
  for (int i = 0; i<groupers.length; i++) {  
    groupers[i] = new Fish(50);
  }
}

```

---

<div class="post-metadata">

**Author:** ![markcosmic](https://avatars.discourse-cdn.com/v4/letter/m/ecc23a/32.png) [@markcosmic](https://discourse.processing.org/u/markcosmic)\
**Post date:** [November 12, 2020, 7:35pm UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/17 "2020-11-12T19:35:05Z")

</div>

To chime in on this subject, I’d would invert the grouper image by multiplying the image width by -1 and resizing it

---

<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 12, 2020, 7:40pm UTC](https://discourse.processing.org/t/change-object-direction-when-reaching-edges/24761/18 "2020-11-12T19:40:06Z")

</div>

we tried scale(-1,1); but it didn’t really work…

that’s why we work with 2 different images