# Trouble rotating an array of objects

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

only small idea of change: ( sorry its my NEON period )

``````
let triangles = [];
let angle = 0;
let speed = 0.001;
let x, y, s;//_____________change

function setup() {
createCanvas(400, 400);
for (let i = 0; i < 10; i++) {
x = 0;
y = i*10;//_____________change
s = random(10, 50);
triangles[i] = new Triangle(x, y, s);
}
}

function draw() {
background(0, 200, 0);//_____________change
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(0, 0, 200);//_____________change
fill(200, 200, 0);//_____________change
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;
}
}

``````

Rotation is pretty Messed up in processing…ok, technically it‘s how it should be, But it is annoying and someone should have added a simpler and direct method… like a transform method! Ok, now to how to fix your code. You have to translate the object before rotating it. If you want to rotate it around x=50, y=100, then do

``````obj.translate(50,100);
``````

You can also use

``````translate(50,100);
translate(-50,-100);
``````

But it’s more code and affects every object drawn Till now since this draw() started.

And then there‘s also pushPop.

``````pushMatrix();
translate(50,100);