Introduction to Computational Media - 2nd Class

Topics covered during our 2nd class:

• Review homework and share learnings
• Example or processing sketches for inspiration
• Code basics and learning to make things move

Review homework and share learnings

We kicked off class by reviewing the homework from the first week. Here is an overview of the processing functions and tools were used by other people, and which I want to remember for my own applications/uses:

• comments – there are two ways to add comments to your sketch:

// one line comments start with “//”
/* multiple line comments are bracketed by “*/” */

• strokeWeight(weight) – sets the weight of the stroke on a line. Accepts one argument that is int or float input.
• strokeCap(cap type) – change the style of line caps; options include SQUARE, ROUND, and PROJECT.
• shape() – allows creation of shapes by joining lines and curves together. Accepts up to five arguments – shape datatype, x-coordinate, y-coordinate, width, and height.
• vertex() and curveVertex() – draw straight and curved lines as part of a shape. There are many arguments that can be accepted by these functions, and they work slightly different so check out the reference for details.
• colorMode() – allows changing range of each color argument. The default setting is a range of 255 for each color argument.

Made with Processing

To provide inspiration and help the class understand the potential of Processing, we reviewed many cool applications developed with this toolset. Here are a few of the sites that we visited during class:

• Shifman's processing bookmarks on delicious has wide variety of examples: http://delicious.com/shiffman/icm2009
• Robert Hodgin's website called flight404 has some beautiful sketches and renderings: http://flight404.com
• Lastly, Ben Fry, who created processing, also has a site the features cool processing sketches: http://benfry.com

Code Structure

Software is structured to be able to run forever. Therefore, it is helpful to think about software in two useful and distinct parts:

The first part defines what needs to happen at the beginning. This covers to the activities that take place in the set-up section, or block, of the sketch. This section of the code only runs once during the execution of a program.

setup() {
set-up code
}

The second part focus on describing what needs to happen continuously. In processing this is the draw section, often referred to as a loop section (as in the Arduino IDE). This block of code gets executed repeatedly as long as the application is running. This is the area of the sketch where you will add code to animate your creation.

draw () {
drawing code
}

Making Things Move

One of the easiest ways of making things move is using the mouseX and mouseY variables. These two variables track the location of the mouse on a screen at any given moment. With little coding you can make a shape follow the mouse around the screen.

To make things move in processing it is important to understand the concept of double buffering, as this is the process by which the screen is rendered. This means that processing first renders the screen in RAM, then once it is fully rendered it outputs the results on the display. Therefore, each time the draw function loops the display is only refreshed once.

Variables are crucial elements of programming language and refer to data storage units that are user-defined (except for a few useful system variables such as mouseX and mousey, discussed above). There are three steps involved in using a variable:

• Declare the variable. This is when you define the type of variable and give it a name. Common variable types include int (integer or whole number), float (decimal number), Boolean (logical value), strings (text) and arrays (groups of variables). Variables can be defined globally or locally – local variables are only available within the function in which they are defined.
• Initialize the variable. This refers to when we assign a value to the variable. Variable initialization can happen in many places depending on the use and scope of the variable. When possible it is good practice to initialize global variables in the set-up function. That said, global variables can also be initialized where they are declared.
• Use the variable: There is no point to creating a variable if you are not going to use it. Now you can write the code that leverages the variable for your own purposes.

Conditionals are very important tools for adding movement and interactivity into a sketch. These functions enable the application to choose between alternate actions according to parameters that you define. They are always based on Boolean expressions, which are logical expressions that resolve to either true of false. Based on these logical expressions a block of code is either be executed or not. Note that it is usually good practice to separate the code written for logic and that written for drawing to screen (this is not always possible though).

When you start adding complexity to your sketch it is important to learn how to use debugging tools and strategies as these will save much hair pulling and potentially worse behavior. println() is one such function that enables the program to output information in the processing IDE (on the screen below the sketch code). The information visible through println() is only visible to the programmer.

Assignments

Start introducing some types of variables into your work so that it can be animated in some way. I have already done this assignment, here is a link to my blog post about it.

Miscellaneous

• Tiny sketch competition going on from Rhizome. Build app with 200 characters or less. Check it out. Available on http://openprocessing.org website.
• Class next semester about modeling natural systems and physics in processing. Talk to Dan about this class.
• For data visualization books and examples built with processing look at Ben Fry’s data visualization books as a starting point.