Skip to content

Language Settings

Text Rotation

Draws letters to the screen and rotates them at different angles.

This example is ported from the Text Rotation example on the Processing website

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
let font,
  fontsize = 32;
let angleRotate = 0.0;
function setup() {
  createCanvas(710, 400);
  background(0);
  
  // Ensure the .ttf or .otf font stored in the assets directory
  // is loaded before setup() and draw() are called
  font = loadFont('assets/SourceSansPro-Regular.otf');
  
  // Set text characteristics
  textFont(font);
} 
function draw() {
  background(0);
  strokeWeight(1);
  stroke(153);
  push();
  let angle1 = radians(45);
  translate(100, 180);
  rotate(angle1);
  // Draw the letter to the screen
  text("45 DEGREES", 0, 0);
  line(0, 0, 150, 0);
  pop();
  push();
  let angle2 = radians(270);
  translate(200, 180);
  rotate(angle2);
  // Draw the letter to the screen
  text("270 DEGREES", 0, 0);
  line(0, 0, 150, 0);
  pop();
  
  push();
  translate(440, 180);
  rotate(radians(angleRotate));
  text(int(angleRotate) % 360 + " DEGREES ", 0, 0);
  line(0, 0, 150, 0);
  pop();
  
  angleRotate += 0.25;
  stroke(255, 0, 0);
  strokeWeight(4);
  point(100, 180);
  point(200, 180);
  point(440, 180);
}
X

creative commons license