In order to display text efficiently you need to work with strings.

Just like numbers, text and letters have data types associated with them. Individual letters fall under the char, or character, data type. Characters are normally written inside a pair of single quotes - for example 'a'. A grouping of characters is called a string and is normally written in double quotes - "Cool!".

String Data Type

The string data type holds strings. Just as with any other type, when you create a string, you need a variable name and type. Here I initialize the string as empty:

String myString = '' ";

String myOtherString = "Something cool";

For this example, I started with the creative name of myString, and I initialized it to " ", which is an empty string. Even when you're not ready to initialize a new string to any particular value, always at least set it equal to the empty string or your code won't compile.

A great thing you can do with strings is add, or concatenate them. That means you can take two strings and mash them together to make one longer string. For example, let's combine our example strings.

String myString = '' ";

String myOtherString = "Something cool";

String aString = "is going to happen, I promise";

void setup() {

myString = myOtherString + " " + aString;

print(myString);

}

This piece of code shows the power of concatenation by adding aString to myOtherString. You can even throw single characters into the mix, as I did by adding a space (" ") between the two strings. In this case, I'm just printing the string to the console. You can also split strings, read individual characters, use an if() statement to test them and more. For now, let's just look at outputs.

Basic Text Functions

Displaying text is handy when you use the text() function --- which you should already know due to previous classes. But let's have a mini review if you need it. In draw you can write

text(myString, 125,125);

The text() function needs at least 3 parameters - the data you want to display, x coordinate, y coordinate. The origin of the text is the upper-left corner of the string you're printing, just like in the rect() function. Try all of this now including the strings!

Text Modifiers

The text() function has a number of modifier functions that make displaying and reading text much easier. The first, and probably the most useful, is the textSize() which you'd pass a single parameter to set the height you want in pixels. Make sure you place your modifier BEFORE THE TEXT YOU WANT TO MODIFY.

If you want to change the origin of the text field you can use textAlign() function with the same parameters you have seen before CORNER, CORNERS, CENTER ETC.

Text boxes are particularly lit when you're designing specific areas for information within a sketch, and you can envision the text() function like a text box from any other software. Passing the text() function width and height values will cause the text to wrap automatically when your string data gets too long. You can use fill() to change the text color .

void setup() {

size(250,250);

background(150);

smooth();

}

void draw() {

background(150);

String myString = "I love strings, even when they are in knots";

textAlign(CENTER);

textSize(20);

fill(0,0,0);

text(myString, 10, height/3, 180,120);

}

Notice there are 2 background functions and that is so the string doesn't look so pixelated. The text is really boring still. This is where you need to add a font. AKA Jump on over to Helpful Extras! Fonts!

If you want great fonts for free you can always go to www.dafont.com and add a font to your computer. You need to install that custom font onto your computer though. Also check out the Archive Sketch and Movie Maker tool if you are bored!

Loading a Font

First create a variable to hold your font file. Again, use something simple and descriptive but don't use the same name as your font filename because that can confuse the program.

PFont myFont; //create a font variable

void setup() {

myFont = loadFont("font.vlw");

}

I create a font variable called myFont with the data type of PFont, and then in setup code I assigned the font.vlw file to myFont using loadFont(). Processing is finicky when it comes to spelling errors etc so be careful here.

A Simple Typewriter

Most project, especially data dashboards, rely on text to communicate specific information. In this section, you'll create a really simple ( if a bit janky) typewriter application I wouldn't write a book using it but it is useful and fun. The ultimate goal of the final sketch is to read the keyboard keys being pressed, add each character to a string, and draw that string onto the sketch.

First, open the Create Font tool, create your font (I selected a 14-point Arial font), and load it to your sketch.

PFont myFont;

String myString = "" ;

void setup() {

size(800,1100);

background(255);

myFont = loadFont("font.vlw");

}

void draw() {

textFont(myFont);

}

To ensure your page begins blank, start with an empty string. To make your sketch window feel like a piece of paper, set window size to 800x1100 pixels which is roughly the same aspect ratio as a sheet of US Letter paper. Your string should stay visible the entire time, so place the background() function in the setup() code as well. I chose a white background but pick whatever color you want!

