B CUSP 110B – Digital Thinking

Homework 5: Homage to a Square!

Goal: The purpose of this is to practice with Processing, and to lay the foundation for our future discussion of Artificial Intelligence, an important branch of computer science. You will gain some experience with Processing and learn three new CS concepts: randomness, variables and data types.

Art In A Click

Computer art, that is, art generated by computers, not art created by people using computers, leads to some fun Web sites. We will try two of these before getting started on our own computer art project.

Instructions: Click around on the Web to familiarize yourself with various artists’ work. (You will want to save a screen shot of your work in Steps 1 & 2 to be turned in later.)

Step 1: Perform a Google search on “piet mondrian" and then click the Images link at the top of the returned hits list. Scroll through the images to get an idea of his work. He was a cubist and created pictures that look like the one at right. This, however, was a computer generated “Mondrian” … try creating some yourself at

http://www.netlabs.net/hp/richieb/java/Mondrian.htm. Take a screenshot of one of your creations

Step 2: Perform a Google search on “jackson pollock” and then click on the Images link at the top of the returned hits list. Scroll through the images to get an idea of his work. He was an abstract expressionist and created paintings that look like the one at right. This, however, was a computer generated “Pollock” … try creating some yourself at http://www.jacksonpollock.org. Take a screenshot of one of your creations

Step 3: Perform a Google search on “josef albers” and then click on the Images link at the top of the returned hits list. Scroll through the images to get an idea of his work. He was an abstract painter, and created works that look like the one at right. This, however, was a computer generated “Albers” … try creating some yourself at … Oops! First you’ll have to write the Albers In A Click program!

Albers In A Click

Here is a sample solution (download, unzip, double click on .exe to run), and here is a starter project you should start working with (download, unzip, open the ClassExample.cs file and see the parts you need to modify).

Notice the blanks you must fill in InitializeWorld():

And the code you need to fill in UpdateWorld():

You need to investigate the “RandomFloat()” function, figure out the arguments you want use for this function for computing the R, G, and B components of the color for the outer square. The color of the other squares are computed and set in by the starter project automatically. We don’t need to worry about how that works (check out the code and see if it makes sense to you).

There are a total of six places in the start project where you will have to make modifications. All places need a random float number that represents a component of color.

To Turn In

1. Save and submit your screen shots using your name (2 jpg or png files, refer to Exercise-2 on how to take screen shots: select the window, and Alt-PrintScreen). You DO NOT need to submit hard copy of this file.

2. Submit your ClassExample.cs file, bring a hardcopy (Remember to write your name!!) to next class to submit.

Wrap Up

In this assignment you examine arts created with “almost random” geometries. You experimented with generating random numbers as arguments for the color parameter that are used in an art work.

A word about color representation:

On computers colors are typically represented by combining the fundamental color components: Red (R), Green (G), and Blue (B), or (R, G, B). We represent each component by a number between 0 (completely off) to 1 (completely on). For example,

· (0, 0, 0): says all three RGB components are “off,” thus giving us a completely black color.

· (1, 0, 0): says the red component is completely “on”, with G and B components completely “off, thus giving us a bright red color.

· (0, 1, 0), (0, 0, 1): in the same ways, give us bright green and blue.

· (0.5, 0.5, 0.5): says all three component are half-way on, thus giving us a mid-level gray.