p5 text

The text() function defined by p5 renders strings of text.

text(string, x, y) requires at least 3 arguments:

string: the text to display
x: x-coordinate of text
y: y-coordinate of text

1
2
3
4
5
function setup() {
    createCanvas(100, 100);
    background("white");
    text("MMP 210", 20, 20);    
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Strings review§

A string is a datatype comprised of a "string" of characters. Characters can be alphabetic, numeric and special characters. Strings can be made of English characters as well as characters from other supported languages.

1
2
3
4
5
6
7
8
9
10
function setup() {
    createCanvas(800, 100);
    background(255);
    var str1 = "Hello world.";
    var str2 = "你好，世界";
    var str3 = "Strings can also include numbers like 100, punctuation like ! and special characters like π or © or ∆ or 
        ¯\_(ツ)_/¯";
    text(str1, 20, 20);
    text(str2, 20, 40);
    text(str3, 20, 60);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Strings have methods and properties used to manipulate them.

We'll talk more about methods and properties generally later in the semester, but for now, a method is a function associated with one object or variable, and a property is like a variable also associated with an object. The difference is basically the come after a dot at the end of a variable name.

var str = "Hello world";
str.length;
// 11
str[0];
// "H"
str.replace("Hello", "Goodbye");
// "Goodbye world"

Strings can be concatenated or added together.

var h = "hello";
var w = "world";
console.log(h + " " + w);

Styling strings with p5§

p5 uses the the stroke and fill colors like other shapes, but also uses textSize(), textStyle() and textFont() to change the style of our text.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function setup() {
    var canvas = createCanvas(640, 360);
    canvas.drawingContext.miterLimit = 2; // fix for stroke edges
    background(254);
    text("MMP 210", 20, 20);
    textSize(100);
    text("Week 7", 20, 100);
    fill('plum');
    textStyle(ITALIC);
    text("p5 Text", 100, 200);
    stroke('darkblue');
    strokeWeight(10);
    textFont("menlo");
    text("MMP 210", 200, 300);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

p5 can also use other default HTML fonts, anything that is browser supported.

1
2
3
4
5
6
7
function setup() {
    createCanvas(640, 360);
    background("white");
    textSize(100);
    textFont("Comic Sans MS");
    text("MMP 210", 20, 200);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Layout and alignment§

A rectangle to contain the text can be specified with the optional 4th and 5th arguments for width and height.

1
2
3
4
5
6
7
8
function setup() {
    createCanvas(400, 200);
    background("white");
    var paragraph = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse earum quod exercitationem vero, 
        temporibus veritatis in ea voluptates dolore doloremque amet sint, doloribus blanditiis maiores enim qui fuga. 
        Adipisci, quaerat?";
    text(paragraph, 20, 20, 200, 100);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Paragraph styles are set with textAlign(), which uses the first argument for horizontal alignment and an optional second argument for vertical alignment.

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
function setup() {
    createCanvas(640, 360);
    textSize(40);
    textFont('Comic Sans MS');
    background(220);
    
    var str = "banana";
    var x = 160;
    var y = 60;
    // default is textAlign(LEFT);
    text(str, x, y);
    stroke('blue');
    strokeWeight(2);
    line(x, y - 40, x, y + 20);
    y += 100;
    
    textAlign(CENTER);
    noStroke();
    text(str, x, y);
    stroke('blue');
    strokeWeight(2);
    line(x, y - 40, x, y + 20);
    y += 100;
    
    textAlign(RIGHT);
    noStroke();
    text(str, x, y);
    stroke('blue');
    strokeWeight(2);
    line(x, y - 40, x, y + 20);
    y += 100;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
function setup() {
    createCanvas(640, 360);
    textSize(40);
    textFont('Comic Sans MS');
    background(220);
    
    var str = "banana";
    var w = textWidth(str);
    var x = 160;
    var y = 40;
    // default is textAlign(LEFT, BOTTOM);
    text(str, x, y);
    stroke('blue');
    strokeWeight(2);
    line(x - 10, y, x + w + 10, y);
    y += 100;
    
    textAlign(LEFT, CENTER);
    noStroke();
    text(str, x, y);
    stroke('blue');
    strokeWeight(2);
    line(x - 10, y, x + w + 10, y);
    y += 100;
    
    textAlign(LEFT, TOP);
    noStroke();
    text(str, x, y);
    stroke('blue');
    strokeWeight(2);
    line(x - 10, y, x + w + 10, y);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Text leading is the distance between lines in a paragraph, controlled by textLeading function.

1
2
3
4
5
6
7
8
9
10
11
function setup() {
    createCanvas(640, 360);
    background("white");
    textSize(20);
    var paragraph = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse earum quod exercitationem vero, 
        temporibus veritatis in ea voluptates dolore doloremque amet sint, doloribus blanditiis maiores enim qui fuga. 
        Adipisci, quaerat?";
    textLeading(10);
    text(paragraph, 20, 20, 400, 400);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Interacting with text§

How might we make the previous example interactive?

Remember to make this interactive we need to substitute hard coded values with numbers.

This is a simple one because the there's an obvious hard coded value, the textLeading(10) argument.

1
2
3
4
5
6
7
8
9
10
11
12
13
function draw() {
    background("white");
    
    var paragraph = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse earum quod exercitationem vero, 
        temporibus veritatis in ea voluptates dolore doloremque amet sint, doloribus blanditiis maiores enim qui fuga. 
        Adipisci, quaerat?";
    var s = mouseX;
    textSize(s);
    var leadingSize = mouseY;   
    textLeading(leadingSize);
    text(paragraph, 20, 20, 400, 400);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

We can also interact with the data within a string.

This example changes the number of characters displayed using a little math, the length property and the substring function.

1
2
3
4
5
6
7
8
9
10
11
12
13
function draw() {
    background("white");
    textSize(100);
    textFont('Comic Sans MS');
    textAlign(LEFT, CENTER);
    
    var str = "banana";
    var length = str.length; // number of characters in the string
    var n = map(mouseX, 0, width, 0, length); // map position of x to number of characters
    var displayString = str.substring(0, n);
    text(displayString, 20, height / 2);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX