User Tools

Site Tools


courses:intro.prototyping.fall.2011.nov03

Strings/text in Processing

Strings are objects used for dealing with text. Objects are like variables that not just holds information but also contains functions to deal with that information. We have already used this for example with Audioplayer that had the functions Audioplayer.play(), Audioplayer.pause() and Audioplayer.rewind().

Some information on what functions are available with strings can be found here. A lengthier explanation on what you can do with Strings and text are found in the reference.

An example of using Strings while developing a program
String someText;
 
void setup()
{
  size(640,480);
  background(94,96,111);
  someText = "mouseX = ";
}
 
void draw()
{
 
  background(94,96,111);
  println(someText+mouseX);
  delay(250);
}

But of course we also want to be able to play with text at the actual canvas. And FONTS! Drawing text in Processing is done with the function text() . The reference info on how text() works is found here

Extending the debug example using a font and drawing on the canvas we get this
String someText;
PFont someKindOfFont;
 
void setup()
{
  size(640,480);
  background(94,96,111);
  someText = "mouseX = ";
  someKindOfFont = loadFont("Nyctophobia-30.vlw");
}
 
void draw()
{
  background(94,96,111);
  println(someText+mouseX);
  textFont(someKindOfFont,48);
  text(someText+mouseX, 200, 200);   
}
Here's the typewriter example

Note that adding “\r\n” to a string means adding carriage return and line feed. When I'm checking for “\b” I'm checking for backspace. Notice that the actual actions in void draw is very simple, I'm just drawing the content of the String variable. Any change to the text is done when keys are pressed by adding or subtracting to/from the variable.

String interactiveText = "";
PFont someKindOfFont;
int charInRow = 0; //for keeping track of characters for a row
 
void setup()
{
  size(640,480);
  background(94,96,111);
  someKindOfFont = loadFont("Nyctophobia-30.vlw");
}
 
void draw()
{
 
  background(94,96,111);
  textFont(someKindOfFont,48);
  text(interactiveText, 10, 50); 
 
}
 
void keyPressed() //runs whenever a key is pressed
{
  if(key == '\b') //if the key pressed turns out to be backspace... 
  {
     //remove the last character and subtract one from the counter variable
     interactiveText = interactiveText.substring(0,interactiveText.length()-2); 
     charInRow = charInRow - 1;
  }
 
  if(charInRow > 22) //if we've written 22 characters in a row
  {
    //add carriage return and linefeed, and reset the counter to 0
    interactiveText = interactiveText + "\r\n" + key;
    charInRow = 0;
  }
  else //any other case when a key has been pressed
  {
    //add the new character to the String variable and thereby the drawn text, increase counter
    interactiveText = interactiveText + key;
    charInRow = charInRow + 1;
  }
}
Psychedelic jumble example

We make use of mouseX and mouseY to influence backgroundcolor, and also draw certain text only when the mousepointer is beyond certain values.

String someText;
PFont someKindOfFont;
void setup()
{
  size(640,480);
  someText = "mouseX = ";
  someKindOfFont = loadFont("Nyctophobia-30.vlw");
 
}
 
void draw()
{
 
  background(94,mouseX/2,mouseY);
  textFont(someKindOfFont,48);
  text(someText+mouseX, 200, 200);   
  text("mouseY = "+mouseY, 200, 300);
  if(mouseY < 10)
  {
    text("Woah!",200,400);
  }
  if(mouseY > 450)
  {
    text("Dude!",200,400);
  }
  if(mouseX < 10)
  {
     text("Awesome!",200,400);
  }
  if(mouseX > 600)
  {
    text("Code five!",200,400);
  }
 
}
courses/intro.prototyping.fall.2011.nov03.txt · Last modified: 2011/11/03 05:16 by 130.239.152.22