We started with where we left off in week 4 by downloading the week four archive again in anticipation of swapping Processing code into the HTML files for week 5 examples. We ended with a week five archive to which the following notes apply. We focused on making sure we are clear as how to use the available looping features in Processing: the frame loop, the for loop, and the while loop. We started by looking at a clean frame loop implementation example. Note the characteristics of a frame loop:

1. A control variable defined outside of the setup() and draw() functions (in this example: angle).
2. A draw() function where the control variable changes to control the visual presentation
   (angle += 0.02;).
3. The frameRate() function, called in the setup() function, sets the pace for the visualization.

Frame loops are typical of visual libraries whereby you want to have some control of the flow of the presentation. iPad and iPhone applications use a rect() function to set up an automatic frame loop. Older video game languages like C or C++ use a graphics() function. The take home message is (and I forgot that lesson to my peril in week 4): if you want to control the timing of the visual presentation via a loop, use the frame loop!

For loops are useful within the draw() and setup() functions for coding up situations where we have a fixed number of steps to our work. Take a look at the frame_loop.html code we created together in class (in the week 5 archive). Note the use of the for loop to generate a specific number of concentric circles in the presentation of the middle circle from our starting example. It starts with for(int i=d2;i>0;i=i-(int)(d2/8)) which controls the number of visual circles, seen as rings, by stepping through the length of the radius of the circle in fractional increments. Dividing the radius by 8 in the step statement creates eight concentric circles. Go ahead and change that number to create other numbers of circles instead. The key is that we know in advance our intent to have a certain number of circles in the visual presentation each frame. That's what suggests a for loop is appropriate.

Note also in the frame_loop.html code that we add a while loop to control the presentation of the right circle every frame. The number of concentric circles varies from frame to frame based on the overall radius of the largest circle. We want to create concentric circles of exactly 16 pixels. Because of that varying directive, the set up of the while loop is simpler: while(d3 > 0) {. The code just subtracts sixteen pixels from the radius of each circle until it reaches zero or less and stops. Like with the frame loop, we need a control variable to change the visual presentation: d3. But the loop is not controlling the timing of the presentation, just the visual presentation of a series of circles each frame.

We can now change the frameRate() attribute and the control variable behavior. Note how the timing stays the same and yet the presentation gets crisper if you double the frameRate and half the incremental change to the angle increment: frameRate(10) and angle += 0.12;. Since 60 frames a second (or more) is ideal for human visual cognition, go ahead and change the relative values 6-fold to frameRate(60) and angle += 0.02;. That's the same as the original example we started with. Much smoother, eh?

We added a second primitive type (a rectangle) to the draw() function as the result of a student question: Can we add a second draw() function to draw more primitives? The answer is 'No, we have to integrate all primitive behavior into the one draw function. Create a separate control variable to change the behavior of that second primitive away from the behavior of the first - we use an x control variable to move horizontally instead of increase size').

Now, make sure you understand the other two loop examples in the week 5 archive: while.html and nested_for.html. The while loop lets you change the size of the canvas and still get a full striped visual effect (so an unknown number of lines over time). The nested for loop plays with writing text on a canvas. Note the use of a String-based array to do so (we were unable to get that working in class as we tried to use a lower-case string type that does not exist in Processing and then tried to use the char type that could only handle a single character at a time).

We played around with submitted homework examples for this week. A Time-driven canvas lets us control twelve images that we generate in code and cycle between them to provide a memory-based, animated drawing canvas (nice job - you know who you are - anonymously). The millis() function we looked at in week four is in the center of the control of dynamic image generation from user gestures. Go ahead and try it: Draw on the canvas with a gesture and wait a bit for the code to accept and rebuild it as a series of images. Now add a second gesture. The code accepts 12 gestures for looping (take a look and try changing the declared [12] PImages to another value - this creates more images to cycle through - also slowing down the replay of your gesture if you make a short one).

The An interactive dandelion shows off a fine use of arrays to store interactive visuals for use in the interactive draw() function. Separate arrays for the x and y location of each dandelion seed (or 'puff') remember where the seed was from frame to frame as the user moves them about with mouse drag gestures. In this case, the frame rate controls how quickly the gestures can be made and still connect to the seed being moved. In class we showed off the power of the array to let us manipulate the dandelion for interactivity. Look at the version included in the week 5 archive: dandelion.html. We've changed the number of seeds being managed for interactivity and used our concentric circle for loop code strategy to fill the seeds inward into the dandelion (not something seen in nature but a quick trick to suggest a 3-D interaction to the flower).

The 3-D floating cube example is great for comparison. 3-D coding is significantly more involved when coding a canvas from scratch. We'll want to use other libraries and external models when doing complex 3-D visual presentation and interactivity unless we like torturing ourselves with long coding sessions. But, it is great to do the work once yourself to see all that is involved. The result in this case is an elegant floating cube that moves seductively over time (my interpretation at least). Wonderful start and indicative of diving into Processing to teach yourself through example.

I shared my latest river gauge visualization for the Brazilian work I am contracted to do with the University of Washington as contractor (I have been given a part-time employee appointment I hope to keep going for a while). Only the two largest volume river networks are interactive. As you mouse over the hydrographs from 2007 and 1985 (daily fresh water flow for a year, from day one to day 365, entering the Atlantic Ocean), you can see changing relative flow levels by day for all thirty-eight years 1970-2007 with the flow level for 2007 in red and 1985 in yellow. The whole visualization has been written in Processing but I will be pursuing external libraries to build this starting point into even more complex visual analytical presentation in the near future.

Next week we will look at how we use external libraries, files, and frameworks with our Processing canvas (and how to inject Processing into canvases set up and managed by other libraries or frameworks).