Class and arguments : can't make fish turn around

[vlafortune]

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

[Chrisir]

So does it move wrong or

does it just look in the wrong direction?

[vlafortune]

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

[Chrisir]

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 =

[vlafortune]

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

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

[Chrisir]

@vlafortune

fish1.changeSide();

must be fish1, fish2, fish3

[Chrisir]

@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

[vlafortune]

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!

[Chrisir]

Scale adds up I think

Can you please post your entire code

[vlafortune]

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

[noel]

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.

[vlafortune]

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