CS 106 Winter 2017

Assignment 00: Warmup


The "Stepping Feet" illusion is a motion-based optical illusion in which two "feet" (rectangles, one light-coloured and one dark-coloured) move smoothly across a background of high-constrast (black and white) vertical stripes. Michael Bach has created a live web-based demo of the illusion in which you can play around with a few different drawing parameters.

Create a Processing sketch titled SteppingFeet that implements this illusion. Your sketch must fulfill the following minimal requirements:

  1. Your sketch must run in a window of size 600×300.
  2. The background of the sketch must contain an alternating pattern of equal-width black and white stripes. (One way to accomplish this is by clearing the sketch window to white every frame, and then drawing black stripes in a loop.)
  3. Your sketch must contain at least two rectangular feet, which are aligned vertically. One foot must be a light colour (but not white), and another must be a dark colour (but not black). The feet must have the same width, which is an even multiple of the stripe width (we recommend 4 or 6).
  4. The feet should start at the left edge of the sketch window, and move at a constant speed to the right.
  5. You must choose the colours, width and spacing of the feet and the size of the stripes so that the illusion is clear. (Feel free to base all of these values on Michael Bach's demonstration.)
  6. You must prevent the feet from moving to the right forever. When they reach the right edge of the window they can teleport back to the left edge, or (with a bit more work) they can reverse direction and head to the left (as long as they reverse again when they hit the left edge!). Regardless, they should always be visible in the sketch window, and should always be moving at constant speed.

Feel free to add more features to your sketch to control other aspects of the illusion, if you want. We may award bonus marks for especially innovative enhancements to the base assignment requirements.


In this and all future assignments, there are some standard steps to follow for submission. Please do not deviate from these steps—we may penalize assignments that do.

  1. Review the Code Style Guide and use Processing's built-in auto format tool. You do not need to use the precise coding style outlined in the guide, but whatever style you use, your code must be clear, concise, consistent, and commented.
  2. Review the How To Submit document for a reminder on how to submit to LEARN.
  3. Make sure to include a comment at the top of all source files containing your name and student ID number.
  4. Create a ZIP archive called A00.zip containing the entire SteppingFeet sketch. That is, unzipping the archive should produce a folder called SteppingFeet, containing the file SteppingFeet.pde. Use the exact name given here: do not call your sketch SteppingFeet_JohnSmith, or steppingfeet, or Stepping Feet. Do not include other folders in the archive.
  5. Upload your zipped archive to LEARN.