How could I move randomly this triangle? p5.js - random

Question

Since few days I try to animate my triangle, I want to move it randomly on my canvas. All of my tests were a failure so if you have some tips I am open to it!
I wish my triangle move on x and y axis randomly like a free electron and in the future I would like to have other triangles that move randomly and when they touch each other they bounce but it's another step!
My code:
let x = 50;
let y = 200;
let y1 = 100;
let y2 = 200
let x1 = 100;
let x2= 150;
let speed = 5;
let startColor;
let endColor;
let amt = 0;
function setup() {
startColor = color("hsl(172, 100%, 50%)");
endColor = color("hsl(335, 100%, 50%)");
createCanvas(windowWidth, 800);
frameRate(45);
}
function draw() {
colorMode(RGB);
background(252, 238, 10);
shape(); // Appel de la function shape
bounce();// appel de la fonction bounce
}
function bounce() {
x = x + speed;
x1 = x1 + speed;
x2 = x2 + speed;
y = y + speed
y1 = y1 + speed
y2 = y2 + speed
if (x2 > windowWidth || x < 0) {
speed = speed * -1;
}
}
function shape() {
if (amt >= 1) {
amt = 0;
let tmpColor = startColor;
startColor = endColor;
endColor = tmpColor;
}
amt += 0.01;
let colorTransition = lerpColor(startColor, endColor, amt);
noStroke();
fill(colorTransition);
triangle(x, y, x1, y1, x2, y2);
}

Answer 1

First you have a code working to make your triangle always move in the same direction. What you could do to make it random is to change the speed you are using:
For now each call to bounce moves the triangle by speed pixels. So if in draw() before calling shape() you add the following, triangle will begin to randomly move by a small amount:
speed = map(random(), 0, 1, -5, 5);
There are tons of different ways to do it, here we have making use of processing's random() to generate a number between 0 and 1 and map() to get a value between -5 and 5.
Now the issue is that you have only one type of speed and you apply to both axis x and y. What you want is probably to have speedX and speedY with two different values applied to both component of your position.
Once you try to do that you'll realize that having two variables for speedX and speedY is not very convenient and that you'd rather have one variable for your position with two component x and y and same for your speed. This way you'll be able to do position = position + speed. This requires that you refactor your code to use a more object oriented paradigm. To learn how to do that, one of the best resources online is the "Nature of Code" playlist by The coding train youtube channel.

Answer 2

I work every day and i followed all your advices and now this is what i have product, thanks for all !!
let triangle1;
let triangle2;
let triangle3;
let triangle4;
let triangle5;
let speedX;
let speedY;
let startColor;
let endColor;
let amt = 0;
function setup() {
startColor = color("hsl(172, 100%, 50%)");
endColor = color("hsl(335, 100%, 50%)");
createCanvas(windowWidth, 800);
//creer notre triangle
triangle1 = new Triangles(200, 100, 0, 4);
triangle2 = new Triangles(100, 50, 2, 0);
triangle3 = new Triangles(50, 200, -1, 4);
triangle4 = new Triangles(250, 400, 4, 4);
triangle5 = new Triangles(150, 500, 0, 2);
}
function draw() {
colorMode(RGB);
background(252, 238, 10);
triangle1.show();
triangle1.move();
triangle2.show();
triangle2.move();
triangle3.show();
triangle3.move();
triangle4.show();
triangle4.move();
triangle5.show();
triangle5.move();
}
class Triangles {
//configuration de l'objet
constructor(triX, triY, speedX, speedY){
this.x = triX;
this.y = triY;
this.speedX = speedX;
this.speedY = speedY;
}
show(){
if (amt >= 1) {
amt = 0;
let tmpColor = startColor;
startColor = endColor;
endColor = tmpColor;
}
amt += 0.01;
let colorTransition = lerpColor(startColor, endColor, amt);
noStroke();
fill(colorTransition);
noStroke();
triangle(this.x, this.y, this.x + 25, this.y + 40, this.x -25, this.y + 40);
}
move(){
this.x += this.speedX;
this.y += this.speedY;
if(this.x > width || this.x < 0){
this.speedX *= -1;
}
if(this.y > height || this.y < 0){
this.speedY = this.speedY * -1;
}
}
}