Design Programming: Tutorial 1
Design Lab, University of Sydney

Introduction

Welcome to Design Programming. Today we're going to have some fun with some simple programming to produce an interactive environment. We're going to use the desktop version of Processing for this tutorial.

In the process of developing our environment we will be doing some simple computer programming to implement elements of the interactive environment.

Introduction to Processing

Let's start by looking at the Processing development environment:

To start Processing in Mac OS X: open the Finder and navigate to the Applications folder (it should be listed on the left of every Finder window) and then double click on the blue Processing icon.

To start Processing in Windows: click on the Start menu and navigate to the sub-menu for Programming. You should be able to select in this menu Processing.

The Processing environment should look something like this (yours will be blue because its a newer version of the software than the one on display here):

The Processing development environment.

When you first run Processing it will create a "sketchbook" for you on the computer, which is where it will store sketches for you by default. In Mac OS X this Sketchbook will be located at Documents/Processing. In Windows, you Sketchbook will be located in My Documents\Processing. To find the exact location of your sketchbook, open the Preferences window and look for the Sketchbook location.

We'll come back to your Sketchbook towards the end of this course when we look again at desktop Processing.

Getting ready to Program

We're not going to try to program everything for our example today, so we're going to need to start with some source code. Download the following file and unzip it to your Desktop. In both Mac OS X and Windows you should be able to unzip this file by double clicking on it.

    SpringShapes.zip

To open the source code in Processing, simply open the folder that was created when you uncompressed the zip file and double click on the file SpringShapes.pde. This should open a new window with the following code on display: 

SpringShape shape1() {
  SpringShape shape = new SpringShape();
  
  // START OF YOUR CODE
  
  // Box edges
  shape.addSpring(-10, -10,  10, -10);
  shape.addSpring( 10, -10,  10,  10);
  shape.addSpring( 10,  10, -10,  10);
  shape.addSpring(-10,  10, -10, -10);
  // Box supports
  shape.addSpring(-10, -10,   0,   0);
  shape.addSpring( 10, -10,   0,   0);
  shape.addSpring( 10,  10,   0,   0);
  shape.addSpring(-10,  10,   0,   0);
  // Add sounds
  shape.setBounceSound("kick.mp3");
  shape.setCollisionSound("snare.wav");
  shape.setBreakSound("explosion.mp3");
  shape.setSqueezeSound("boing.mp3");
  shape.setStretchSound("creak.mp3");
  
  // END OF YOUR CODE
  
  return shape;
}

SpringShape shape2() {
  SpringShape shape = new SpringShape();
  
  // START OF YOUR CODE
  
  // Hexagon edges
  shape.addSpring(-10,   0,  -5, -10);
  shape.addSpring(-10,   0,  -5,  10);
  shape.addSpring( 10,   0,   5, -10);
  shape.addSpring( 10,   0,   5,  10);
  shape.addSpring( -5, -10,   5, -10);
  shape.addSpring( -5,  10,   5,  10);
  // Hexagon supports
  shape.addSpring( -5, -10,   0,   0);
  shape.addSpring(  5, -10,   0,   0);
  shape.addSpring(-10,   0,   0,   0);
  shape.addSpring( 10,   0,   0,   0);
  shape.addSpring( -5,  10,   0,   0);
  shape.addSpring(  5,  10,   0,   0);
  // Add sounds
  shape.setBounceSound("Beat_box_human_voice.mp3");
  shape.setCollisionSound("Single_computer_beep_wDelay.wav");
  shape.setBreakSound("Child_says_nana.mp3");
  shape.setSqueezeSound("Eerie_hit_w_delay.mp3");
  shape.setStretchSound("Metal-sheet_metal_shavings.mp3");
  
  // END OF YOUR CODE
  
  return shape;
}

