Shiffman Daniel. Learning processing
Подождите немного. Документ загружается.
332 Learning Processing
float speed;
float r,g;
// The constructor initializes color and size
// Location is filled randomly
Bubble(float r_, float g_, float diameter_) {
x = random(width);
y = height;
r = r_;
g = g_;
diameter = diameter_;
}
// Display the Bubble
void display() {
stroke(255);
fill(r,g,255,150);
ellipse(x,y,diameter,diameter);
}
// Move the bubble
void drift() {
y + = random(–3,–0.1);
x + = random(–1,1);
if (y < -diameter*2) {
y = height + diameter*2;
}
}
}
Now that we are comfortable with the idea of loading information from a text fi le to initialize Processing
sketches, we are ready to ask the following question: What if we want to save information so that it can
be loaded the next time a program is run? For example, let’s say we want to revise Example 18-3 so that
the bubbles change on a mouse rollover. (We have worked on rollovers with a rectangle before in Exercise
5-5, and Example 9-11 but this rollover example will use a circle.) See Figure 18.6 .
dist
r
r
dist
dist > r
No Rollover
dist < r
Rollover
fi g. 18.6
fi g. 18.5
boolean rollover(int mx, int my) {
if (dist(mx,my,x,y) < diameter/2) {
return true;
} else {
return false;
}
}
The rollover() function in the Bubble
class returns a boolean value (true
or false) depending on whether the
arguments (mx,my) are inside the circle.
Data Input 333
e rollover( ) function checks to see if the distance between a given point ( mx , my ) and the bubble’s
location ( x , y ) is less than the radius of the circle; the radius is defi ned as the diameter divided by two (see
Figure 18.6 ). If this is true, then that point ( mx , my ) must be inside the circle. Calling this function using
the mouse location as the arguments allows us to test whether the mouse is, in fact, rolling over any of the
bubbles.
for (int i = 0; i < bubbles.length; i + + ){
bubbles[i].display();
bubbles[i].drift();
if (bubbles[i].rollover(mouseX,mouseY)) {
bubbles[i].change();
}
}
Once we implement the change( ) function to adjust the Bubble’s variables, we can save the new
information in a text fi le with Processing ’s saveStrings( ) function. saveStrings( ) is essentially the opposite
of loadStrings( ) , receiving a fi lename and a String array and saving that array to the fi le.
String[] stuff = { " Each String ", "will be saved ", "on a ", "separate line " } ;
saveStrings( "data.txt", stuff);
fi g. 18.7
saveStrings( ) , however, does not store the text fi le in the data folder, but rather places it in the local
sketch directory. If we want the fi le to be written to the data directory, we must specify the path. Also, if
the fi le already exists, it will be overwritten.
Knowing this, we can concoct a saveData( ) function for the Bubbles sketch that rewrites “ data.txt ” with
the properties from the objects in their current state. In this example, we will save the new data whenever
the mouse is pressed.
void saveData() {
String[] data = new String[bubbles.length];
for (int i = 0; i < bubbles.length; i + + ){
data[i] = bubbles[i].r + " ," + bubbles[i].g + " ," + bubbles[i].diameter;
}
saveStrings( "data/data.txt",data);
}
void mousePressed() {
saveData();
}
Since the original data fi le is overwritten, whenever you run the sketch again, the new values are loaded.
Here is the entire example for reference. Figure 18-18 shows the new data fi le after saveStrings( ):
We fi rst create an array of Strings
with a size equal to the total number
of Bubble objects.
Each element of the String array is
made by concatenating the values
of each Bubble object’s variables.
This code will create the
text fi le in Figure 18.7.
334 Learning Processing
Example 18-4: Loading and saving data to text fi le
// An array of Bubble objects
Bubble[] bubbles;
void setup() {
size(200,200);
smooth();
// Load text file as a string
String[] data = loadStrings(" data.txt " );
// Make as many objects as lines in the text file
bubbles = new Bubble[data.length];
// Convert values to floats and pass into Bubble constructor
for (int i = 0; i < bubbles.length; i + + ) {
float[] values
=
float(split(data[i], " , " ));
bubbles[i]
=
new Bubble(values[0],values[1],values[2]);
}
}
void draw() {
background(255);
// Display and move all bubbles
for (int i
=
0; i
<
bubbles.length; i
+
+
){
bubbles[i].display();
bubbles[i].drift();
// Change bubbles if mouse rolls over
if (bubbles[i].rollover(mouseX,mouseY)) {
bubbles[i].change();
}
}
}
// Save new Bubble data when mouse is Pressed
void mousePressed() {
saveData();
}
void saveData() {
// For each Bubble make one String to be saved
String[] data
=
new String[bubbles.length];
for (int i
=
0; i
<
bubbles.length; i
+
+
){
// Concatenate bubble variables
data[i]
=
bubbles[i].r
+
" , "
+
bubbles[i].g
+
" , "
+
bubbles[i].diameter;
}
// Save to File
saveStrings( " data/data.txt ",data);
}
// A Bubble class
class Bubble {
float x,y;
float diameter;
float speed;
float r,g;
Bubble(float r_,float g_, float diameter_) {
x
=
random(width);
y
=
height;
r
=
r_;
g
=
g_;
fi g 18.8 The new data fi le after save strings ( )
Bubble data is loaded in setup().
Bubble data is saved in
mousePressed().
The same fi le is overwritten by
adding the “data” folder path
to saveStrings() as shown in
Figure 18.8.
Data Input 335
diameter
=
diameter_;
}
// True or False if point is inside circle
boolean rollover(int mx, int my) {
if (dist(mx,my,x,y)
<
diameter/2) {
return true;
} else {
return false;
}
}
// Change Bubble variables
void change() {
r
=
constrain(r
+
random(–10,10),0,255);
g
=
constrain(g
+
random(–10,10),0,255);
diameter
=
constrain(diameter
+
random(–2,4),4,72);
}
// Display Bubble
void display() {
stroke(0);
fill(r,g,255,150);
ellipse(x,y,diameter,diameter);
}
// Bubble drifts upwards
void drift() {
y + = random(–3,–0.1);
x + = random(–1,1);
if (y < -diameter*2) {
y = height + diameter*2;
}
}
}
18.4 Text Parsing
Now that we are comfortable with how loadStrings( ) works for text fi les stored locally, we can start to
examine what we might do with textual data we retrieve from other sources such as a URL.
String[] lines = loadStrings( " http://www.yahoo.com " );
Exercise 18-7: Create a sketch that visualizes the following data. Feel free to add to and
change the text.
336 Learning Processing
When you send a URL path into loadStrings( ) , you get back the raw HTML ( “ Hypertext Markup
Language ” ) source of the requested web page. It is the same stuff that appears upon selecting “ View
Source ” from a browser’s menu options. You do not need to be an HTML expert to follow this section,
but if you are not familiar at all with HTML, you might read http://en.wikipedia.org/wiki/HTML .
Unlike with the comma-delimited data from a text fi le that was specially formatted for use in a Processing
sketch, it is not practical to have the resulting raw HTML stored in an array of Strings (each element
representing one line from the source). Converting the array into one long String can make things a bit
simpler. As we saw earlier in the chapter, this can be achieved using join( ) .
String onelongstring = join(lines, " " );
When pulling raw HTML from a web page, it is likely you do not want all of the source, but just a small
piece of it. Perhaps you are looking for weather information, a stock quote, or a news headline. We can
take advantage of the String manipulation functions we learned— indexOf( ) , substring( ) , and length( ) —
to fi nd pieces of data within a large block of text. We saw an early example of this in Exercise 18-2 . Take,
for example, the following String:
String stuff = " Number of apples:62. Boy, do I like apples or what! " ;
Let’s say we want to pull out the number of apples from the above text. Our algorithm would be as
follows:
1. Find the end of the substring “ apples: ”. Call it start.
2. Find the fi rst period after “ apples: ” . Call it end.
3. Make a substring of the characters between start and end.
4. Convert the String to a number (if we want to use it as such).
In code, this look’s like:
int start = stuff.indexOf( " apples: " ) + 8; // STEP 1
int end = stuff.indexOf( " . " ,start); // STEP 2
String apples = stuff.Substring(start,end); // STEP 3
int apple_no = int(apples); // STEP 4
e above code will do the trick, but we should be a bit more careful to make sure we do not run into
any errors if we do not fi nd the substrings . We can add some error checking and generalize the code into a
function:
// A function that returns a substring between two substrings
String giveMeTextBetween(String s, String startTag, String endTag) {
String found = " " ;
// Find the index of the beginning tag
int startIndex = s.indexOf(startTag);
// If we don’t find anything
if (startIndex = = –1) return " " ;
// Move to the end of the beginning tag
startIndex + = startTag.length();
The “end” of a String
can be found by
searching for the index
of that String and
adding the length to that
index (in this case 8).
A function to return a String found
between two Strings. If beginning
or end “tag” is not found, the
function returns an empty String.
Data Input 337
// Find the index of the end tag
int endIndex = s.indexOf(endTag, startIndex);
// If we don’t find the end tag,
if (endIndex = = –1) return " " ;
// Return the text in between
return s.substring(startIndex,endIndex);
}
With this technique, we are ready to connect to a web site from within Processing and grab data to
use in our sketches. For example, we could read the HTML source from http://www.nytimes.com and
look for today’s headlines, search http://fi nance.yahoo.com for stock quotes, count how many times the
word “ Flickr ” appears on your favorite blog, and so on. HTML, however, is an ugly, scary place with
inconsistently formatted pages that are diffi cult to reverse engineer and parse eff ectively. Not to mention
the fact that companies change the source code of web pages rather often, so any example that I might
make while I am writing this paragraph might break by the time you read this paragrap.
For grabbing data from the web, an XML (Extensible Markup Language) feed will prove to be more
reliable and easier to parse. Unlike HTML (which is designed to make content viewable by a human’s
eyes) XML is designed to make content viewable by a computer and facilitate the sharing of data across
diff erent systems. We will get into how XML works more in Section 18.17 . For now, let’s examine how we
might grab the weather for any given zip code from Yahoo’s XML weather feed. Information about all of
Yahoo’s XML feeds can be found here: http://developer.yahoo.com/rss/ . e weather XML feed is here:
http://xml.weather.yahoo.com/forecastrss?p 10025
One way to grab the data from a weather feed is to use the Processing XML library (which facilitates
reading from an XML document). However, in order to demonstrate String parsing on a lower level,
as an exercise, we will use our loadStrings( ) scraping techniques and search for bits of information
embedded in the XML source manually. Admittedly, this is somewhat of a silly pursuit since XML is
designed to be parsed without having to resort to this methodology. For comparison, we will look at this
sample example using two diff erent XML libraries in Sections 18.7 and 18.8.
Looking in the XML source from the above URL, we can see that the temperature today (which happens
to be August 1, 2007 at the time of this writing) is 88
ⴰ
F— temp “ 88 ” .
< yweather:condition text = " Fair" code = " 34" temp = " 88" date = " Wed, 01 Aug 2007
3:51 pm EDT "/
e temperature is variable but the XML format is not, and therefore we can deduce that the start tag for
our search should be:
temp"
and the end tag:
"
(i.e., the fi rst quote after the start tag).
Knowing the start and end tags, we can use giveMeTextBetween( ) to pull out the temperature.
IndexOf() can also take a second
argument, an integer. That second
argument means: Find the fi rst
occurrence of the search String
after this specifi ed index. We use
it here to ensure that end index
follows start index.
338 Learning Processing
String url = " http://xml.weather.yahoo.com/forecastrss?p = 10003 " ;
String[] lines = loadStrings(url);
// Get rid of the array in order to search
// the whole page
String xml = join(lines, " " );
// Searching for temperature
String tag1 = " temp = \ " " ;
String tag2 = " \ " " ;
temp = int(giveMeTextBetween
(xml,tag1,tag2));
println(temp);
Example 18-5 retrieves the temperature from Yahoo’s weather XML feed and displays it onscreen. e
example also uses object-oriented programming, putting all of the String parsing functionality into a
WeatherGrabber class.
Example 18-5: Parsing Yahoo’s XML weather feed manually
PFont f;
String[] zips = { " 10003 ", " 21209 ", " 90210 " } ;
int counter = 0;
// The WeatherGrabber object does the work for us!
WeatherGrabber wg;
void setup() {
size(200,200);
// Make a WeatherGrabber object
wg = new WeatherGrabber(zips[counter]);
// Tell it to request the weather
wg.requestWeather();
f = createFont( " Georgia " ,16,true);
}
void draw() {
background(255);
textFont(f);
fill(0);
// Get the values to display
String weather = wg.getWeather();
int temp = wg.getTemp();
// Display all the stuff we want to display
text(zips[counter],10,160);
text(weather,10,90);
text(temp,10,40);
text(" Click to change zip. " ,10,180);
// Draw a little thermometer based on the temperature
stroke(0);
fill(175);
rect(10,50,temp*2,20);
}
fi g. 18.9
A quote in Java marks the beginning or end of a String. So how
do we include an actual quote in a String?
The answer is via an “escape” sequence. (We encountered this
in Exercise 17-8.) A quote can be included in a String using a
backward slash, followed by a quote. For example:
String q = "This String has a quote \"in it";
The WeatherGrabber object is initialized with
a zip code. The XML data is loaded and parsed
upon calling the requestWeather() function.
The weather and temperature information is
pulled from the WeatherGrabber object.
Data Input 339
void mousePressed() {
// Increment the counter and get the weather at the next zip code
counter = (counter + 1) % zips.length;
wg.setZip(zips[counter]);
wg.requestWeather();
}
// A WeatherGrabber class
class WeatherGrabber {
int temperature = 0;
String weather = " " ;
String zip;
WeatherGrabber(String tempZip) {
zip = tempZip;
}
// Set a new Zip code
void setZip(String tempZip) {
zip = tempZip;
}
// Get the temperature
int getTemp() {
return temperature;
}
// Get the weather
String getWeather() {
return weather;
}
// Make the actual XML request
void requestWeather() {
// Get all the HTML/XML source code into an array of strings
// (each line is one element in the array)
String url = " http://xml.weather.yahoo.com/forecastrss?p = " + zip ;
String[] lines = loadStrings(url);
String xml = join(lines, " " ); // Turn array into one long String
// Searching for weather condition
String lookfor = " < yweather:condition text = \ " " ;
String end = " \ " " ;
weather = giveMeTextBetween (xml,lookfor,end);
// Searching for temperature
lookfor = " temp = \ " " ;
temperature = int(giveMeTextBetween (xml,lookfor,end));
}
// A function that returns a substring between two substrings
String giveMeTextBetween(String s, String before, String after) {
String found = " " ;
int start = s.indexOf(before); // Find the index of the beginning tag
if (start = = – 1) return " " ; // If we don’t find anything, send back a blank
// String
start + = before.length(); // Move to the end of the beginning tag
int end = s.indexOf(after,start); // Find the index of the end tag
if (end == –1) return ""; // If we don’t find the end tag, send back a blank String
return s.substring(start,end); // Return the text in between
}
}
The data is requested again with a new zip
code every time the mouse is pressed.
340 Learning Processing
Exercise 18-8: Expand Example 18-5 to also search for the next day’s high and low temperature.
Exercise 18-9: Take a look at Yahoo’s “ Word of the Day ” XML feed available at this URL:
http://xml.education.yahoo.com/rss/wotd/ . Use the manual parsing techniques to pull out the
Word of the Day from the feed.
18.5 Text Analysis
Loading text from a URL need not only be an exercise in parsing out small bits of information. It is
possible with Processing to analyze large amounts of text found on the web from news feeds, articles, and
speeches, to entire books. A nice source is Project Gutenberg ( http://www.gutenberg.org/ ) —which makes
available thousands of public domain texts. Algorithms for analyzing text merits an entire book itself, but
we will look at one simple beginner example here.
Example 18-6 retrieves the entire text of Shakespeare’s play King Lear , and uses split Tokens ( ) to make
an array of all the words in the play. e sketch then displays the words one by one, along with a count of
how many times the word appears in the text.
Example 18-6: Analyzing King Lear
PFont f; // A variable to hold onto a font
String[] kinglear; // The array to hold all of the text
int counter = 0; // Where are we in the text
// We will use spaces and punctuation as delimiters
String delimiters = " ,.?!;: " ;
void setup() {
size(200,200);
// Load the font
f = loadFont( " Georgia-Bold-16.vlw " );
// Load King Lear into an array of strings
String url = " http://www.gutenberg.org/dirs/etext97/1ws3310.txt " ;
String[] rawtext = loadStrings(url);
// Join the big array together as one long string
String everything = join(rawtext, " " );
// Split the array into words using any delimiter
kinglear = splitTokens(everything,delimiters);
frameRate(5);
}
void draw() {
background(255);
// Pick one word from King Lear
String theword = kinglear[counter];
// Count how many times that word appears in King Lear
int total = 0;
Any punctuation is used as a delimiter.
All the lines in King Lear are
fi rst joined as one big String
and then split up into an array of
individual words. Note the use
of splitTokens() since we are
using spaces and punctuation
marks all as delimiters.
This loop counts the
number of occurrences
of the current word being
displayed.
Data Input 341
for (int i = 0; i < kinglear.length; i + + ){
if (theword.equals(kinglear[i])) {
total + + ;
}
}
// Display the text and total times the word appears
textFont(f);
fill(0);
text(theword,10,90);
text(total,10,110);
stroke(0);
fill(175);
rect(10,50,total/4,20);
// Move onto the next word
counter = (counter + 1) % kinglear.length;
}
fi g. 18.10
Exercise 18-10: Count the number of times each letter of the alphabet appears in King Lear
Visualize those counts. Here is one possibility (you should be more creative). Note this sketch
will require the use of the charAt(
) function.
18.6 Asynchronous Requests
As we have seen, the loadStrings( ) function can be used for retrieving raw data from web pages.
Nonetheless, unless your sketch only needs to load the data once during setup( ) , you may have a problem.
For example, consider a sketch that grabs the price of AAPL stock from an XML feed every 5 min.
Each time loadStrings( ) is called, the sketch will pause while waiting to receive the data. Any animation
will stutter. is is because loadStrings( ) is a “ blocking ” function, in other words, the sketch will sit and
wait at that line of code until loadStrings( ) completes its task. With a local text fi le, this is extremely fast.
Nonetheless, a request for a web page (known as an “ HTTP request ” ) is asynchronous , meaning the web
server can take its time getting back to you with the data requested. Who knows how long loadStrings( )
will take? No one, you are at the mercy of the server!
e simpleML library (available for download at this book’s web site: http://www.learniningprocessing.
com/simpleML/ ) gets around this problem by executing these HTTP requests to web servers in parallel
The word “Lear” appears 226
times in the text of King Lear.