Let’s have a look at how to rotate things.
Next, we want to rotate our emoji. To achieve that, we first have to understand how rotation works on computers.
About rotations
Everything with angles in computer programming is often handled in radians instead of degrees. Degrees go from 0 to 360 degrees, while radians go from 0 to 2 PI (3,14…). So, 90 degrees are ½ PI, 180 degrees are 1 PI and so on. If you want to work with degrees instead of radians, you can easily change that by calling angleMode(DEGREES); before you use the rotate command. Now you can use degrees instead of radians in your code.
We will work with radians in our examples.
If you would like to work with radians, p5.js has some useful constants for you: QUARTER_PI, HALF_PI, PI, and TWO_PI. You can find more constants and tips at your CheatSheets.
Now that we understand how rotation works, we can use it together with what we learned about translation to rotate our emoji.
To achieve that, we can start with our translated emoji code and add a new line after the translate command to rotate it:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
background(255, 255, 255);
strokeWeight(2);
push();
translate(150, 150);
rotate(PI);
// The background of the emoji
fill(255, 255, 0);
ellipse(0, 0, 200);
// The eyes of the emoji
fill(255, 255, 255);
ellipse(-30, -20, 40);
ellipse(20, -30, 60);
// The pupils of the emoji
fill(0, 0, 0);
ellipse(-20, -20, 10);
ellipse(0, -40, 10);
// The mouth and the teeth of the emoji
fill(255, 255, 255);
rect(-60, 20, 120, 40, 20);
line(-60, 40, 60, 40);
line(-40, 20, -40, 60);
line(-20, 20, -20, 60);
line(0, 20, 0, 60);
line(20, 20, 20, 60);
line(40, 20, 40, 60);
pop();
The emoji is rotated by PI
If you want to use degrees instead of radians, here is the same example, but with angles. Kindly note that we changed the angleMode to be able to use degrees.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
angleMode(DEGREES);
background(255, 255, 255);
strokeWeight(2);
push();
translate(150, 150);
rotate(180);
// The background of the emoji
fill(255, 255, 0);
ellipse(0, 0, 200);
// The eyes of the emoji
fill(255, 255, 255);
ellipse(-30, -20, 40);
ellipse(20, -30, 60);
// The pupils of the emoji
fill(0, 0, 0);
ellipse(-20, -20, 10);
ellipse(0, -40, 10);
// The mouth and the teeth of the emoji
fill(255, 255, 255);
rect(-60, 20, 120, 40, 20);
line(-60, 40, 60, 40);
line(-40, 20, -40, 60);
line(-20, 20, -20, 60);
line(0, 20, 0, 60);
line(20, 20, 20, 60);
line(40, 20, 40, 60);
pop();