I have created an array of objects using a class call Triangle. How can I translate each of these objects so that they all spin independently on their own axis? So far I have gotten them all to rotate correctly but the are all at x=0 and y=0. Everytime I try and translate they only spin around the origin.

Here is the code:

let triangles = [];

let angle = 0;

let speed = 0.001;

let x;

let y;

function setup() {

createCanvas(400, 400);

for (let i = 0; i < 10; i++) {

x = 0;

y = 0;

let s = random(20,50);

triangles[i] = new Triangle(x, y, s);

}

}

function draw() {

background(0);

for (let i = 0; i < triangles.length; i++) {

triangles[i].show();

triangles[i].move();

}

}

class Triangle {

constructor(x, y, s) {

this.x = x;

this.y = y;

this.s = s;

}

show() {

stroke(255);

fill(200, 10);

triangle(this.x, this.y - this.s * 5 / 6,

this.x - this.s, this.y + this.s / 2,

this.x + this.s, this.y + this.s / 2

);

}

move() {

rotate(angle);

angle+=speed;

}

}