CSC 103: How Computers Work

Homework 4: Processing

Due: Wednesday April 20 at 6pm on Moodle

Credit for this assignment: Dominique Thiebaut

Part A: finish lab

The first part of this homework is to complete Lab 4 on Processing (just the part from Wednesday, not the part from Monday). Save your final programs as a Processing sketch (.pde file) and include your name at the top as a comment. You don't need to comment each line of your program, but comment lines that might not be obvious to someone else reading your code. Submit this file on Moodle.

Part B: a book cover for our class

Say we want to create a booklet cover for our class notes. We could create a Processing sketch that draws some interesting colorful shapes on the screen, along with a title; we take a screen capture, and voilà! We have our cover. Your assignment is to write this sketch.

To get an idea of what your sketch should do, watch this short YouTube video.


You will notice that when the video starts the applet already contains some shapes and text that were generated before the movie capture started. Then I bring the mouse inside the applet, click the mouse button, and everything disappears (except the text). Actually the text disappeared, but it was brought back right away, so it looks like it wasn't erased, but actually it was!

Then I move the mouse around, which creates some squares when the mouse is inside the right half of the applet, and some circles when it is in the left half. At some point I click the mouse button again, which erases everything a second time.

Note also that the circles are more red on top of the applet, and more yellow at the bottom of the applet. Their variation is gradual. They are also smaller when close to the left border than when they are close to the middle of the applet.

The rectangles have a simpler behavior. They change color, going from green in the middle of the applet to yellow when near the right vertical border.

Your assignment is to recreate this sketch as closely as possible. You may pick different colors for the text, the squares, and the circles, but their behavior should be (as much as you can) close to the behavior shown in the movie. Start simple! Try to create the functionality one step at a time.

Submit your .pde file and your screenshot on Moodle.