Datascapes Tutorials:

These will be fairly "raw" tutorials, meaning that they may require you to "fill in the blanks" with a bit of web research. I always use terms that you could search for on the Processing site, or Google, and get meaningful results, so please work with me...



Tutorial 1 (for BEGINNERS): Basic data-driven drawing in Processing

This tutorial will introduce you to the basics of drawing lines, generating random values, using arrays, and reading and parsing text files. It should take you about two hours if you are a careful beginner, but could take a bit longer if you get stuck -- perhaps you could work with a friend nearby?

1. Write the simplest possible setup() and draw() functions:
Setup() should set the size() of your processing window... you don't need anything else.
Draw() can be empty.
Click "Run" -- no errors! And you got an empty white box. Just like Corb!
(refer to the "setup() and draw()" example on processing's Basic Example Page)

2. In your draw() function Make your background black. Run it again -- is the background black?
(refer to the background() function and the color datatype in the Processing Reference)

3. Draw a line from 0,0 to some arbitrary x,y point (make it a white line). Declare two variables, x and y, give them some arbitrary values, and draw the line from 0,0 to that point.
(refer to the line() function in the Reference, also the "variables", "coordinates" and the "points and lines" examples in the Basic Example Page)

4. Draw the line from 0,0 to a *random* x,y point.
(refer to the random() function in the Reference. You might also want to check out the "random" example in the Basic Example Page)

5. (Getting harder!) Before your setup() function, declare two integer arrays, xcoords[ ] and ycoords[ ], each five integers long.
In your draw() function, load those arrays manually with integer values -- you could use random values, if you like.
(Be sure to check out the "array" example in the Basic Example Page, and also read about arrays in the Reference.)
(Hint -- to declare an array (so that you can use it below), do this:)

int[] xcoords = new int[5]; // this declares (creates and names) a new array called "xcoords" with space for five integers in it
 
(And to actually *use* the array:)
xcoords[3] = 465; // this puts the integer value 465 into the fourth 'slot' of the array xcoords (note: yes, fourth, because
 // the first slot is referenced by '0', second slot by '1', third by '2', thus fourth by '3', etc.  You only have five slots
    // (based on your declaration), so using 'xcoords[5]' (which references the sixth slot) will result in an error!
(Another Hint: the random() function gives you a 'float' data type -- so if you want to put a random integer in your array, you'd better check out the 'int()' function in the Reference -- you'll need it! *or* you could make your arrays contain 'floats' instead of 'ints')

6. Now loop over the array (try a for loop, going from 0 to 4), and print every value out to your 'text area' (the black console at the bottom of the Processing window).
(refer to the "iteration" example in the Basic Examples Page, as well as the Reference pages for "for" and "while" loops)
(note: to print the values out, use the println() function -- check that out in the Reference too!)

7.
Now, instead of drawing from 0,0 to those random points, use a couple more variables (e.g. "lastx", "lasty") to remember the last point, and connect from that point to the next point. I.e. draw from point to point, without 0,0 factoring in at all. You might also want to put the noLoop() function call in your setup() function, so that those lines only draw once!
(refer to the "Variable Scope" example in the Basic Examples to see where you might declare these temporary variables (lastx, lasty)... these variables don't have the same lifetime or 'scope' as your arrays, which you declared "globally" by putting them at the very top of the file)
(also refer to noLoop() in the reference and the Basic Examples).


8. Now, save your current Processing sketch (in case...), and then, separately from Processing (e.g. in notepad, or in a code editor like "Komodo Edit", which you should check out eventually anyway), create a text file ("blah.txt") with one or more lines of text in it. How about a haiku about Zaha Hadid's recent work (feel free to post these somewhere on the wiki... ).
(My insta-haiku, with all respect to Z's great work: Fattening, she lets | Time flow through enamel lines. | Perspective stretches.)

9. Let's read in that text file now, and print its contents to the Processing text area, just to prove that we read the text in and can spew it out (pure rote learning). The println() function will work fine, if we can just get the text line by line...
(NOTE: rather than reading the text file every time your draw() function runs, how about writing in the mousePressed() function and using that to trigger the file reading and parsing? Sounds smart...)
(refer to the "Load File 1" example, the "Load File 2" example especially(!), and the "Storing Input" example, all in the Basics page).

10. NOW it's getting exciting. Let's lose the haiku, and instead make a text file that holds pairs of coordinates somehow (e.g. two per line, tab-separated). Put in five lines with different coordinates. Be careful with your tabs -- remember every keystroke counts here, as with all your coding.

11. Back to your Processing code: Write the code to read in the tab-separated text file and load two arrays with the values in it: x-coordinates in one array, y-coordinates in the other -- you can use the arrays you already declared (but you may want to clean out some of your code from earlier in the tutorial, such as the stuff that was setting the values in the arrays by hardcoding them).
(again, the "Load File" examples are useful, especially "Load File 1". That split() function is worth checking out in the Reference, too!)

12. Now, if you were clean about this, you have just filled those arrays with data from your text file, and your draw() function already has the code in it to draw lines between those points. So if you mess with the values in the text file and then reload it (might be as easy as just clicking with the mouse on your Processing script), you can get a different constellation.

13. Finally, to open the door to a whole other level of possibilities, add a third column to your data file, with an integer value between 3 and 15 on every row. Use this third value to draw a circle or other marker at each point in your data set. You'll probably need another array of values, and you'll need to know how to draw a circle... but now that you have a data format, the ability to read it, and the ability to express it in image, you are on your way. OR????? post questions to the FAQ, please.

NICE WORK! FEEL FREE (EVEN ENCOURAGED) TO POST YOUR RESULTS AND CODE TO THE WIKI, FOLLOWING THE PROTOCAL I DESCRIBED IN MY CLASS NOTES -- I.E. IMAGES TO THE STUDENT_WORK PAGE, CODE TO YOUR OWN PAGE (WHICH YOU SHOULD MAKE).

(14. Next steps...: )
- following the "Storing Input" example, you could start to append() values to your arrays based on mouse clicks, then re-write the text data file with those new values.... so now you have a drawing program.
- and/or, you could play with lineweight and alpha values to be able to layer the lines more meaningfully (what would lineweight mean? You need richer data ... but in fact these five points could be the nodes of a gesture that might get thicker/more opaque with each point...).
- Then you could have thousands of lines of values, and generate a much more intense semi-abstract map. etc. etc. )
- Could your data format have a 'header' line in it that might tell your program how many points to expect, or other information to help you prepare the drawing (e.g. the lineweights, etc.) for that particular data set?
- Could you geo-spatialize this data?... i.e. translate to geo coordinates, then may project to Google Earth?