Shiffman Daniel. Learning processing
Подождите немного. Документ загружается.
312 Learning Processing
textAlign(CENTER);
text( " This text is centered. " ,width/2,60);
textAlign (LEFT) ;
text( " This text is left aligned. " ,width/2,100);
textAlign(RIGHT);
text( " This text is right aligned. " ,width/2,140);
}
textWidth( ) —Calculates and returns the width of any character or text string.
Let’s say we want to create a news ticker, where text scrolls across the bottom of the screen from left
to right . When the news headline leaves the window, it reappears on the right-hand side and scrolls
again. If we know the x location of the beginning of the text and we know the width of that text, we can
determine when it is no longer in view (see Figure 17.4). textWidth( ) gives us that width.
To start, we declare headline, font, and x location variables, initializing them in setup( ) .
// A headline
String headline = " New study shows computer programming lowers cholesterol. " ;
PFont f; // Global font variable
float x; // Horizontal location of headline
void setup() {
f = createFont( " Arial " ,16,true); // Loading font
x = width; // Initializing headline off-screen to the right
}
e draw( ) function is similar to our bouncing ball example in Chapter 5. First, we display the text at the
appropriate location.
// Display headline at x location
textFont(f,16);
textAlign(LEFT);
text(headline,x,180);
We change x by a speed value (in this case a negative number so that the text moves to the left.)
// Decrement x
x = x – 3;
Now comes the more diffi cult part. It was easy to test when a circle reached the left side of the screen. We
would simply ask: is x less than 0? With the text, however, since it is left-aligned, when x equals zero, it
is still viewable on screen. Instead, the text will be invisible when x is less than 0 minus the width of the
text (see Figure 17.4 ). When that is the case, we reset x back to the right-hand side of the window, that
is, width .
textAlign() sets the alignment
for displaying text. It takes one
argument: CENTER, LEFT, or RIGHT.
Text 313
float w = textWidth(headline) ;
if (x < -w) {
x = width;
}
Example 17-3 is a full example that displays a diff erent headline each time the previous headline leaves
the screen. e headlines are stored in a String array .
Example 17-3: Scrolling headlines
// An array of news headlines
String[] headlines = {
" Processing downloads break downloading record. ",
" New study shows computer programming lowers cholesterol. ",
} ;
PFont f; // Global font variable
float x; // Horizontal location
int index = 0;
void setup() {
size(400,200);
f = createFont( "Arial",16,true);
// Initialize headline offscreen
x = width;
}
void draw() {
background(255);
fill (0);
// Display headline at x location
textFont(f,16);
textAlign (LEFT );
text(headlines[index],x,180);
// Decrement x
x = x – 3;
// If x is less than the negative width,
// then it is off the screen
float w = textWidth(headlines[index]);
if (x < -w) {
x = width;
index = (index + 1) % headlines.length;
}
}
X = 0
X = 50
Some text
Some text
width = 100 pixels
still on screen!
X = 100
Some text
all the way off screen!
fi g. 17.4
fi g. 17.5
If x is less than the negative width, then it is
completely off the screen
A specifi c String from the array is
displayed according to the value of the
“index” variable.
textWidth() is used to calculate the width
of the current String.
“index“ is incremented when the current
String has left the screen in order to
display a new String.
Multiple Strings are
stored in an array.
314 Learning Processing
fi g. 17.6
In addition to textAlign( ) and textWidth( ), Processing also off ers the functions textLeading( ), textMode( ) ,
and textSize( ) for additional display functionality. ese functions are not necessary for the examples
covered in this chapter, but you can explore them on your own in the Processing reference.
Exercise 17-6: Create a stock ticker that loops over and over. As the last stock enters the
window, the fi rst stock appears immediately to its right.
17.5 Text Mosaic
Combining what we learned in Chapters 15 and 16 about the pixel array, we can use the pixels of an
image to create a mosaic of characters. is is an extension of the video mirror code in Chapter 16. (Note
that in Example 17-4, new text-related code is in bold.) See Figure 17.6 .
Text 315
Example 17-4: Text mirror
import processing.video.*;
// Size of each cell in the grid, ratio of window size to video size
int videoScale = 14;
// Number of columns and rows in our system
int cols, rows;
// Variable to hold onto capture object
capture video;
// A String and Font
String chars = " helloworld" ;
PFont f;
void setup() {
size(640,480);
//set up columns and rows
cols = width/videoScale;
rows = height/videoScale;
video = new Capture(this,cols,rows,15);
// Load the font
f = loadFont (" Courier-Bold-20.vlw ");
}
void draw() {
background(0);
// Read image from the camera
if (video.available()) {
video.read();
}
video.loadPixels();
// Use a variable to count through chars in String
int charcount = 0;
// Begin loop for rows
for (int j = 0; j < rows; j + + ){
// Begin loop for columns
for (int i = 0; i < cols; i + + ){
// Where are we, pixel-wise?
int x = i*videoScale;
int y = j*videoScale;
color c = video.pixels[i + j*video.width];
// Instead of a rectangle
textFont(f);
fill(c);
text(chars.charAt(charcount),x,y);
// Go on to the next character
charcount = (charcount + 1) % chars.length();
}
}
}
The source text used in the mosaic
pattern. A longer String might
produce more interesting results.
Using a “fi xed-width” font. In most fonts,
individual characters have different
widths. In a fi xed-width font, all characters
have the same width. This is useful here
since we intend to display the letters one
at a time spaced out evenly. See Section
17.7 for how to display text character by
character with a nonfi xed width font.
One character from the
source text is displayed
colored accordingly to the
pixel location. A counter
variable—“charcount”—is
used to walk through
the source String one
character at a time.
// Looking up the appropriate color in the pixel array
// Displaying an individual character from the String
316 Learning Processing
Exercise 17-7: Create a video text mosaic where each letter is colored white, but the size of
each letter is determined by a pixel’s brightness. e brighter the pixel, the bigger it is. Here is
a little bit of code from the inside of the pixel loop (with some blank spots) to get you started.
17.6 Rotating Text
Translation and rotation (as seen in Chapter 14) can also be applied to text. For example, to rotate text
around its center, translate to an origin point and use textAlign(CENTER) before displaying the text.
Example 17-5: Rotating text
PFont f;
String message = " this text is spinning " ;
float theta;
void setup() {
size(200,200);
f = createFont( " Arial " ,20,true);
}
void draw() {
background(255);
fill (0);
float b = brightness(video.pixels[i + j*video.width]);
float fontSize = _____ * (_____ / _____);
textSize(fontSize);
fi g. 17.7
Text 317
textFont(f); // Set the font
translate(width/2,height/2); // Translate to the center
rotate(theta); // Rotate by theta
textAlign( CENTER) ;
text(message,0,0);
theta + = 0.05; // Increase rotation
}
String info = " A long long time ago\nIn a galaxy far far away ";
PFont f;
float y = 0;
void setup() {
size(400,200,P3D);
f = createFont( "Arial",20*4,true);
}
void draw() {
background(255);
fill(0);
translate(__________,__________);
__________ (__________);
textFont(f);
textAlign(CENTER);
text(info, __________,__________);
y--;
}
Exercise 17-8: Display text that is centered and rotated to appear fl at. Have the text scroll
off into the distance.
The text is center aligned and
displayed at (0,0) after translating
and rotating. See Chapter 14 or a
review of translation and rotation.
“ \” means “new line.” In Java,
invisible characters can be
incorporated into a String with an
“escape sequence”—a backward
slash “\” followed by a character.
Here are a few more.
\n—new line
\r—carriage return
\t—tab
\’—single quote
\”—double quote
\\—backward slash
318 Learning Processing
17.7 Display text character by character.
In certain graphics applications, displaying text with each character rendered individually is required. For
example, if each character needs to move independently, then simply saying text( “ a bunch of letters ” ,0,0)
will not do.
e solution is to loop through a String , displaying each character one at a time.
Let’s start by looking at an example that displays the text all at once. See Figure 17.8 .
PFont f;
String message = " Each character is not
written individually." ;
void setup() {
size(400,200);
f = createFont( " Arial " ,20,true);
}
void draw() {
background(255);
fill(0);
textFont(f);
text(message,10,height/2);
}
We rewrite the code to display each character in a loop, using the charAt( ) function. See Figure 17.9 .
int x = 10;
for (int i = 0; i < message.length(); i + + ) {
text(message.charAt(i) ,x, height/2);
x + = 10;
}
Calling the text( ) function for each character will allow us more fl exibility in future examples (for
coloring, sizing, and placing characters within one String individually). is example has a pretty
major fl aw, however. Here, the x location is increased by 10 pixels for each character. Although this
is approximately correct, because each character is not exactly 10 pixels wide, the spacing is off . e
proper spacing can be achieved using the textWidth( ) function as demonstrated in the following code.
Note how this example achieves the proper spacing even with each character being a random size!
See Figure 17.10 .
int x = 10;
for (int i = 0; i < message.length(); i + + ) {
textSize(random(12,36));
text(message.charAt(i)
,x, height/2);
x + = textWidth(message.charAt(i));
}
Each character is not written individually.
fi g. 17.8
fi g. 17.9 (Note how the spacing is incorrect.)
fi g. 17.10 (Note how the spacing is correct even
with differently sized characters!)
The fi rst character is at pixel 10.
All characters are
spaced 10 pixels
apart.
Each character is displayed
one at a time with the
charAt() function.
textWidth() spaces the characters out properly.
Displaying a block of text all at once using text().
Text 319
Exercise 17-9: Using textWidth( ) , redo Example 17-4 (the text “ mirror ” ) to use a non-
fi xed-width font with proper character spacing. e following image uses Arial.
is “ letter by letter ” methodology can also be applied to a sketch where characters from a String move
independently of one another. e following example uses object-oriented design to make each character
from the original String a Letter object, allowing it to both be displayed in its proper location as well as
move about the screen individually.
Example 17-6: Text breaking up
PFont f;
String message = " click mouse to shake it up ";
// An array of Letter objects
Letter[] letters;
void setup() {
size(260,200);
// Load the font
f = createFont( "Arial",20,true);
textFont(f);
// Create the array the same size as the String
letters = new Letter[message.length()];
// Initialize Letters at the correct x location
int x = 16;
for (int i = 0; i < message.length(); i + + ){
letters[i] = new Letter(x,100,message.charAt(i));
x + = textwidth(message.charAt(i));
}
}
fi g. 17.11
Letter objects are initialized with
their location within the String
as well as what character they
should display.
320 Learning Processing
void draw() {
background(255);
for (int i = 0; i < letters.length; i + + ) {
// Display all letters
letters[i].display();
// If the mouse is pressed the letters shake
// If not, they return to their original location
if (mousePressed) {
letters[i].shake();
} else {
letters[i].home();
}
}
}
// A class to describe a single Letter
class Letter {
char letter;
// The object knows its original " home " location
float homex,homey;
// As well as its current location
float x,y;
Letter (float x_, float y_, char letter_) {
homex = x = x_;
homey = y = y_;
letter = letter_;
}
// Display the letter
void display() {
fill(0);
textAlign(LEFT);
text(letter,x,y);
}
// Move the letter randomly
void shake() {
x + = random(-2,2);
y + = random(-2,2);
}
// Return the letter home
void home() {
x = homex;
y = homey;
}
}
e character by character method also allows us to display text along a curve. Before we move on to
letters, let’s fi rst look at how we would draw a series of boxes along a curve. is example makes heavy use
of the trigonometric functions covered in Chapter 13 .
At any point, the current location can
be set back to the home location by
calling the home() function.
The object knows about its original
“home” location within the String of
text, as well as its current (x,y) location
should it move around the screen.
Text 321
Example 17-7: Boxes along a curve
PFont f;
// The radius of a circle
float r = 100;
// The width and height of the boxes
float w = 40;
float h = 40;
void setup() {
size(320,320);
smooth();
}
void draw() {
background(255);
// Start in the center and draw the circle
translate(width /2, height / 2);
noFill();
stroke(0);
ellipse(0, 0, r*2, r*2);
// 10 boxes along the curve
int totalBoxes = 10;
// We must keep track of our position along the curve
float arclength = 0;
// For every box
for (int i = 0; i < totalBoxes; i + + ){
// Each box is centered so we move half the width
arclength + = w/2;
// Angle in radians is the arclength divided by the radius
float theta = arclength /r;
pushMatrix();
// Polar to cartesian coordinate conversion
translate(r*cos(theta)
, r*sin(theta));
// Rotate the box
rotate(theta);
// Display the box
fill(0 , 100);
rectMode(CENTER);
rect(0
, 0 , w,h);
popMatrix();
// Move halfway again
arclength + = w/2;
}
}
Even if you fi nd the mathematics of this example to be diffi cult, Figure 17.12 should reveal the next step.
What we need to do is replace each box with a character from a String that fi ts inside the box. And since
characters do not all have the same width, instead of using a variable “ w ” that stays constant, each box will
have a variable width along the curve according to the textWidth( ) function.
fi g. 17.12
Our curve is a circle with radius r in
the center of the window.
We move along
the curve
according to the
width of the box.