rotate() typically uses radians as its default parameter, not degrees. By converting degrees to radians, the argument becomes meaningful. If not converted, it results in a random number of turns, leading to an arbitrary rotation of 180 radians.
Your attempt to set angleMode using angleMode = DEGREES; does not have the intended effect. This action overrides the p5 function window.angleMode, triggering a warning message from p5:
You just changed the value of "angleMode," which was a p5 function. This may cause issues later on if not handled carefully.
function setup() {
angleMode = DEGREES;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
In p5, setters are generally functions rather than direct assignments. The correct method involves invoking the function, like angleMode(DEGREES). This allows rotate() to accept degrees by default, eliminating the need for the radians() conversion.
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>
Additionally, canvas transformations like translate() and rotate() accumulate, hence the use of push() and pop() to retain 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>
Considering you are already translating, positioning at 0, 0 would be beneficial as the origin for your drawings.
Surprisingly, in this scenario, rotate() is unnecessary: line(0, 0, -90, 0); achieves the same outcome without transformations:
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>