After you're all set up, applying the loaded font to text is just like using any other modifier: you need to place it before the text() function that you want to modify. To change the font, call textFont() and pass it the variable name.

Fetching Letter Keys

Next, tackle the rest of the draw loop. The keyPressed and key system variables will help you read keypresses within your sketch, and you can check those using an if() statement.

void draw() {

background(255);

textFont(myFont);

if(keyPressed) {

myString = myString + key;

}

fill(0);

text(myString, 10, 10, width, height);

}

When a key is pressed, concatenate new letters to your string by adding the key variable, which returns a character of the key that was pressed. Then set a fill() color of your text; I'm using black. Finally, display your string using the text() function in the text box mode, which allows for text wrapping. Click run and try it out!!

*Remember you can use textSize to shrink or expand your font but it will be grainy if your initial font size was small when you created the font.**

Useful Delays : aka Slowing Down the Computer A Bit

The incredibly handy delay() function is awesome. If you're familiar with Arduino you probably know this function and its power all too well.

If you're new that is okay too. delay() is essentially a stoplight for your computer - a way for you to tell it to wait for a given amount of time before moving on. Just pass it the amount of milliseconds you want it to wait, keeping in mind that 1,000 milliseconds equals 1 second. Try it out!

void draw() {

background(255);

textFont(myFont);

if(keyPressed) {

myString = myString + key;

delay(100);

}

fill(0);

text(myString, 10, 10, width, height);

}

A Data Dashboard

You can build live text readouts of information using the text() function and raw variable data, and you can have text change when a value changes, too. You can do this with a simple group of if() statements and reassigning of a string.

The readout or dashboard that I will teach you to make here, is meant for you to hack and change, and it gives you a good structure to use in coding. Text, strings and dashboards will show up more if you continue to code. So come back here whenever you need a refresher. But first, spend time playing with this code and hacking it .

Grabbing Statistics and Setting Up

This clear, concise data dashboard displays 3 statistics; the time, your mouse coordinates, and which quadrant of your sketch your cursor is in. The code for the dashboard starts with four global variables.

PFont font;

String myString = "";

String location = "";

String dispTime = "";

void setup() {

size(800,800);

font = loadFont("ADAM-48.vlw");

}

void draw() {

background(150,150,0);

if( mouseX <= width/2 && mouseY <= height/2) {

myString = "UPPER LEFT";

fill(255);

}

if( mouseX >= width/2 && mouseY <= height/2) {

myString = "UPPER RIGHT";

fill(0,0,255);

}

if( mouseX <= width/2 && mouseY >= height/2) {

myString = "LOWER LEFT";

fill(255,255,0);

}

if( mouseX >= width/2 && mouseY >= height/2) {

myString = "LOWER RIGHT";

fill(255,0,0);

}

}

Next draw the ellipse immediately after the last if() statement but before the ending curly bracket.

noStroke();

ellipse(mouseX, mouseY, 200,200); //this is your cursor

Add modifiers inside the draw loop to display the text stored in myString on the ellipse.

fill(0);

textFont(font);

textAlign(CENTER);

textSize(25);

text(myString, mouseX, mouseY); //this is so the text follows the mouse, just like the ellipse does! RUN YOUR CODE

try it out!

Showing Time/Mouse Coordinates

The last bit of code in this project creates two strings and displays the exact location of your cursor, along with the time. Trust me - this is useful. Add this inside of your draw loop

String location = "Cursor Location: " + mouseX + ", " + mouseY;

text(location, width/2, height/2);

String dispTime = "Time -> " + hour() + ":" + minute() + ":" + second();

text(dispTime, width/2, (height/2) + 45);

To concatenate a string to variable data, all you have to do is add them together like you did in the above code. The text() function allows you to print out that data into your program.

Try it out! Add data/text for the current date. Keep hacking this code and changing it. Remember coding is like a foreign language, the more you use it, the better you will be.