p5: Strings, fonts, text generation

When we want to print messages with print we use text in “quotes”.
Technically we are passing a string as parameter. You can handle text as variable as long as you declare the proper type.

Declaration and assignment:

var name = "paolo";

Also strings:

var text1 = "666";
var text2 = "two words";
var text3 = "text on \nTwo lines";
var text4 = " "; //space
var text1 = "6$%#@# AaBb()";

Concatenation:

var name = "paolo";
var lastName = "pedercini";
var nickName = "pizza";
var fullName = name + " \"" + nickName + "\" " + lastName;

function setup() {
createCanvas(300, 300);
background(0);
fill(255);

text(name + " " + lastName, 15, 30);

text(fullName, 15, 60);
}

function draw() {

}

Create a text generator that concatenates two words randomly picked from two arrays of strings like the p5 editor project name generator [adjective] + [noun].

Formatting Text

You can change text color, it’s the same as the fill, and alignment.

function setup() {
createCanvas(300, 300);
background(0);

fill(255,255,255);

//alignment
textAlign(CENTER);
text("This text is centered.", width / 2, 60);
textAlign(LEFT);
text("This text is left aligned.", width / 2, 100);

//change fill + alpha
fill(255,255,255, 100);

textAlign(RIGHT);
text("This text is right aligned.", width / 2, 140);
}

function draw() {

}

 

Fonts

Download a font an try to use it in a sketch.
For free fonts check  dafont and google fonts.

var myFont;
function preload() {
myFont = loadFont('assets/custom-font.ttf');
}

function setup() {
fill('#ED225D');
textFont(myFont);
textSize(36);
text('p5*js', 10, 50);
}

Now style your text generator.

Context Free Grammar

p5 has a library for text generation called RiTA you can use with p5. Check it out if you want. For this assignment we are going to use a subset of it: the context-free grammar.

Since it involves two external files I’ll refer to the example here

The grammar structure works like this. Randomize one of these sentences separate by |.

{
"<start>" : "I love cats | I hate dogs | I like mice"
}

If you encounter a term in <brackets> look for where it’s defined, randomize one of the strings and replace the term in the brackets:

{
"<start>" : "I love <animal> | I hate <animal> | I like <animal>",
"<animal>" : "cats | dogs | mice"
}

This can happen to any level of depth.
Just remember the json structure:
-everything is between curly brackets{}
-every item is structured like this “<label>” : “content”,
-the last item doesn’t need the comma

Text generation for twitterbots

If you are interested in generating text to be twitted to the world you can use these tools:

Kate Compton’s Tracery

Tutorial; http://www.crystalcodepalace.com/traceryTut.html

Github (full documention); https://github.com/galaxykate/tracery

Visual editor; http://www.brightspiral.com/tracery/

George Buckenham’s Cheap Bots Done Quick

http://cheapbotsdonequick.com/

Image bots in Tracery

https://github.com/derekahmedzai/cheapbotsdonequick/blob/master/svg-tracery-image-bots.md