Homework 9


Upon completing this assignment, you will be able to:


In this assignment, you will create an editor for a visual composition which is composed out of horizontal slices. each of which is an object from the "Slice" class, which you will define. Users can mouse over each slice and use key presses to change its individual attributes. They can press 's' to save data describing the objects' current attributes to a text file; this file is used to initialize the composition the next time the program is started.

It is up to you what these slices look like and how they can be altered; you could, for example, stack a set of panorama images whose visual properties are altered; create a sequence of bezier curves whose degree of curvature, thickness, and color change; or fill each stripe with colorful vertical lines whose number, brightness and thickness alter.

For this assignment, you are provided with skeleton code which will make the visual interaction easier to write. You are not required to use this skeleton code, but you will likely find it useful. You may alter the code in any way you see fit to accomplish the goals of this assignment.

This assignment includes a series of 'finger exercises' to get you warmed up and ready for your unique design.

Finger exercises

You should note that for some of these exercises it makes sense to copy and paste your answer to the previous problem as the start for your answer to the next problem. If particular finger exercises are covered in class, you can submit your in-class-created pair-programming version as a solution.

  1. Fill in the blanks in fe1.pde so that for each line in the coordinates.csv file, the program draws the corresponding square to the screen.
  2. Fill in the missing code in setup() in fe2.pde so that it creates one moving line for each line in the included file lines.txt.
  3. The program fe3.pde is supposed to draw pulsing circles to the screen. It is almost complete, but it is missing the data file and the lines that parse the data file. Define your own data file format for a pulsing circle, create a data file to specify the pulsing circles you want using this format, and fill in the blanks so that the program parses the data file you have created.
  4. Create a program with an integer, a floating point, and a boolean variable, each initialized to the value of your choice. Print the variables in one tab-separated line to the console, as follows:
    1. The integer is printed with 5 digits.
    2. The floating point number is printed with any number of digits before the ., and 4 digits after the .
    3. The boolean is simply printed as true or false, depending on its value.
  5. The program fe5.pde creates a set of bouncing balls and moves them around the screen. Fill in the missing code so that when "s" is pressed, the program uses saveStrings() to save a file called "bounce.txt." Each line of the file corresponds to one of the bouncing balls, and holds its currentX, its currentY and its hue (derived from myColor). The values are comma-separated. You can tell your program works if the next time it starts the balls are the same color and place as the last time you pressed "s".
  6. Modify your answer to the previous question so that the program uses a PrintWriter to store the file instead of saveStrings().
  7. Modify your answer to the previous question so that the BouncingBall class includes a toString() method that converts the ball's current data to a string as described previously. The main program should now use toString() to construct the line of text data for each ball instead of accessing the ball's fields directly.

Design requirements for the composition editor

Your composition editor must fulfill the following requirements:

  1. The horizontal stripes that build up to your full composition must be based on a class called Slice which you define and store in a separate file in your sketch. You must have at least 3 Slice objects in your composition.
  2. The Slice class must include the following:
    1. a constructor
    2. a method called draw() which is used to draw the slice when the mouse is not over it
    3. a method called highlight() which is used to draw the slice when the mouse is over it, and which is somehow visually distinct from the results of draw()
    4. a method called toString() which converts the object's data into your text file format
    In addition, the fields of your class should never be accessed from outside of the class; instead, the class should provide methods which can be used to alter the field's values as necessary for your design (e.g. increaseBrightness()).
  3. Your program must allow users to modify the Slice object over which the mouse is currently hovering using keystrokes. Which keystrokes to respond to and how are up to you, however there should be at least 3 attributes which can individually be controlled.
  4. Your program must load data describing the composition out of a text data file, whose format you define. Your data format must include at least two types of data, one of which is floats which are formatted to exactly 2 decimal places. On loading the data, the program must create the corresponding Slice objects and save them in a globally-defined array. When the user presses 's', the program should save the data describing its current configuration to the same file, using the same format. Although saveStrings() would be adequate for this program, to help you practice you are required to correctly use a PrintWriter to save your file.
  5. Your visual composition must be original, i.e. it should not closely resemble examples covered in class nor your fellow classmates'. It is fine if it is inspired by examples for which source code is not readily available, or by your previous homework assignment.
  6. As always, your code must be clean, clear, well-documented, and following good coding practices. Make sure to include a comment at the top describing the overall functionality of the program and which keys are responded to and how.

You should note that for the skeleton code to work, the slices must be stored in the slices array in order from top to bottom and all be equally high. You may change these parameters, but then you will need to write new code to figure out which slice is under the mouse.

For this assignment, to get an A you must have something visually interesting about your composition.

Submission instructions

Please submit a zipped folder which contains both your finger exercises and your composition editor. Your composition editor should include a sample data text file located properly to load when the sketch is started.

Grading scheme

A+ - All required elements included, plus a particularly interesting and creative approach to fulfilling the assignment requirements.

A - All required elements included and functioning correctly. Code is clean, clear and well-documented. Composition is visually interesting. Finger exercises completed satisfactorily.

B - Competent response to the assignment showing overall mastery of course material, with some small errors that do not greatly affect the quality of the assignment. For example, the code may be somewhat baroque (too complex for what it does), the code may be formatted incorrectly, the visual composition may be arbitrary or simplistic, or the finger exercises are poorly completed.

C - Some bigger errors, or a larger collection of smaller errors, but with potential to develop into a competent response. For example, the code may not run, but with a few small syntactical fixes would properly fulfill the assignment; the code may work but not be comprehensibly written; the code completely misses on one of the requirements, but still shows some understanding of the unit's material; or the finger exercises are not completed.

D - Serious errors show clear effort, but serious gaps in understanding, such as code that does not run and is not close to being correct, fulfills only part of a requirement, or is copied fairly directly from examples used in class.

F - Little demonstrated effort, or clear effort with no understanding, such as code fragments submitted which are only the start of a response to the assignment.