This code defines two functions called shape1 and shape2. (We'll explore functions in much more detail later in the course, for now, just follow along with these instructions.) Each function creates a thing called a SpringShape, which is an interactive "toy" that we can manipulate when we run our program. Before we do anything else, let's try running the program to see what it does... click on the play button in the toolbar, it looks like a circle with a triangle inside it.

This will open up a new window. Make sure the window is in front. To add SpringShapes and interact with them use the following keyboard and mouse commands:

  • Create shape1: press '1' and click left mouse button
  • Create shape2: press '2' and click left mouse button
  • Drag SpringShapes: press 'A' and drag mouse while holding down left button
  • Spin SpringShapes: press 'B' and drag mouse while holding down left button

As you add SpringShapes you'll notice that they can bounce around the window and collide with each other, and after a certain number of bounces and collisions the shapes break. Also notice that the SpringShapes play different sounds when the bounce around the window and collide into each other. The geometry and sound effects for each SpringShape is defined in the code above.

The initial SpringShapes. The red dot marks where the mouse is located.

To stop the program, just close the window or press the ESC key.

Creating Some Simple Shapes

Let's start creating your own shapes. Delete the code between the lines 

// START OF YOUR CODE
and 
// END OF YOUR CODE
so that your Processing window looks like this: 

SpringShape shape1() {
  SpringShape shape = new SpringShape();

  // START OF YOUR CODE



  // END OF YOUR CODE

  return shape;
}

SpringShape shape2() {
  SpringShape shape = new SpringShape();

  // START OF YOUR CODE



  // END OF YOUR CODE

  return shape;
}

If you try running the program now you'll notice that trying to add new SpringShapes doesn't do anything.

Let's make a very simple SpringShape. In the shape1 function add the following line of code in the area we've just cleared: 

  shape.addSpring(-10, 0, 10, 0);

This will create a SpringShape with a single (horizontal) spring when we hold down '1' and press the mouse button. The numbers in the round brackets (a.k.a. parentheses) indicate the start and end coordinates for the spring, i.e., this spring is created starting at (-10, 0) and finishing at (10, 0), relative to the mouse when '1' is pressed and the mouse button is clicked. Now add the following line of code to the shape2 function: 

  shape.addSpring(0, -10, 0, 10);

This will create a SpringShape with a single (vertical) spring:

Really simple SpringShapes.

You can attach springs together simply by making them start or stop at the same position, for example, the following code would produce three springs joined together into a triangle: 

  shape.addSpring(-10,   0,  10,   0);
  shape.addSpring( 10,   0,   5, -10);
  shape.addSpring(  5, -10, -10,   0);

The resulting shapes would look like this:

Triangular SpringShapes.

Make Some Noise

Now let's attach some sounds to our shapes. Add the following line of code to the shape1 function: 

  shape.setSqueezeSound("boing.mp3");

and the following line of code to the shape2 function: 

  shape.setSqueezeSound("snare.wav");

Notice that we can attach either MP3 or WAV files to our SpringShapes. After you've created some shapes you may need to drag the shapes around to give them enough speed to make the sound when they bounce off the window edges. There are five different types of sounds that you can attach to a SpringShape for squeezing, stretching, bouncing, colliding, and breaking: 

  shape.setSqueezeSound();
  shape.setStretchSound();
  shape.setBounceSound();
  shape.setCollisionSound();
  shape.setBreakSound();

Design Your Own Shape

Now it's your turn to design some interesting SpringShapes. To make this easier we've supplied you with some graph paper to help work out the co-ordinates for the end points of your springs. Once you designed your shape on paper, decide how you want the shape to be drawn relative to the mouse cursor and use the graph paper to work out where the end-points of the springs should be, assuming the mouse position is located at (0, 0). (You might want to use one square on the graph paper to represent 10 units in your program.)

Graph paper for planning your SpringShapes.

Add Your Own Sounds

If you'd like to attach different sounds from the ones used in the original program, you can find a large collection of great sounds at Sound Jay. To add them to your program, download them from the website and simply drag the MP3 or WAV file onto the Processing window. Remember what the filename is called, and use this filename to set the sounds to be used in your code.

Resources

On-Line Resources

  • Processing: http://processing.org/ is the home of Processing. You can download it for free and there are lots of great examples to show you how to create sketches like the ones we've been working with today.
  • Sound Jay: http://www.soundjay.com/ is a great place to get free sound samples.