CSCI 261 Programming Concepts (C++)

Homework 15: Robot!

Concepts

Focus on one main concept in this assignment: calling functions.

Using Graphics Functions from the OpenFrameworks Library

OpenFrameworks is "an open source C++ toolkit for creative coding" especially designed to enable you to create graphics and animations relatively easily. While we don't expect you to master OpenFrameworks, we will be using this toolkit to create our final simulation project. Over the next couple of months, we will be continually exercising your knowledge of how OpenFrameworks works and how to use the numerous functions it provides.

First, understand that most of your code will be implemented in the file testApp.cpp. When given an empty OF project, you'll notice that testApp.cpp contains a lot of "empty" functions, just waiting for you to exploit them. Here's an example of a simple OF program:

When an OpenFrameworks program runs, it calls the setup() function once. Notice how the body of that function does one thing: it calls another function, called ofBackground(), passing it three arguments. That function sets the background color to black via three arguments where red is 0, green is 0 and blue is 0, all on a scale from 0 to 255. The result looks like this:

Once an OpenFrameworks program is running, it starts what we call an "event loop." This is a fancy way of saying that behind the scenes, your program is really calling draw() over and over again in an infinite loop. Each call to draw() happens very quickly; when draw() does something different each time it is called, the resulting effect is an animation. You need to imagine an OpenFrameworks application as a movie film strip. As each "frame" flashes by, the resulting effect is a moving picture.

However, you'll notice that in the code above, draw does something specific, so each time it is called, it does that same thing over and over again: it sets a color to draw with (a medium gray) and draws a line from point (30, 20) to (85, 75). The coordinate plane for an OpenFrameworks window begins with (0, 0) in the upper left corner of the window, and extends positively in each direction.

Animation

Animation in OpenFrameworks is simply a matter of doing something different each time draw() is called. For example, imagine if the draw function looked like this:

Each time draw() is called, it in turn calls the function ofSetColor() which in turn uses rand() % 256 to generate a random number between 0 and 255 for each of the three arguments. So each time draw() is called, it calls ofSetColor() with a random set of numbers. The resulting effect is a line that is drawn with a different color for each "frame," and you would witness a colorful, flashing, psychedelic line drawn on the screen. Check it out:

click here to see the animation

Spend a little time thinking about what you are seeing: OpenFrameworks is calling draw() over and over again, and is drawing the line with a different color each time it is called.

Now consider what might happen if we change the code to this:

Now we're using a different starting coordinate for the line each time it is drawn every frame. It looks like this:

click here to see the animation

Again, think about how this works. draw() is called repeatedly (really fast!) and draws a different colored line in a different location for every "frame." As a result, we see an animation.

Instructions

The purpose of this assignment is to introduce you to OpenFrameworks, teach you how to look up and understand documentation about library functions, and to exercise your ability to call functions.

And, we seem to have lost our robot... so we need you to put it back together again.

The robot looks like this:

Your goal for this assignment is to start with an empty OF project and implement the body for setup() and draw(). Take a look at the robot. Notice how it consists of nothing but circles, lines and rectangles. Hmmm... does OpenFrameworks provide you with functions for drawing circles, lines and rectangles?

A secondary goal for this assignment is to teach you how to learn more about libraries. In reality, this is pronounced "reading documentation" and you are expected to do a little digging online in order to discover how to use the functions for drawing the robot.

When successful, your robot should look very similar to the image above. We're not too concerned about colors (go nuts!) or the exact placement of the eyes, neck, antennae and so on. But your robot should look very much like the image above when complete.

Hints

Setting the background color

Let's face it: grey is booooring. You need to implement one line of code in the setup() function: a call to ofBackground(). Choose a background color that you like.

Drawing the robot

Your robot must make use of the following functions:

You can certainly use more functions and add enhancements to the robot. But the grading criteria dictates using those particular functions and using them at least a certain number of times.

Learning about how to use the functions

It would be nice if we linked each of the functions named above to the particular documentation page. But, we would be robbing you of some valuable pain, er, experience regarding how to learn about libraries. However, we will give you a clue: here is the main list of functions in the OF library. Notice the middle column of functions under "graphics" -- that's all about you.

Requirements and Rubric

This work is worth 105 points.

Concepts Exercised: libraries, graphics, functions, fun

© 2011 Yong Joseph Bakos.