Rotating triangle around a center point like a wheel

Question

I want to create a function rotating where my triangle can pivot on itself like a wheel but I have a conflict with a part of my code which moves my triangle and I tried many solutions without success, maybe if one of you have a clue it will be nice!

This is my code:

let triangle1;
let triangle2;
let triangle3;
let triangle4;
let triangle5;
let triangle6;
let speedX;
let speedY;
let startColor;
let endColor;
let amt = 0;

function setup() {
    startColor = color("hsl(144, 100%, 61%)");
    endColor = color("hsl(0,77%,36%)");
    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);
        triangle6 = new Triangles(350, 500, -4, 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();
     triangle6.move();
     triangle6.show();*/

}

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.03;
        let colorTransition = lerpColor(startColor, endColor, amt);
        noStroke();
        fill(colorTransition);
        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.x + 25 > width || this.x + 25 < 0) {

            this.speedX *= -1;

        }

        if (this.x - 25 > width || this.x - 25 < 0) {

            this.speedX *= -1;

        }

        if (this.y > height || this.y < 0) {

            this.speedY = this.speedY * -1;

        }

        if (this.y + 40 > height || this.y + 40 < 0) {

            this.speedY = this.speedY * -1;
        }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>

Answer 1

Use the matrix transformations to rotate, scale and translate an shape. The Operations rotate, scale and translate define a new transformation matrix and multiply the current matrix with the new matrix.

If you want to transform a single shape (triangle), you nee to save current matrix before the transformation with push and restore the matrix after the transformation with pop.

push();

// [...] scale, rotate, translate

// [...] draw shape

pop();

If you want to rotate a shape about a local pivot point, you need to draw the shape around (0, 0). Rotate the shape and move the rotated shape to its target position:

shapeTrasformation = translate * rotate * scale

Local rotation of an equilateral triangle:

push()

translate(this.x, this.y, this.z);
rotate(this.angle)
scale(30);

triangle(-0.866, 0.5, 0.866, 0.5, 0, -1);

pop();
this.angle += 0.01; 

let triangle1;
let speedX;
let speedY;
let startColor;
let endColor;
let amt = 0;

function setup() {
    startColor = color("hsl(144, 100%, 61%)");
    endColor = color("hsl(0,77%,36%)");
    createCanvas(windowWidth, windowHeight);
    //creer notre triangle
    triangle1 = new Triangles(200, 100, 0, 4);
}

function draw() {
    colorMode(RGB);
    background(252, 238, 10);
    triangle1.show();
    triangle1.move();
}

class Triangles {
    //configuration de l'objet
    constructor(triX, triY, speedX, speedY) {
        this.x = triX;
        this.y = triY;
        this.speedX = speedX;
        this.speedY = speedY;
        this.angle = 0;
    }

    show() {
        if (amt >= 1) {
            amt = 0;
            let tmpColor = startColor;
            startColor = endColor;
            endColor = tmpColor;
        }
        amt += 0.03;
        let colorTransition = lerpColor(startColor, endColor, amt);
        noStroke();
        fill(colorTransition);

        push()

        translate(this.x, this.y, this.z);
        rotate(this.angle)
        scale(30);

        triangle(-0.866, 0.5, 0.866, 0.5, 0, -1);

        pop();
        this.angle += 0.01;
    }

    move() {
        this.x += this.speedX;
        this.y += this.speedY;

        if (this.x > width || this.x < 0) {
            this.speedX *= -1;
        }

        if (this.x + 25 > width || this.x + 25 < 0) {

            this.speedX *= -1;

        }

        if (this.x - 25 > width || this.x - 25 < 0) {

            this.speedX *= -1;

        }

        if (this.y > height || this.y < 0) {

            this.speedY = this.speedY * -1;

        }

        if (this.y + 40 > height || this.y + 40 < 0) {

            this.speedY = this.speedY * -1;
        }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>