CSCI 261 Programming Concepts (C++)

Homework 20: Color Squares

Concepts

You should be comfortable with declaring arrays, assigning values to arrays, and using loops to access all of an array's values.

This week's concepts are a bit specific to OpenFrameworks.

What Is a "Framework?"

In software engineering, a framework is more than just a library. In a nutshell, a programming framework is a collection of libraries tailored to a specific purpose such as creating games, generating Web sites, or drawing motion graphics. Some goals of a framework include:

• it makes it easier to work with complex technologies
• it ties together a bunch of discrete objects/components into something more useful
• it forces the team (or just me) to implement code in a way that promotes consistent coding, fewer bugs, and more flexible applications
• everyone can easily test and debug the code, even code that they didn't write

(Clifton, M. "What is a Framework?")

OpenFrameworks is one such tool, which you've been using to create graphics rather easily. (Yes, easily! If we showed you all the code that really goes into drawing what you'll do in this assignment, you would cry. Yes, cry.) Did you know some of the graphics in Tron Legacy were created with OpenFrameworks? Or this Depeche Mode video?

The OpenFrameworks Model

When you run an openFrameworks application, what happens? Let's start with main.cpp since that is where the main function is defined.

Open the file called main.cpp in assignment 20_colorSquares.

This tells the compiler to include the framework.

This tells the compiler to include your application, which by default we call testApp. The "prototype" of your application is in the file testApp.h and the implementation (your code) is in the file testApp.cpp.

This asks the compiler to include the libraries it needs to draw a window for 3D graphics on the screen. What the heck is Glut? GLUT is a framework for the OpenGL library. See? We used the words framework and library in the same sentence. The GLUT framework makes it easier to use the OpenGL library (although some might argue that OpenGL is really a framework).

The first line inside main declares something called window. What is window? What is it's datatype? window is an ofAppGlutWindow, which is a custom ("abstract") datatype that OpenFrameworks provides.

The next line calls a function called ofSetupOpenGL. What does the function do? It "sets up OpenGL" giving the 3D graphics library the information it needs to "get ready." What are the inputs to that function? They are a window, a width and height (800 x 800) and some constant that open frameworks provides. (How do we know it's a constant?) The constant OF_WINDOW tells the framework that your application should run in a window. (There is also OF_FULLSCREEN and OF_GAME_MODE).

The last line calls a function called ofRunApp which starts an application. What application? A testApp. Don't worry about how strange that line of code may look, it means "computer, instantiate (create) my testApp and give it to the ofRunApp function."

At this point, OpenFrameworks takes over, and does something with testApp. What does it do?

The Basics of the OpenFrameworks Application Model

The first thing OF does with testApp is call the function setup just one time.

Open the file testApp.cpp. Find the definition for setup:

See that funny syntax? We'll explain that more later, but it's a way of saying, "Hey, this is testApp's setup function." Remember, this setup function is called once when your app starts, so it makes sense to "set up" things your app needs here. (For example, initializing color values in arrays, as described later in the assignment).

Once setup is called once, your app is off to the races: OF will repeatedly call the functions update and draw over and over again. For now, don't worry about the update function. And you should be comfortable with the idea that draw is called over and over again (15_robot, 17_robotArmy). What does your app do over and over again? Whatever is in draw.

What does this app do? It prints "One for the console" over and over again and also draws a circle over and over again, in the same location. That circle is 100 pixels from the left and 100 pixels from the top of the window, and has a radius of 50 pixels.

Remember, (0, 0) is the upper left corner of your application window's coordinate system.

Instructions

This application is designed to exercise your ability to declare arrays, initialize their values and access their array values (with loops of course). Your goal is to first create a picture that looks like the following, and and at the end, we'll give you a little "function fairy dust" to sprinkle in at the end to animate your creation.

Your program should draw eight 100x100 colored squares to the screen and the colors should not "flicker" or change. In previous assignments, we used rand() to generate different random numbers every time draw was called. In this assignment, we will store random color values into an array once and use them in our program.

Hints

Read the comments in testApp.cpp for some important tips.

Use three arrays to store numeric color values. You will use these values as the R, G and B values passed to ofSetColor. They should be declared near the top of testApp and have their values initialized by the function initializeColors. The definition of that function is entirely up to you. It may be parameterless (since the color arrays are "global" to the function). However, you must use one for loop that assigns random values (0 - 255) to all three arrays of color values.

Your setup function only needs to do two things: set the background color, and initialize the array colors.

Your draw function should contain a for loop that draws NUMBER_OF_SQUARES squares that are 100 x 100 pixels in size somewhere near the middle of the screen (as pictured above). You may extract this code into a drawSquares function if you wish.

You know your program is right when you can just change the constant NUMBER_OF_SQUARES to 3 and see only three squares on the screen.

Bonus (cool Function Fairy Dust) Experiments

Once your program is working, you should try a few cool things. First, change your NUMBER_OF_SQUARES constant to 3 and re-run your program (it should work perfectly fine and display only three squares).

Next, right before the for loop that draws all of the squares, insert the following line of code immediately before your for loop:

Re-run your program if you like.

Next, when drawing the squares with ofRect, try the following:

This tells OF to draw the squares from a position relative to mouseX and mouseY, which are two global variables that OF provides you. Note: if you implemented a function to draw your squares, see this piazza message for a tip.

Now re-run your program and see what happens.

For a little extra fun, try adding the following line right before your call to ofRect:

What do you think is happening?

Requirements and Rubric

This work is worth 130 points.

Requirement	Points	Notes
Place your name in the comment header in main.cpp	3
Correct submission of src directory as a .zip file.	2
Correctly declares constant NUMBER_OF_SQUARES	10
Correctly declares three arrays called reds, greens and blues using the constant NUMBER_OF_SQUARES	15
Valid implementation of initializeColors	20	for loop!
initializeColors' for loop correctly uses NUMBER_OF_SQUARES	20
setup sets a background color and initializes colors	20
draw draws NUMBER_OF_SQUARES squares	20	for loop!
draw's for loop calls ofSetColor and ofRect	10
draw's for loop correctly uses NUMBER_OF_SQUARES	10

Concepts Exercised: collections of things (arrays), animation, application, graphics, fun, libraries

© 2011 Yong Joseph Bakos.