Words
The text() function is used for writing words to the screen. The words can be aligned left, center, or right with the textAlign() function, and like with shapes, words can be colored with fill().
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
let font,
fontsize = 40;
function preload() {
// 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');
}
function setup() {
createCanvas(710, 400);
// Set text characteristics
textFont(font);
textSize(fontsize);
textAlign(CENTER, CENTER);
}
function draw() {
background(160);
// Align the text to the right
// and run drawWords() in the left third of the canvas
textAlign(RIGHT);
drawWords(width * 0.25);
// Align the text in the center
// and run drawWords() in the middle of the canvas
textAlign(CENTER);
drawWords(width * 0.5);
// Align the text to the left
// and run drawWords() in the right third of the canvas
textAlign(LEFT);
drawWords(width * 0.75);
}
function drawWords(x) {
// The text() function needs three parameters:
// the text to draw, the horizontal position,
// and the vertical position
fill(0);
text('ichi', x, 80);
fill(65);
text('ni', x, 150);
fill(190);
text('san', x, 220);
fill(255);
text('shi', x, 290);
}
