p5.js rotate unexpected results

Question

The rotate() function is not rotating to the correct number of degrees. The image shows the screen with no rotate. If I apply a rotate command by uncommenting line 14, the line is rotated to the 11 o'clock position, not to 9'oclock as I would have expected.

screen shot

function setup() {
  createCanvas(200, 200);
  angleMode = DEGREES;
}

function draw() {
  noStroke();
  fill(200, 102, 0);
  circle(100, 100, 180); //draw pivot
  strokeWeight(5);
  stroke(0, 0, 0);
  circle(100, 100, 15); //draw pivot point
  translate(100, 100); //move origin
  // rotate(180);
  //rotate(radians(180));
  line(0, 0, 90, 0);
}

However, if I use line 15 (rotate(radians(180)); it works as expected. What is happening?

Answer 1

rotate() accepts radians as its parameter by default, not degrees. By converting degrees to radians, the argument makes sense. Without the conversion, it's some random number of turns, so you wind up at whatever arbitrary rotation 180 radians is.

Your attempt to set angleMode, angleMode = DEGREES; doesn't do what you expect. This overwrites the p5 function window.angleMode. p5 will warn you about the reassignment:

You just changed the value of "angleMode", which was a p5 function. This could cause problems later if you're not careful.

function setup() {
  angleMode = DEGREES;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>

Generally, setters in p5 aren't assignments. The correct usage is calling the function, angleMode(DEGREES). This will allow rotate() to accept degrees by default so you don't need the radians() call.

function setup() {
  createCanvas(200, 200);
  angleMode(DEGREES);
}

function draw() {
  noStroke();
  fill(200, 102, 0);
  circle(100, 100, 180); // draw pivot
  strokeWeight(5);
  stroke(0, 0, 0);
  circle(100, 100, 15); // draw pivot point
  translate(100, 100); // move origin
  rotate(180);
  line(0, 0, 90, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>

As an aside, canvas transformations like translate() and rotate() will stack, so push() and pop() and typically used to save and restore the context after these operations:

function setup() {
  createCanvas(200, 200);
  angleMode(DEGREES);
}

function draw() {
  push();
  noStroke();
  translate(100, 100);
  fill(200, 102, 0);
  circle(0, 0, 180);
  strokeWeight(5);
  stroke(0, 0, 0);
  circle(0, 0, 15);
  rotate(180);
  line(0, 0, 90, 0);
  pop();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>

Since you're already translating, you might as well do it first and use 0, 0 as the origin for your drawings.

But it turns out that rotate() isn't even necessary here: line(0, 0, -90, 0); will achieve the same result, which lets you avoid transformations entirely:

function setup() {
  createCanvas(200, 200);
  angleMode(DEGREES);
}

function draw() {
  const x = 100;
  const y = 100;
  noStroke();
  fill(200, 102, 0);
  circle(x, y, 180);
  strokeWeight(5);
  stroke(0, 0, 0);
  circle(x, y, 15);
  line(x, y, x - 90, y);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>