# Class and arguments : can't make fish turn around

**URL:** <https://discourse.processing.org/t/class-and-arguments-cant-make-fish-turn-around/23937>\
**Category:** Coding Questions\
**Created:** [September 18, 2020, 12:04pm UTC](https://discourse.processing.org/t/class-and-arguments-cant-make-fish-turn-around/23937 "2020-09-18T12:04:13Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![vlafortune](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@vlafortune](https://discourse.processing.org/u/vlafortune)\
**Post date:** [September 18, 2020, 12:04pm UTC](https://discourse.processing.org/t/class-and-arguments-cant-make-fish-turn-around/23937/1 "2020-09-18T12:04:13Z")

</div>

Hi!

With p5.js, I made three fishes that move and have different colors and speed with arguments in a class. But when I tried to add conditional statements to turn around when reaching the border, it didn’t work and I can’t figure out why.

I am sorry, I don’t know how to format my code with \</\>. This is my firs post. Can you explain me what it means?

Meanwhile, here is my code:

[https://editor.p5js.org/vlafortune/present/8CgDnqIpa](https://editor.p5js.org/vlafortune/present/8CgDnqIpa)

```auto
let fish1;
let fish2;
let fish3;

function setup() {
 createCanvas(800, 800);
 angleMode(DEGREES);
 fish1 = new Fish(100, 100, color(255, 153, 59), 5);
 fish2 = new Fish(100, 200, color(200, 0, 100), 3);
 fish3 = new Fish(100, 400, color(0, 244, 10), 10);
}

function draw() {
 background(171, 252, 255);
 fish1.show();
 fish1.move();
 fish1.changeSide();
 fish2.show();
 fish2.move();
 fish3.show();
 fish3.move();
}

class Fish {
 constructor(tempX, tempY, tempC, tempXspeed, tempMirror) {
   this.x = tempX;
   this.y = tempY;
   this.couleur = tempC;
   this.xspeed = tempXspeed;
   this.mirror = tempMirror;
 }

 move() {
   if (this.x > width -50 || this.x < 100) {
     this.xspeed = this.xspeed * -1;
   }
   this.x = this.x + this.xspeed;
   this.mirror = scale(this.mirror * -1, this.mirror = 1);
 }

 changeSide() {
   if (this.xspeed < 0) {
     this.mirror = scale(this.mirror * -1, this.mirror = 1);
   } 
 }
 

 show() {
   //corps
   //translate(this.x, this.y);
   //scale(-1,1);
   fill(this.couleur);
   strokeWeight(3);
   ellipse(this.x, this.y, 100, 100);
   //queue
   triangle(this.x - 50, this.y, this.x - 100, this.y - 50, this.x - 100, this.y + 50);
   //aileron
   triangle(this.x, this.y + 10, this.x + 5, this.y + 30, this.x - 30, this.y + 30);
   //yeux
   fill(255);
   ellipse(this.x + 15, this.y - 10, 30, 30);
   fill(0);
   ellipse(this.x + 15, this.y - 10, 15, 15);
 }
}

```

---

<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:** [September 18, 2020, 12:44pm UTC](https://discourse.processing.org/t/class-and-arguments-cant-make-fish-turn-around/23937/2 "2020-09-18T12:44:45Z")

</div>

So does it move wrong or

does it just look in the wrong direction?

---

<div class="post-metadata">

**Author:** ![vlafortune](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@vlafortune](https://discourse.processing.org/u/vlafortune)\
**Post date:** [September 18, 2020, 12:47pm UTC](https://discourse.processing.org/t/class-and-arguments-cant-make-fish-turn-around/23937/3 "2020-09-18T12:47:14Z")

</div>

It moves ok from side to side. But it keeps looking to the right. I want it to look to the left after hitting the right border (and vice versa).

---

<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:** [September 18, 2020, 1:50pm UTC](https://discourse.processing.org/t/class-and-arguments-cant-make-fish-turn-around/23937/4 "2020-09-18T13:50:58Z")

</div>

Somehow the logic is off

You don’t call changeSides for fishes 2 and 3

This line

this.mirror = scale(this.mirror \* -1, this.mirror = 1);

Delete from move

You don’t use mirror

Just say scale…

without mirror =

---

<div class="post-metadata">

**Author:** ![vlafortune](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@vlafortune](https://discourse.processing.org/u/vlafortune)\
**Post date:** [September 18, 2020, 2:53pm UTC](https://discourse.processing.org/t/class-and-arguments-cant-make-fish-turn-around/23937/5 "2020-09-18T14:53:43Z")

</div>

I made the changes, but it still doesn’t work. I’m obviously not using “this.scale” and “scale” properly, but can’t find where do I go wrong.

Here is the modified code:

> **[p5.js Web Editor](https://editor.p5js.org/vlafortune/sketches/8CgDnqIpa)**

```auto
let fish1;
let fish2;
let fish3;

function setup() {
 createCanvas(800, 800);
 angleMode(DEGREES);
 fish1 = new Fish(100, 100, color(255, 153, 59), 5, scale(1,1));
 fish2 = new Fish(100, 200, color(200, 0, 100), 3, scale(1,1));
 fish3 = new Fish(100, 400, color(0, 244, 10), 10, scale(1,1));
}

function draw() {
 background(171, 252, 255);
 fish1.show();
 fish1.move();
 fish1.changeSide();
 fish2.show();
 fish2.move();
 fish1.changeSide();
 fish3.show();
 fish3.move();
 fish1.changeSide();
}

class Fish {
 constructor(tempX, tempY, tempC, tempXspeed, tempScale) {
   this.x = tempX;
   this.y = tempY;
   this.couleur = tempC;
   this.xspeed = tempXspeed;
   this.scale = tempScale;
 }

 move() {
   if (this.x > width -50 || this.x < 100) {
     this.xspeed = this.xspeed * -1;
   }
   this.x = this.x + this.xspeed;
 }

 changeSide() {
   if (this.xspeed < 0) {
     scale = (this.scale * -1, this.scale = 1);
   } 
 }
 

 show() {
   //corps
   //translate(this.x, this.y);
   //scale(-1,1);
   fill(this.couleur);
   strokeWeight(3);
   ellipse(this.x, this.y, 100, 100);
   //queue
   triangle(this.x - 50, this.y, this.x - 100, this.y - 50, this.x - 100, this.y + 50);
   //aileron
   triangle(this.x, this.y + 10, this.x + 5, this.y + 30, this.x - 30, this.y + 30);
   //yeux
   fill(255);
   ellipse(this.x + 15, this.y - 10, 30, 30);
   fill(0);
   ellipse(this.x + 15, this.y - 10, 15, 15);
 }
}

```

---

<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:** [September 18, 2020, 11:37pm UTC](https://discourse.processing.org/t/class-and-arguments-cant-make-fish-turn-around/23937/6 "2020-09-18T23:37:45Z")

</div>

> [@vlafortune](#):
>
> fish1.changeSide();

must be fish1, fish2, fish3

---

<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:** [September 18, 2020, 11:39pm UTC](https://discourse.processing.org/t/class-and-arguments-cant-make-fish-turn-around/23937/7 "2020-09-18T23:39:14Z")

</div>

> [@vlafortune](#):
>
> scale = (this.scale \* -1, this.scale = 1);

must be

scale (this.scale \* -1, this.scale = 1);

Also, call it before show, not after it for every fish

---

<div class="post-metadata">

**Author:** ![vlafortune](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@vlafortune](https://discourse.processing.org/u/vlafortune)\
**Post date:** [September 19, 2020, 12:52am UTC](https://discourse.processing.org/t/class-and-arguments-cant-make-fish-turn-around/23937/8 "2020-09-19T00:52:34Z")

</div>

Thank you! Now the code is now working. Not perfectly, but things are in the right order.

Something weird is happening, though. Fishes disappear and I’m not sure why. I guess it has something to do with the fact that I didn’t use translate before scale(-1, 1). I’ll work on 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:** [September 19, 2020, 12:23pm UTC](https://discourse.processing.org/t/class-and-arguments-cant-make-fish-turn-around/23937/9 "2020-09-19T12:23:28Z")

</div>

Scale adds up I think

Can you please post your entire code

---

<div class="post-metadata">

**Author:** ![vlafortune](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@vlafortune](https://discourse.processing.org/u/vlafortune)\
**Post date:** [September 20, 2020, 5:20pm UTC](https://discourse.processing.org/t/class-and-arguments-cant-make-fish-turn-around/23937/10 "2020-09-20T17:20:28Z")

</div>

Yes indeed. Scale adds up.

I tried to fix it (with translate), but it didn’t work. So I used a conditional operator in the function show() to use an already flipped drawing.

It works well, but it’s probably not clean code…

I still have to figure out the scale problem because I ultimately want to have three kind of fishes, each with a specific color and size.

Here is my code (it evolved since last time):

[https://editor.p5js.org/vlafortune/present/18ulGqXmW](https://editor.p5js.org/vlafortune/present/18ulGqXmW)

```auto
let fishs = [];

function setup() {
 createCanvas(800, 800);
 let x = random(width);
 let y = random(height);
 for (let i = 0; i < 10; i++) {
   let x = random(100, width - 100);
   let y = random(100, height - 100);
   let xspeed = random(1, 5);
   let yspeed = random(1, 2);
   fishs[i] = new Fish(x, y, color(255, 0, 204), xspeed, yspeed);
 }
}

function mousePressed() {
 for (let i = fishs.length-1; i >= 0; i--) {
   if (fishs[i].inside(mouseX, mouseY)) {
     fishs.splice (i, 1);
   }
 }
}

function draw() {
 background(171, 252, 255);
 for (let i = 0; i < fishs.length; i++) {
   if (fishs[i].inside(mouseX, mouseY)) {
       fishs[i].changeColor(color(200, 0, 200));
       } else {
       fishs[i].changeColor(color(255, 0, 204));
       }
   fishs[i].move();
   fishs[i].show();
 }
}

class Fish {
 constructor(tempX, tempY, tempColor, tempXspeed, tempYspeed) {
   this.x = tempX;
   this.y = tempY;
   this.color = tempColor;
   this.xspeed = tempXspeed;
   this.yspeed = tempYspeed;
 }

 inside(px, py) {
   let d = dist(px, py, this.x, this.y);
   if (d < 50) {
     return true;
   } else {
     return false;
   }
 }
 
 changeColor(Color2) {
     this.color = Color2;
 }

 move() {
   if (this.x > width - 100 || this.x < 100) {
     this.xspeed = this.xspeed * -1;
   }
   this.x = this.x + this.xspeed;

   if (this.y > height - 100 || this.y < 100) {
     this.yspeed = this.yspeed * -1;
   }
   this.y = this.y + this.yspeed;
 }

 show() {
   if (this.xspeed > 0) {
     //corps
     //scale(this.scale);
     fill(this.color);
     strokeWeight(3);
     ellipse(this.x, this.y, 100, 100);
     //queue
     triangle(this.x - 50, this.y, this.x - 100, this.y - 50, this.x - 100, this.y + 50);
     //aileron
     triangle(this.x, this.y + 10, this.x + 5, this.y + 30, this.x - 30, this.y + 30);
     //yeux
     fill(255);
     ellipse(this.x + 15, this.y - 10, 30, 30);
     fill(0);
     ellipse(this.x + 15, this.y - 10, 15, 15);
   } else {
     //corps
     //translate(this.x, this.y);
     fill(this.color);
     strokeWeight(3);
     ellipse(this.x, this.y, 100, 100);
     //queue
     triangle(this.x + 50, this.y, this.x + 100, this.y - 50, this.x + 100, this.y + 50);
     //aileron
     triangle(this.x, this.y + 10, this.x - 5, this.y + 30, this.x + 30, this.y + 30);
     //yeux
     fill(255);
     ellipse(this.x - 15, this.y - 10, 30, 30);
     fill(0);
     ellipse(this.x - 15, this.y - 10, 15, 15);
   }
 }
}

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 20, 2020, 5:49pm UTC](https://discourse.processing.org/t/class-and-arguments-cant-make-fish-turn-around/23937/11 "2020-09-20T17:49:21Z")

</div>

Dear @vlafortune You can edit your post by clicking on the pencil icon below your post. Then type three back quote’s (or copy these ``` )  
and past them one line above your code, and one line below.  
This way the code will receive a box with scroll bars, and if you place the mouse on top of the vertical scroll bar, a copy button will appear.

---

<div class="post-metadata">

**Author:** ![vlafortune](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@vlafortune](https://discourse.processing.org/u/vlafortune)\
**Post date:** [September 20, 2020, 11:16pm UTC](https://discourse.processing.org/t/class-and-arguments-cant-make-fish-turn-around/23937/12 "2020-09-20T23:16:59Z")

</div>

Thank you! Just edit my code and will do like this from now on.