7. Abstraction 3: Text

This final example will use the image pixel information and translate it into letters. At the beginning of our code we therefore not only have to create PImage, but in this case also PFont (https://processing.org/reference/PFont.html) as well as loading a string of characters. Since the image has been David Bowie, the string will load the song text of Major Tom.

PFont font;
PImage img;

String text = “Ground Control to Major Tom. Ground Control to Major Tom. Take your protein pills and put your helmet on. 
Ground Control to Major Tom. Commencing countdown, engines on. Check ignition and may God’s love be with you. Ten, Nine, Eight, Seven, Six, 
Five, Four, Three, Two, One, Lift off. This is Ground Control to Major Tom. You’ve really made the grade. And the papers want to know whose 
shirts you wear. Now it’s time to leave the capsule if you dare. This is Major Tom to Ground Control. I’m stepping through the door. 
And I’m floating in a most peculiar way. And the stars look very different today. For here. Am I sitting in a tin can. Far above the world. 
Planet Earth is blue. And there’s nothing I can do. Though I’m past one hundred thousand miles. I’m feeling very still. 
And I think my spaceship knows which way to go. Tell my wife I love her very much she knows. Ground Control to Major Tom. 
Your circuit’s dead, there’s something wrong. Can you hear me, Major Tom? Can you hear me, Major Tom? Can you hear me, Major Tom? 
Can you... Here am I floating round my tin can. Far above the Moon. Planet Earth is blue. And there’s nothing I can do”;

We then declare a number of global variables, in order to define the appearance of our text.

float fontSizeMax = 14; // max. font size
float fontSizeMin = 8; // min. font size
float spacing = 8; // text line height (x grid)
float kerning = 5; // space between letters (y grid)
int border = 10; // picture frame
int counter = 0; // count text length

Within ‘setup()’ we create our font (https://processing.org/reference/createFont_.html), resize our image to the defined screen size and prevent the ‘draw()’ function from looping.

void setup() {
  size(800, 800);
  background(255);
  font = createFont(“Times”, 10, true);
  img = loadImage(“bowie.jpg”);
  img.resize(width, height);
  noLoop();
}

In ‘draw()’ we first define our grid, load the color and brightness values from all pixels and map it to the maximum and minimum font size we defined. We then load our font and set the fill color.

void draw() {
  for (int y = border+5; y < height-border+5; y+=spacing) {
    for (int x = border; x < width-border; x+=kerning) {
      color c = img.pixels[y*img.width+x];
      float b = brightness(c);
      b = map(b, 0, 255, fontSizeMax, fontSizeMin);
      float fontSize = b;
      textFont(font, fontSize);
      fill(c);

Finally we load each character that we stored in our string using the ‘charAt()’ function, which returns the character at the specified index. Starting from 0 our counter increases by 1 each time the loop is run. Once the counter is equal to the amount of characters stored in our string, which we determine by using the ‘length()’ function.

      char letter = text.charAt(counter);
      text(letter, x, y);
      counter++;
      if (counter == text.length()) {
        counter = 0;
      }
    }
  }
}

As described in the ‘Processing – Generative Design Tutorial: Introduction’ in chapter 20: Export, various methods for saving the created content in different formats, such as pdf, svg or jpg, exist.
The final program looks like this (sketch_05_06):