21_colorGrid: CSCI 261 Programming Concepts (C++)

Homework 21: Color Grid (with Psychedelic Bonus)

Concepts

This assignment exercises your ability to think about and declare two-dimensional arrays.

Two-Dimensional Arrays

You should have witnessed some examples using two-dimensional arrays in class. Let's summarize what you've learned here.

int ratings[8]; // A one-dimensional array of 8 values
int reds[8][8]; // a two-dimensional array of 64 values
reds[0][5] = 100; // Location "0,5" in the array has the value 100
cout << reds[0][5]; // Prints the value in "0, 5" to the screen

It's absolutely fine to think of two-dimensional arrays as rows and columns. Furthermore, if we have N rows of M values, how can we loop over every NxM value?

const int ROWS = 8;
const int COLUMNS = 8;
int reds[ROWS][COLUMNS]; // declare an 8x8 array

for (int i = 0; i < ROWS; ++i) {
    for (int j = 0; j < COLUMNS; ++j) {
        reds[i][j] = someValue();
    }
}

What happened? We counted from 0 to 7. And each time we "counted" a number, we counted another number from 0 to 7. If nested for loops could talk to themselves, the loop above would say to itself, "0, 0-1-2-3-4-5-6-7. 1, 0-1-2-3-4-5-6-7. 2, 0-1-2-3-4-5-6-7 ... 7, 0-1-2-3-4-5-6-7. I really should stop talking to myself."

Notice how inside the for loop, the counter values are used to reference each location in the array. How exciting!

Instructions

In the previous assignment you drew a set of eight squares, each of a different color. You used three arrays for red, green and blue values. Each of those arrays stored eight values, one for each square. You then used one value from each of the red, green and blue arrays to specify an RGB color for a square.

Your goal for this assignment is to create a drawing that looks like the following.

Your program should draw an eight-by-eight grid of colored squares to the screen. The squares should be 100x100 pixels in size and the colors should not "flicker" or change. This assignment is similar to the previous one, but uses two-dimensional arrays for color values, and uses nested for loops.

Hints

You're on your own for this one! Let's see how you do.

Pay attention to the comments in testApp.cpp.

Psychedelic Bonus

These changes assume you're properly using the color arrays when calling ofSetColor and that ofRect is using the constant SIDE_LENGTH properly. If you're unsure about this, ask!

Once your program is working, you should try a few cool things. First, change your SQUARES_PER_ROW constant to 50, set your SIDE_LENGTH constant to 16 and re-run your program (it should work perfectly fine and display 250 colored squares).

Now let's get crazy. Change your SQUARES_PER_ROW constant to 200 and set your SIDE_LENGTH to 4. Now re-run your program.

Not crazy enough? Let's tell OF to "rotate" it's camera with the ofRotate function. First, initialize a new variable near the top of testApp called degrees:

int degrees = 0;

Now, let's call ofRotate right before your call to ofRect. Try it like this:

ofRotate(++degrees, 400.0, 400.0, 0.0);

This is telling OF to rotate it's "camera" along a certain axis by a factor of degrees, which is continually getting incremented each time ofRotate is called.

Re-run your program and show a friend (or your programming date) what you've done. Is it crazy enough now? No?! Experiment with different values to see how it affects your program. Ask questions on piazza about other zany things you can do.

Use this at a programming party with a projector and the lights off. When someone flirts with you by asking, "How did you do that?" you should just say, "Two dimensional arrays, my friend, two dimensional arrays," and then walk away like it's no big deal.

Requirements and Rubric

This work is worth 140 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 SQUARES_PER_ROW	10
Correctly declares constant SIDE_LENGTH	10
Correctly declares three 2d arrays called `reds`, `greens` and `blues` using the constant SQUARES_PER_ROW	15
Valid implementation of `initializeColors`	20	nested for loops!
`initializeColors`' for loops correctly use SQUARES_PER_ROW	20	inner and outer for loop
`setup` sets a background color and initializes colors	20
`draw` draws SQUARES_PER_ROW * SQUARES_PER_ROW squares	20	nested for loops!
`draw`'s inner for loop calls `ofSetColor` and `ofRect`	10
`draw`'s for loops correctly use SQUARES_PER_ROW	10	inner and outer for loop

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

CSCI 261 Programming Concepts (C++)