jeudi 3 décembre 2020

How could I move randomly this triangle? p5.js

Since few days I try to animate my triangle, I want to move it randomly on my canva. 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);

}



Aucun commentaire:

Enregistrer un commentaire