Shiffman Daniel. Learning processing
Подождите немного. Документ загружается.
This page intentionally left blank
Lesson Eight
The Outside World
17 Text
18 Data Input
19 Data Streams
This page intentionally left blank
Text 305
17 Text
“ I could entertain future historians by saying I think all this superstring stuff is crazy. ”
—Richard Feynman
In this chapter:
– Storing text in a String object.
– Basic String functionality.
– Creating and loading fonts.
– Displaying text.
17.1 Where do Strings come from?
In Chapter 15, we explored a new object data type built into the Processing environment for dealing with
images—PImage. In this chapter, we will introduce another new data type, another class we get for free
with Processing , called String .
e String class is not a completely new concept. We have dealt with Strings before whenever we have
printed some text to the message window or loaded an image from a fi le.
println( "printing some text to the message window! "); // Printing a String
PImage img = loadImage("filename.jpg"); // Using a String for a file name
Nevertheless, although we have used a String here and there, we have yet to explore them fully and
unleash their potential. In order to understand the origins of the String , let’s remind ourselves where
classes come from. We know we can create our own classes (Zoog, Car, etc.). We can use classes built
into the Processing environment, such as PImage. And fi nally, in the last chapter we learned that we could
import additional Processing libraries to use certain classes such as Capture or Movie.
Nevertheless, these classes come from our lives in the Processing bubble. We have yet to venture out into
the great unknown, the world of thousands upon thousands of available Java classes. Before we leap over
the Java API cliff (which we will do in Chapter 23), it is useful to just peek over the edge and explore one
of the most basic and fundamental Java classes out there, the String class, which we will use to store and
manipulate text.
Where do we fi nd documentation for the String class?
In order to learn the details about built-in variables, functions, and classes, the Processing reference has
always been our guide. Although technically a Java class, because the String class is so commonly used,
Processing includes documentation in its reference. In addition, no import statement is required.
http://www.processing.org/reference/String.html
306 Learning Processing
is page only covers a few of the available methods of the String class. e full documentation can be
found at Sun’s Java site:
http://java.sun.com/j2se/1.4.2/docs/api/java/lang/String.html
(Also note the URL for the entire Java API: http://java.sun.com/j2se/1.4.2/docs/api).
We are not going to cover how to use the Java documentation just yet (see Chapter 23 for more), but you
can whet your appetite by just visiting and perusing the above links.
17.2 What is a String ?
A String , at its core, is really just a fancy way of storing an array of characters—if we did not have the
String class, we would probably have to write some code like this:
char[] sometext = { ' H ', ' e ' , ' l ' , ' l' , ' o ' , ' ' ,' W ' , ' o ' , ' r ' ,' l ' , ' d ' } ;
Clearly, this would be a royal pain in the Processing behind. It is much simpler to do the following and
make a String object:
String sometext = " How do I make a String? Type characters between quotes! " ;
It appears from the above that a String is nothing more than a list of characters in between quotes.
Nevertheless, this is only the data of a String . We must remember that a String is an object with
methods (which you can fi nd on the reference page). is is the same as how a PImage object
stored the data associated with an image as well as had functionality in the form of methods: copy( ) ,
loadPixels( ) , and so on. We will look more closely at String methods in Chapter 18. However, here are a
few examples.
e method charAt( ) returns the individual character in the String at a given index. Strings are just like
arrays in that the fi rst character is index #0!
Another useful method is length( ) . is is easy to confuse with the length property of an array. However,
when we ask for the length of a String object, we must use the parentheses since we are calling a function
called length( ) rather than accessing a property called length.
String message = " This String is 34 characters long. " ;
println(message.length());
String message = " a bunch of text here. " ;
char c = message.charAt(3);
println(c);
________
Exercise 17-1: What is the result of the following code?
Text 307
Exercise 17-2: Loop through and print every character of a String one at a time.
String message = " a bunch of text here. ";
for (int i = 0; i < _____________ ); i + + ){
char c = ________________ ;
println(c);
}
We can also change a String to all uppercase (or lowercase) using the toUpperCase( ) method.
String uppercase = message.toUpperCase() ;
println(uppercase);
You might notice something a bit odd here. Why didn’t we simply say “ message.toUpperCase( ) ” and then
print the “ message ” variable? Instead, we assigned the result of “ message.toUpperCase( ) ” to a new variable
with a diff erent name— “ uppercase ” .
is is because a String is a special kind of object. It is immutable . An immutable object is one whose data
can never be changed. Once we create a String , it stays the same for life. Any time we want to change the
String , we have to create a new one. So in the case of converting to uppercase, the method toUpperCase( )
returns a copy of the String object with all caps.
e last method we will cover in this chapter is equals( ) . You might fi rst think to compare Strings using
the “ = = ” operator.
String one = " hello";
String two = " hello";
println(one = = two);
Technically speaking, when “ ” is used with objects, it compares the memory addresses for each object.
Even though each string contains the same data— “ hello ” —if they are diff erent object instances, then
“ ” could result in a false comparison. e equals( ) function ensures that we are checking to see if two
String objects contain the exact same sequence of characters, regardless of where that data is stored in the
computer’s memory.
String one = " hello";
String two = " hello";
println(one.equals(two));
Although both of the above methods return the correct result, it is safer to use equals( ) . Depending on
how String objects are created in a sketch, “ ” will not always work.
308 Learning Processing
One other feature of String objects is concatenation, joining two Strings together. Strings are joined with
the “ ” operator. e plus operator ( ), of course, usually means add in the case of numbers. When used
with Strings , it means join .
String helloworld = " Hello " + " World " ;
Variables can also be brought into a String using concatenation.
int x = 10;
String message = " The value of x is: " + x;
We saw a good example of this in Chapter 15 when loading an array of images with numbered fi lenames.
Exercise 17-3: Find the duplicates in the following array of Strings.
String words = { "I","love " , " coffee " , " I " , " love " , " tea " } ;
for (int i = 0; i < _______________; i + + ){
for (int j = __; j < _______________; j + + ){
if (___________________) {
println(____________ + " is a duplicate. " );
}
}
}
at rectangle is 10 pixels wide, 12 pixels tall and sitting right at (100,100).
float w = 10;
float h = 12;
float x = 100;
float y = 100;
String message =
____________________________________
;
println(message);
Exercise 17-4: Concatenate a String from the variables given that outputs the following
message.
Text 309
17.3 Displaying Text
We will continue to explore the functions available as part of the String class in Chapter 18, which
focuses on analyzing and manipulating Strings . What we have learned so far about Strings is enough to
get us to the focus of this chapter: rendering text .
e easiest way to display a String is to print it in the message window. is is likely something you have
been doing here and there while debugging. For example, if you needed to know the horizontal mouse
location, you would write:
println(mouseX);
Or if you needed to determine that a certain part of the code was executed, you might print out a
descriptive message.
println( "We got here and we're printing out the mouse location!!! ");
While this is valuable for debugging, it is not going to help our goal of displaying text for a user. To place
text on screen, we have to follow a series of simple steps.
1. Choose a font by selecting “ Tools ” → “ Create Font. ” is will create and place the font fi le in your
data directory. Make note of the font fi lename for Step 3. Processing uses a special font format, “ vlw, ”
that uses images to display each letter. Because of this, you should create the font at the size you
intend to display. See Figure 17.1 .
Select a font.
Select a size.
Make note of the font filename.
fi g. 17.1
2. Declare an object of type PFont.
PFont f;
310 Learning Processing
3. Load the font by referencing the font fi le name in the function loadFont( ). is should be done
only once, usually in setup( ) . Just as with loading an image, the process of loading a font into memory
is slow and would seriously aff ect the sketch’s performance if placed inside draw( ) .
f = loadFont( " ArialMT-16.vlw " );
4. Specify the font using textFont( ). textFont( ) takes one or two arguments, the font variable and
the font size, which is optional. If you do not include the font size, the font will be displayed at the
size originally loaded. Specifying a font size that is diff erent from the font size loaded can result in
pixelated or poor quality text.
textFont(f,36);
5. Specify a color using fi ll( ) .
fill(0);
6. Call the text( ) function to display text. ( is function is just like shape or image drawing, it takes
three arguments—the text to be displayed, and the x and y coordinate to display that text.)
text( "Mmmmm... Strings... " ,10,100);
All the steps together are shown in Example 17-1 .
Example 17-1: Simple displaying text
PFont f; // STEP 2 Declare PFont variable
void setup() {
size(200,200);
f = loadFont( " ArialMT-16.vlw " ); // STEP 3 Load Font
}
void draw() {
background(255);
textFont(f,16); // STEP 4 Specify font to be used
fill(0); // STEP 5 Specify font color
text ( " Mmmmm... Strings ... " ,10,100); // STEP 6 Display Text
}
Fonts can also be created using the function createFont( ).
myFont = createFont( " Georgia " , 24, true);
createFont( ) allows you to use a font that may be installed on your local machine, but not available as
part of Processing ’s font options. In addition, createFont( ) allows the font to be scaled to any size
without it looking pixelated or smushed. For more about createFont( ) , visit the Processing reference:
http://processing.org/reference/createFont_.html . You can see all the available fonts with “ PFont.list( ) . ”
fi g. 17.2
The arguments to createFont() are font
name, font size, and a boolean that
enables smoothing (anti-aliasing).
Text 311
println(PFont.list());
For demonstration purposes, createFont( ) will be used for all examples, rather than loadFont( ) .
17.4 Text Animation
Now that we understand the steps required to display text, we can apply other concepts from this book to
animate text in real-time.
To get started, let’s look at two more useful Processing functions related to displaying text:
textAlign( ) —specifi es RIGHT, LEFT, or CENTER alignment for text .
Example 17-2: Text align
PFont f;
void setup() {
size(400,200);
f = createFont( "Arial",16,true);
}
void draw() {
background(255);
stroke(175);
line(width/2,0,width/2,height);
textFont(f);
fill(0);
fi g. 17.3
Print all fonts available to createFont() to the
message window.
Exercise 17-5: Take the bouncing ball example from Chapter 5. Display the X and Y
coordinates as text next to the ball.