Despite translation my square isn't rotating properly

p5.js Beginners
1

Hi,

I’ve been struggling with rotating my squares.
My rectmode is centered and I use degrees. I also understood I need to use translation as well but my square isn’t rotating properly.

Here is my very simple code

function setup() { 
  createCanvas(400, 400);
  rectMode(CENTER);
   angleMode = DEGREES;
  noLoop();
} 

function draw() { 
  background(220);
	
  translate (width/2, height/2);
  rotate(90);
rect(0, 0, 100, 100);
}

Would you have any idea?

Thanks

1 Like
2 
angleMode(DEGREES); // Change the mode to DEGREES

Not sure if a rotation by 90 deg is visible because it looks the same

Alternatively try 70 or 45 degrees

3

Hello @goldorak,

There are resources here:
https://p5js.org/

A search for rotate on p5.js website reveals:
https://p5js.org/reference/#/p5/rotate

Are you using the p5.js Web editor?
https://editor.p5js.org/

Your code:

image
image773×482 31.5 KB

Look up the reference for AngleMode() which is also in the rotate() reference.

Cut a square piece of paper.
Rotate it 90 degrees.

Once you correct the angleMode() that is what you are seeing… a square rotated 90 degrees.

Try something like a line before and after the rotate(90).
line(0, 0, 100, 100);

image

:)