01/42. Lecture notes. Processing Basics

Transcription

1 01/42 Type in Motion For typography to move, the program must run continuously, and therefore it requires a draw() function. Using typography within draw() requires three steps. First, a PFont variable must be declared outside of setup() and draw(). Next, the font should be loaded and set within setup(). Finally, the font can be used to place characters on the screen inside draw() with the text() function.

2 01/42 Type in Motion PFont font; float x1 = -1000; float x2 = 200; void setup() { size(200, 200); font = loadfont("helveticaneue-bold-48.vlw"); textfont(font, 120); fill(0); void draw() { background(204); text("right TO LEFT", x1, 92); text("left TO RIGHT", x2, 192); x1 += 1.0; if (x1 > 200) { x1 = -1000; x2 -= 0.8; if (x2 < -1000) { x2 = 200; Script Type in Motion October 3, 2011

3 01/42 Type in Motion PFont font; String[] words = { "RAPID", "SERIAL", "VISUAL", "REP-", "RESEN-", "TATION" ; int whichword = 0; void setup() { size(400, 400); font = loadfont("helveticaneue-bold-48.vlw"); fill(235); textfont(font, 104); textalign(center); framerate(1); void draw() { background(250, 0, 50); whichword++; if (whichword == words.length) { whichword = 0; text(words[whichword], width/2, 220); Script RSVP October 3, 2011

4 01/42 XML Extensible Markup Language (XML) is a set of rules for encoding documents in machinereadable form. The design goals of XML emphasize simplicity, generality, and usability over the Internet. It is a textual data format with strong support via Unicode for the languages of the world. Although the design of XML focuses on documents, it is widely used for the representation of arbitrary data structures, for example in web services. Many application programming interfaces (APIs) have been developed that software developers use to process XML data, and several schema systems exist to aid in the definition of XMLbased languages.

5 02/42 Loading Numbers syntax introduced loadstrings(), split(), splittokens(), WHITESPACE String[] lines = loadstrings("numbers.txt"); The easiest way to bring external data into Processing is to save it as a file in TXT format. The file can then be loaded and parsed to extract the individual data elements. A TXT file format stores only plain text characters, which means there is no formatting such as bold, italics, and colors.

6 03/42 Array An array keeps track of multiple pieces of information in linear order, a one-dimensional list. However, the data associated with certain systems (a digital image, a board game, etc.) lives in two dimensions. To visualize this data, we need a multi-dimensional data structure, that is, a multi-dimensional array.

7 03/42 Array syntax datatype[] varvar[element] = valuevar.length An array is a list of data. It is possible to have an array of any type of data. Each piece of data in an array is identified by an index number representing its position in the array. The first element in the array is [0], the second element is [1], and so on. Arrays are similar to objects, so they must be created with the keyword new. Every array has a variable length which is an integer value for the total number of elements in the array. (People are often confused by the use of length() to get the size of a String and length to get the size of an array. Notice the absence of the parentheses when working with arrays.)

8 03/42 Array syntax datatype[] varvar[element] = valuevar.length datatype any primitive or compound datatype, including user defined classes var any valid variable name element int: must not exceed the length of the array - 1 value data to assign to the array element, must be the same datatype as the array

9 03/42 Array int[] numbers = new int[3]; numbers[0] = 90; numbers[1] = 150; numbers[2] = 30; int a = numbers[0] + numbers[1]; // Sets variable a to 240 int b = numbers[1] + numbers[2]; // Sets variable b to 180 int[] numbers = { 90, 150, 30 ; int a = numbers[0] + numbers[1]; // Sets variable a to 240 int b = numbers[1] + numbers[2]; // Sets variable b to 180 int degrees = 360; float[] cos_vals = new float[degrees]; for(int i=0; i < degrees; i++) { cos_vals[i] = cos(two_pi/degrees * i);

10 03/42 Array int num = 50; int[] x = new int[num]; int[] y = new int[num]; int indexposition = 0; void setup() { size(400, 400); nostroke(); smooth(); fill(255, 125); void draw() { background(0); x[indexposition] = mousex; y[indexposition] = mousey; // Cycle between 0 and the number of elements indexposition = (indexposition + 1) % num; for (int i = 0; i < num; i++) { // Set the array position to read int pos = (indexposition + i) % num; float radius = (num-i) / 2.0; ellipse(x[pos], y[pos], radius, radius);

11 04/42 Output PrintWriter output; void setup() { size(100, 100); // Create a new file in the sketch directory output = createwriter("positions.txt"); framerate(12); void draw() { if (mousepressed) { point(mousex, mousey); // Write the coordinate to a file with a // "\t" (TAB character) between each entry output.println(mousex + "\t" + mousey); void keypressed() { // Press a key to save the data output.flush(); // Write the remaining data output.close(); // Finish the file exit(); // Stop the program

12 04/42 Input String[] lines = loadstrings("positions.txt"); for (int i = 0; i < lines.length; i++) { // Split this line into pieces at each tab character String[] pieces = split(lines[i], '\t'); // Take action only if there are two values on the line // (this will avoid blank or incomplete lines) if (pieces.length == 2) { int x = int(pieces[0]); int y = int(pieces[1]); point(x, y);

13 04/42 split The split() function is used to divide each line of the text file into its separate elements. This function splits a string into pieces using a character or string as the divider. split(str, delim) The str parameter must be a String, but the delim parameter can be a char or String and does not appear in the returned String[] array. String s = "a, b"; String[] p = split(s, ", "); println(p[0]); // Prints "a" println(p[1]); // Prints "b"

14 04/42 splittokens The splittokens() function allows you to split a String at one or many character tokens. There are two versions of this function: splittokens(str) splittokens(str, tokens) The tokens parameter is a String containing a list of characters that are used to separate the line. If the tokens parameter is not used, all whitespace characters (space, tab, new line, etc.) are used as delimiters. String t = "a b"; String[] q = splittokens(t); println(q[0]); // Prints "a" println(q[1]); // Prints "b"

15 06/42 XMLElement Description XMLElement is a representation of an XML object. The object is able to parse XML code. The methods described here are the most basic. More are documented in the Developer's Reference. The encoding parameter inside XML files is ignored, only UTF-8 (or plain ASCII) are parsed properly. Methods getchildcount() Returns the number of children for the element. getchild() Returns a single child. getchildren() Returns all of the children as an XMLElement array. getcontent() Returns the content of an element getint() Returns an integer attribute of the element. getfloat() Returns a float attribute of the element. getstring() Returns a String attribute of the element. getname() Returns the name of the element.

16 06/42 XMLElement // The following short XML file called "sites.xml" is parsed // in the code below. It must be in the project's "data" directory // <?xml version="1.0"?> // <websites> // <site id="0" url="processing.org">processing</site> // <site id="1" url="mobile.processing.org">processing Mobile</site> // </websites> XMLElement xml; void setup() { size(200, 200); xml = new XMLElement(this, "sites.xml"); int numsites = xml.getchildcount(); for (int i = 0; i < numsites; i++) { XMLElement kid = xml.getchild(i); int id = kid.getint("id"); String url = kid.getstring("url"); String site = kid.getcontent(); println(id + " : " + url + " : " + site);