Skip to content

Text

The text() function lets you write a text string to the display. You can use it in two ways - first you can give it a string, and x-coordinate and a y-coordinate and the string will be displayed at the position you have specified. Try thins using the code in the box below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    String s;

    void setup() {
      s = "This is a text string";

      size(800,400);
      background(255,255,255);
      fill(0);
      textSize(40);

      text(s, 100, 100);
    }

Here is an explanation of the code line by line:

Line Command Description
1 String s; Declares the string variable s
4 s = "This is a text string"; Sets the value of the variable
6 size(800,400); Sets the size of the display window
7 background(255,255,255); Sets the background colour to white
8 fill(0) Sets the text colour to black
9 textSize(40); Sets the height of the characters to 40px
11 text(s, 100, 100); Displays the string starting at (100,100)

You can also place the string within a rectangular area by giving the text() function two more parameters. In that case the command would be text(s, x, y, width,height) where the top left-hand corner is at (x, y).

To see this working, change the code from the previous example so that the string appears in a box 200px wide and 200px high.

What happens if you make the box too small?

Interaction

The next example uses some of the techniques you have seen before in other exercises. It also checks whether the user has pressed a key on the keyboard. If so, it recognises the up and down arrow keys and moves the text string in the chosen direction. Load the code into the PDE and run it. Press some arrow key to see what happens.

 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
34
35
36
    String s;
    int pos;

    void setup() {
      size(1000,1000);
      background(255,255,255);
      pos = height/2;
      fill(0);
      textSize(40);
      s = "Press an arrow key";
    }

    void draw() {
      if (keyPressed) {
        if (key == CODED) {
          if (keyCode == UP) {
            s = "Going up!";
            fill(255,0,0);
            pos -=10;
          } else if (keyCode == DOWN) {
            s = "Going down!";
            fill(0,255,0);
            pos +=10;
          }
          else {
            s = "Going nowhere...";
            fill(0,0,255);
          }
        } else {
          s = "Going nowhere...";
          fill(0,0,255);
        }
      }
        background(255,255,255);
        text(s, width/2, pos);
    }

The table below highlights some interesting features in this example.

Line Command Description
7 pos = height/2; The variable pos is set to half the height of the display.
14 if (keyPressed) { The value keyPressed is set automatically
15 if (key == CODED) { There are two types of key - those in the ASCII character set and others. Ordinary characters can be used directly, but the others are represented by codes. This condition tests whether the key pressed is a non-ASCII character.
16 #if (keyCode == UP) { Checks whether the key pressed is the up arrow
18 pos -=10; This command subtracts 10 from the current value of pos
34 text(s, width/2, pos); Displays the text string half-way across the display and at a height determined by the value of pos

Challenge

The sketch above only makes the string move up and down. Change it so that it also moves left and right when the user presses the left and right arrow keys.

Further reading

Key code

Fill reference

Text size

Text