Skip to content

Drawing Text#

So far, we've just drawn shapes to the screen, but of course you can also draw text.

Go Wandering

Maybe you found out about text on your own. That's great! here is a lot of stuff we can't cover in a single course, so I'd encourage you to go wandering through the reference manual and try anything that you find interesting!

a processing window that draws some text

By now, you should have no trouble at all figuring out what those three lines mean. There's one thing that's new in the context of this course, though: Those double quotes! We use " to contain text, just like we did at the very beginning for our println() output! I say "text", but this would be a "String", to be more precise.

The other parameters in text() are just what you know from other commands in processing already: some numbers that are coordinates in x and y direction. Text also reacts to fill() and stroke() in the way that you'd expect.

Draw some text!#

Put this into processing

copy these lines into processing and experiment with them!

float textRotation = 0;

void setup() {
  size(300, 200);
}

void draw() {
  background(255, 255, 255);
  fill(255, 120, 0);
  textRotation += 0.01;
  translate(50, 50);
  rotate(textRotation);
  text("test", 0, 0);
}

Draw some more!#

Text has a lot of things you can change: textSize() and textAlign() should be next on your list of things to try.

Another interesting question to have is "how large will my text be?", and there's a command for that, too: textWidth(). Let's put them into an example, too:

Gray Background, yellow box, orange text saying "Processing"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
void setup() {
  size(300, 200);
}

void draw() {
  textSize(40);
  float widthInPixels = textWidth("Processing");
  println("this is going to be", widthInPixels, "Pixels wide");

  translate(30, 30);

  fill(255, 255, 0);
  rect(0, 0, widthInPixels, 40);
  fill(255, 120, 0);
  text("Processing", 0, 40);
}

I have no clue how wide that text is going to be, but I can still draw something (the yellow rectangle) with the exact same width!

There's one problem with the code, though: We put in "Processing" twice (in lines 7 and 15). It would be so much nicer if we could put that String into a variable instead.