Despite translation my square isn't rotating properly


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);
   angleMode = DEGREES;

function draw() { 
  translate (width/2, height/2);
rect(0, 0, 100, 100);

Would you have any idea?


1 Like
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

Hello @goldorak,

There are resources here:

A search for rotate on p5.js website reveals:

Are you using the p5.js Web editor?

Your code:

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