You will complete three problems for this assignment: ball1, ball2, and colorsquares2. All three should be in a folder named "hw2".
Learning Processing, Chapters 4–6.
There's a fun optical illusion that arises from carefully drawing color gradations on concentric circles. The idea is to draw several concentric rings, with the outermost a very dark shade, and each successive inner one a lighter shade than the one that encloses it. The result is a sphere that appears to "glow" from its center.
Here are examples, using (respectively) 10, 20, and 60 consectuive rings:
Your job for this problem is to make a program that draws this "sphere". The color gradation and the number of rings are up to you. However, the color gradation must suggest this "glow", and it should be easy to change the number of rings, for more or less detail in the drawing. Save your source code in a sketch file named "ball1".
The only reasonably elegant way to solve this problem is to draw the "sphere" using a loop.
The "glow" effect is more convincing if the circles are drawn without outlines. Use the command noStroke() to effect this.
Per the discussion in class (Monday 09/16), it's easiest to implement all of your work in the setup() definition. For this problem, you don't need to include a draw().
An easy way to change color gradually is to keep a pair of variables that store the number of rings and the degree of color change between each ring.
int numShades = 60; int deltaCol = (int) (255.0 / numShades);
Note the use of the explicit floating-point value, 255.0, to force floating-point instead of integer division. We use 255.0 here, since 255 is the large value possible for any color channel. You might also begin your "outer" color at something other than 0, in which case, deltaCol should be calculated with a value less than 255.
Using the sphere-drawing techniques you developed for the first problem, create a second program that loads an attractive image, and animates an illuminated sphere, bouncing around the inside of the window:
Save your source code in a sketch file named "ball2".
This problem is actually pretty challenging. Fortunately, you've seen most of what you need to see in the recent in-class examples (the bouncing target, and the bouncing color line square). See the Example Code page for working copies of these programs.
Obviously, you're going to need a loop to draw the sphere. Because it's moving in the window, you're going to need to use this loop inside of the draw() definition. The most important things to keep in mind are these:
The draw() definition defines an event loop. Putting a loop inside of this causes strange interactions. We discussed this in class on Monday and Wednesday (09/16 - 09/18).
Think about which variables have to be initialized every time, before the sphere-drawing loop runs. Should those variables be declared globally (i.e. at the top of your source file) or locally, inside of draw()?
Bonus goodness: you can size your sketch window to the same size as the image you load with the following statements:
bkg = loadImage(" <image file name> "); size(bkg.width, bkg.height);
Be sure that you've declared the variable bkg (or whatever you want to call it) as a global variable, with the type PImage.
In Exercise 6-8 of your text, you're asked to create a grid of colored squares, where the colors are chosen randomly.
Modify this program in a sketch named colorsquares2, in which the squares change color every few seconds:
Start with a version that redraws the colored squares with the draw() definition. If you understand the structure of the original colored squares program, this one is pretty straightforward. The main thing to remember is that you need to be sure to get the initialization statements for both loops in the right place.
The resulting animation will be pretty frenetic: a bit like a color version of the static that you'd see on television screens before digital broadcasting became common. The effect is ugly, but it's a good start for solving the overall problem.
The only new technique is controlling when the color changes happen. Try keeping a variable that counts the number of frames that have been drawn (review the discussion of the draw() definition in Chapter 3, if you're fuzzy on this. When this "counter" hits a certain value (e.g. 100, if your frame rate is set at 50, and you want a change every two seconds), redraw the screen, and reset the counter
Incidentally, there's a built-in variable, frameCount, that tracks information about the frame count, but you don't want to use it here, since you're going to need to reset that value.
The only real requirements are that the colors change every few seconds and that they do so with some degree of randomness. As we saw in class, there are several variations available, by biasing the random generation of colors. For example, you can ensure a mostly bluish scheme with
r = (int) random(0, 150); g = (int) random(0, 150); b = (int) random(100, 255);
Other variations can be obtained by keeping variables for the minimum and maximum red/green/blue values, and letting those change over time. Or find a way to generate darker shades in one corner, lighter shades in another. Have fun with this one!
As in Assignment 1 (and all assignment for this course), submit the folder containing your Processing sketches. This should be a single folder named "hw2", which will contain your ball1, ball2, and colorsquares2 sketches. You do not need to submit a paper printout of anything. Again, the turnin directory is
You may re-submit this work as many times as you like, up to the due date/time. Anything submitted after 3:59 pm on Thursday 09/26 will be considered late (and every file contains a time stamp).
Your code must be syntactically correct. Any solution that contains a syntax error anywhere (and hence crashes when you hit the "play" button") will receive no credit.
If you run into any trouble here, please ask me or one of the TAs for help.
Naturally, your code must be behaviorally correct, though partial credit is always given for partial solutions.