The text() function defined by p5 renders strings of text.
text(string, x, y) requires at least 3 arguments:
string: the text to displayx: x-coordinate of texty: y-coordinate of text
function setup() {
createCanvas(100, 100);
background("white");
text("MMP 210", 20, 20);
}
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.
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);
}
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.
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);
}
function setup() {
createCanvas(640, 360);
background("white");
textSize(100);
textFont("Comic Sans MS");
text("MMP 210", 20, 200);
}
Layout and alignment
A rectangle to contain the text can be specified with the optional 4th and 5th arguments for width and height.
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);
}
Paragraph styles are set with textAlign(), which uses the first argument for horizontal alignment and an optional second argument for vertical alignment.
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;
}
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);
}
Text leading is the distance between lines in a paragraph, controlled by textLeading function.
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);
}
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.
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);
}
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.
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);
}