CSCI 120 Lab 5

Objectives

To become acquainted with the Processing environment.
To gain the first bit of experience with creating an interactive graphics program. Much of this lab is open-ended. Feel free to experiment. You may find it useful to have a browser open to the Processing documentation.

Processing

Start up a terminal session. Create a lab5 folder.
Type "processing &" at the command prompt.


The Processing interface is pretty intuitive. You create new
projects through the File/New command. Do that.
Now Processing does not initially ask you where
the project should be stored, however. To make sure you know where it
is, select the "File/Save As" option, and give it the name
"ShapePrimitives"; put it in your lab5 folder.
 Note
that when Processing creates a project, it also creates a folder of
the same name. If you followed the above instructions carefully, and
 open your lab5 folder, you  will find a folder
called ShapePrimitives, and inside that a file 
entitled "ShapePrimitives.pde" (among others). "pde" stands for
"processing development environment" and is the standard extension
for all projects created by Processing. The pde file must be
in an enclosing folder with the same name, created by Processing.



Graphics

Let's put something in that file! Copy and paste the following into the
ShapePrimitives project window, and save it:
// Shape Primitives
// by REAS  

// The basic shape primitive functions are triangle(),
// rect(), quad(), and ellipse(). Squares are made
// with rect() and circles are made with
// ellise(). Each of these functions requires a number
// of parameters which determines their position and size.

// Created 19 January 2003

void setup()
{
  size(200, 200);
  noStroke();
  smooth(); 
}

void draw ()
{
  background(0);
  fill(226);
  triangle(10, 10, 10, 200, 45, 200);
  rect(45, 45, 35, 35);
  quad(105, 10, 120, 10, 120, 200, 80, 200);
  ellipse(140, 80, 40, 40);
  triangle(160, 10, 195, 200, 160, 200); 
}

NOTE: The above is a slightly modified version of one of
Processing's built-in examples. You can get the Processing version by 
selecting File/Sketchbook/Examples/Basics/Form/ShapePrimitives. But you'd only be
able to modify it if you go through the "Save As..." routine that we already went through
above. And more importantly, I found that Processing's version did not work on Linux, while the above does. So for now, just copy and paste as I suggested. In the
future, explore the other built-in examples, and save them in your own folder if
you want to modify them.
Run it. (I.e., hit the run button.) Not bad huh? But perhaps a little ho-hum.
Take a few minutes to experiment with the code. Change a few of the numbers. Change the fill color too:


 Note that in a two-argument fill
(as in fill(220, 40)) the second argument governs the transparency, so it's nice to use with overlapping shapes.
A three-argument fill (as in fill(200, 100, 50)) will fill the subsequent shape with color according to the (red, green, blue) values specified.
If you include a fourth argument (as in fill(226, 200, 100, 200)) that
last argument will again determine the transparency. All of these numbers take on values from
0 to 255. (Nothing bad will happen to you if you put in a number outside this range; 
Processing will just automatically change it to stay in range.)



Hopefully, you can begin to see how you would create your own image this way.
So do that. Save it as a different file (say "MyFirstPicture") in your lab5 folder. Delete all the code that created the original shapes (if you haven't essentially done that already). Alter the comments to indicate that it is you who have created the program. And then.... well, make a nice picture!


Motion
Making shapes is nice. But making shapes move is cooler.

Download FirstAnimation. Make a
Processing project out of it, and run it. Study the program and make sure
you have a reasonable idea of what it's doing.
Have some fun with this. Can you make the ball move up and down as
well as back and forth? Could you add a second ball? How?


Interactivity
Making shapes move is cool, but interacting with that motion on the 
fly is yet even cooler.

Starting with FirstAnimation (or any modifications you've
made to it if you're confident enough), add the following code just after
the body of the draw() method:
void keyPressed ()
{
  if (key == '+')
     xspeed = xspeed + 0.5;
  else if (key == '-')
     xspeed = xspeed - 0.5;
}

Run it. Watch what happens when you press the '+' or '-' keys of the keyboard.
Note that the result depends on the direction of motion of the ball.

PAUSE: What's happening here is that there's a fixed method
("void keyPressed()") which is automatically invoked
whenever a key is depressed. The way you have the program respond
to the pressing of the key is simply by putting code in the 
body of this method. This is an example of event-driven
programming. It is also possible to have the program respond to
the drag or press of a mouse. In that case the method is called mouseDragged() or mousePressed(), respectively. There are built-in
variables that give you the location of the mouse easily enough:
mouseX and mouseY. These can be referred to
anywhere in the program (just like the built-in variable key
above).
Again: Can you see ways of modifying this code so that it does other things?
Changing the color of the ball depending on its speed is fun, for example.
For that you need the fill command (see above). There's nothing to prevent
you from putting variables in for the arguments for fill()
e.g., xspeed or maybe abs(xspeed). 



 In fact... don't run any Processing 
program without tinkering with it a little bit at least!


When you are done, submit your lab5 project electronically.


Back to CS 120 Home Page