# Rotate canvas around its center

Hi frens,

I use the draw function to display objects of the class Mover.
After the objects are displayed I want to rotate the result around the center.

``````function draw() {

if(frameCount < 600){
for (var i = 0; i < myMover1.length; i++) {
myMover1[i].update(count);
myMover1[i].distance(myMover1);

}

for (var i = 0; i < myMover2.length; i++) {
myMover2[i].update(count);
myMover2[i].distance(myMover2);

}
for (var z = 0; z < myMover3.length; z++) {
myMover3[z].update(count);
myMover3[z].distance(myMover3);

}

for (var z = 0; z < myMover4.length; z++) {
myMover4[z].update(count);
myMover4[z].distance(myMover4);

}
}

else{
//Rotate Canvas
}

}

``````

Is it possible to rotate the whole canvas around its center?

Theresa

Hey
first of all I think you mean p5js and not Processing.(so please change that )

These are the functions you need:
Translate
Rotate

Flolo

Click to see code
``````let cols = 20;
let cellSize;

function setup() {
createCanvas(600, 600);
cellSize = min(width, height) / cols;
}

function draw() {
background(0);
translate(width/2, height/2);
rotate(frameCount * 0.001);
drawGrid();
}
function drawGrid() {
stroke(255);
strokeWeight(2);
translate(-width/2, -height/2);
for (let i = 0; i < cols; i++) {
for (let j = 0; j < cols; j++) {
let x = i * cellSize;
let y = j * cellSize;
let filled = (i + j) % 2 == 0;
if (filled) {
fill(255);
} else {
noFill();
}
rect(x, y, cellSize, cellSize);
}
}
}

``````
3 Likes

Hi Flolo,

thanks for the reply. The thing is that:
The object is generated in draw (out of many object lines). After the generation finished the result should be rotated around its center.

I used frameCount to stop the generation. But not the complete result is rotated but only single lines.

My idea was to save the canvas as image and re-load itâ€¦

Find the result of draw attachedâ€¦

1 Like

Hi,
maybe thereâ€™s something to be gained by painting it on a Graphics and then rotating it.
I modified my previous example:

Click to see Code
``````let img;
let cols = 20;
let cellSize;

function setup() {
createCanvas(600, 600);
img = createGraphics(width, height);
cellSize = min(width, height) / cols;
}

function draw() {
background(0);
translate(width/2, height/2);
rotate(frameCount * 0.001);
image(img, -width/2, -height/2)
drawGrid();
}
function drawGrid() {
img.stroke(255);
img.strokeWeight(2);
for (let i = 0; i < cols; i++) {
for (let j = 0; j < cols; j++) {
let x = i * cellSize;
let y = j * cellSize;
let filled = (i + j) % 2 == 0;
if (filled) {
img.fill(255);
} else {
img.noFill();
}
img.rect(x, y, cellSize, cellSize);
}
}
}

``````

Its the same outcome but with a Graphics
Flolo

1 Like

Hi Flolo,

thanks for the hint, Iâ€™m closer but the rotating image is not the complete one. Its only a part of the origin.

Do you have an Idea?

Theresa

Okay, now I have the complete graphic in the image.

But this sktetch demonstrate my problem. If I have an Image and want to rotate it around the center it looks like the outer smaller rect.

If I use the rect-function and add rectMode(CENTER) it works. But imageMode(CENTER) does not work.

``````let img;
var angle=0;
function setup() {
createCanvas(400, 400);
img = createGraphics(width, height);
angleMode(DEGREES);
imageMode(CENTER);
img.fill(255,255,255);
///img.line(v1.x, v1.y, v2.x,v2.y);
img.rect(0,0,200,200);
//rect(0,0,200,200);
}

function draw() {

background(0,255,0);

translate(width/2, height/2);
rotate(angle);
//rectMode(CENTER);
fill(255);
imageMode(CORNER);
image(img,-width/2, -height/2);
angle=angle+1;

}
``````

The problem is, that I call the generate/drawStuff() Method before I translate and rotateâ€¦

But this is necassary bc I generate the graphic beforeâ€¦and if generation is finished it should be rotatedâ€¦

1 Like

Okayâ€¦finally it worksâ€¦

https://creatorbox.de/genart/apps/ayezooloop/