Rotate canvas around its center

p5.js Coding Questions
1

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?

Thanks in advance,
Theresa

2

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

These are the functions you need:
Translate
Rotate

I hope this can help you it is a little example:
Flolo :smile:

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
3

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…

ayezoo.PNG
ayezoo.PNG775Ă—775 68.8 KB

Thanks in advance

1 Like
4

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 :smile:
Flolo

1 Like
5

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.

image
image894Ă—842 71.3 KB

Do you have an Idea?

Thanks in advance,
Theresa

6

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.

image
image1161Ă—924 83.4 KB

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

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
9

Okay…finally it works…

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

Thanks for your support!

1 Like