Class and arguments : can't make fish turn around

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

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);
 }
}

So does it move wrong or

does it just look in the wrong direction?

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).

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 =

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:

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);
 }
}

must be fish1, fish2, fish3

must be

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

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

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!

Scale adds up I think

Can you please post your entire code

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

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);
   }
 }
}

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.

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