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