Q8: Visualize this!

Table of Contents


  • Create your own images using programming statements.
  • Draw shapes on images using colors.
  • Work with arrays, lists and loops.

Academic Honesty

Read the Scholastic Honesty Policy and Assignment Integrity policies of the syllabus. Here are some clarifications for this particular assignment:

  • You are expected to work with your guild to develop a complete and playable scenario.
  • Do not copy code from the Internet or other sources without attribution. You may use helper classes from other sources, such as the instructor or Internet, but must attribute the code to the originator. Copying code snippets from the instructor's lesson examples without attribution is allowed.
  • Within your guild, you are expected to help each other develop code, artwork, music and sound according to your abilities.
  • However, for the parts of the quest marked "solo" and you must type all the code for your classes and not copy or modify it from another source. You may get help from your guild members if you get stuck. However, you must be able to explain and reproduce all code within your class.
  • You may get help from people other than your guild members if your guild members cannot help you, but only if they do not show or tell you the code to type. Instead they should show you other examples that you can adapt to your code.
  • You may get help from people other than your guild members on non-code aspects of the project but must attribute their work.

If you get stuck, take a break and come back to it later, talk to the professor, or ask a guildmate for help. Remember, do not allow anyone to type Java code for you or show you Java code to copy. Instead the person helping you should show you techniques using other examples that you can adapt.

Project Crafting Specifications

As a guild, create a Piano Visualizer that combines visualization objects from each guild member. Here are a few visualization ideas to get you started.

  • Draw different shapes such as rectangles, triangles, circles or something more complex (see lesson 8.3.2)
  • Draw shapes in different locations than above the keys (see lesson 8.3.4)
  • Draw shapes using random colors (see lesson 8.3.5)
  • Have the shapes fade over time by changing the transparency value in the act() method (see lesson 8.3.6)
  • Have the shapes move on the visualizer screen (see lesson 2.2.5)
  • Draw several shapes using a loop in the visualize() method (see lesson 7.3.3)
  • Change the background color or image of the visualizer screen (see lesson 8.2.4)

Solo Requirements

  1. Each guild member creates one or more new Actor subclasses to draw imagery or create visual effects whenever a piano key is pressed.

    Use your originality to create effects. Draw something besides fixed-sized ovals at random locations in columns above a key that fades away over time. Name your classes something different from Bubble, Oval, or any class we used in the lesson. Though you may update the Key, Piano or Visualizer classes, you cannot claim them as a new class.

  2. For each one of your solo classes, add and fill in a comment block at the top of each file like the following that includes your name after the @author tag.
     * A note to float above the piano keys and eventually fade away.
     * @author Ed Parrish
     * @version 10/20/2017

    Without the @author tag and your first and last name you may not receive any credit for your work.

  3. Create at least two constructors for every one of your solo classes: a default constructor and an overloaded constructor. Both constructors must contain code to initialize objects of the class. The default constructor should make it easy to test the class while the constructor with parameters should allow for setting up more varied initial conditions.

    Hint: see lesson 8.3.3: Shape Objects for examples of these constructors.

  4. Call at least one of the methods of the GreenfootImage class that starts with either draw or fill for some shape in at least one of your solo classes.

    See lesson 8.3.2: Drawing Shapes for examples.

  5. In at least one of your solo classes, declare at least one array variable, and then fill and access the array.

    Arrays can store any type of data like colors, shape coordinates, shape sizes or shape types. See lesson 8.3.5 for an example. Make a note in the scenario README.TXT file to which class(es) you added an array so I can find it easily.

  6. Within your solo classes, call the getObjects() method of World and save the objects in a List variable.
  7. Use a for-each loop to effect changes on all the objects of your list in response to a user action such as a mouse click or keypress.

    For example, have every object turn, move, change color, change images, or change speeds in response to an event such as a mouse click or key press. Make sure the scenario README.TXT explains how to activate the the extra action.

  8. Make sure that your solo classes compile as well as assisting in the guild effort as needed.

Guild Requirements

All guild members potentially receive the same credit for these specifications unless they have not contributed to the project in a significant way.

  1. As a guild decide which visualization to use for each key pressed.

    For example, choose visualizations by black or white keys, even or odd index numbers, positions on the piano keyboard, and so on.

  2. As a guild, make sure the entire project compiles and functions.
  3. The name of the class that controls the drawing of the imagery must be Visualizer (the same name we used in class) and the visualizer screen must appear above the piano keys.

    Please use the specified name as it makes for easier grading.

  4. Update the body of the public void visualize(Key k) method of the Visualizer class to invoke each guild member's visualization. Do NOT change the method name.

    Use if-statements to decide which visualizations to perform. Possible tests for the if-statements include:

    1. Call k.getX() to find the x-coordinate of the key that was pressed. See lesson 8.3.4 for an example. Each piano key is placed in a different location.
    2. Call k.getImage().getWidth() to find the width of the key that was pressed. See lesson 8.3.4 for an example. Black keys are narrower than white keys.
    3. Add a get-method to the key class, like we added getColor() in lesson 8.3.5 and Exercise 8.3, to test for a value of the Key object like key.

    Suggestion: have each guild member write the code to invoke their visualization.

  5. Update the README.TXT file for the scenario (Scenario Information) to:
    1. Provide all the project information like your guild name, project title and version or date like the following example.
    2. List all guild members and their visualization classes like the following example.
    3. List all guild member's visualizations, how to start them, and how to change effects based on user actions.
    Example README.TXT
    PROJECT TITLE: Piano Visualizer
    PURPOSE OF PROJECT: Show shapes while playing the piano.
    HOW TO START THIS PROJECT: Press run after compiling,
    AUTHORS: Your Guild Name
    USER INSTRUCTIONS: Use the keyboard or mouse to play the piano.
    Member Classes and visualization:
    -Ed Parrish: Leaf.java--leaves float, change when clicked with a mouse.
    -Emma Programmer: Triangle.java--triangles spin like a pinwheel when pressing white keys and stop spinning when not pressing keys
    -Justa Member: Rectangle.java--Sparkles that are split when pressing black keys.
    -Leeroy Jenkins: No classes contributed.
    Member classes with arrays and the data contained:
    -Ed Parrish array in Leaf.java for colors
    -Emma Programmer array in Triangle.java for spining speeds.
    -Justa Member: Rectangle.java array of colors for sparkle
    -Leeroy Jenkins: No code submitted.
    Instructions to produce visualizations:
    -Ed Parrish produces Leaves when black keys pressed.
    -Emma Programmer produces Triangles when white keys pressed.
    -Justa Member: Rectangle produces sparkles when two keys are pressed together.
    -Leeroy Jenkins: No code submitted so no visualization produced.
  6. Choose one person in your guild as the "submitter" who will submit the final project from which everyone is graded.

    The submitter ensures that all the parts are combined correctly, zips the folder and submits the project into the Q8 quest slot of Canvas as explained in the section of this document: Deliverables.

Crafting Extra Credit

Adding the following are worth extra credit points:

  1. Publish your scenario on the Greenfoot Gallery with the tag cabrillo-guild and include the URL in your README.TXT file. (1 point for each guild member)

Make certain that your README.TXT file describes any extra credit attempted.

Grading Criteria

The instructor will evaluate your assignment using the following criteria. Each criteria represents a specific achievement of your assignment and has a scoring guide. The scoring guide explains the possible scores you can receive.

Some scoring guides have a list of indicators. These indicators are a sign of meeting, or a symptom of not meeting, the specific criterion. Note that a single indicator may not always be reliable or appropriate in a given context. However, as a group, they show the condition of meeting the criterion.

For information on grading policies, including interpretation of scores, see the syllabus page.

Solo Actor Evaluation

  • 10: Solo actor classes added to scenario
  • 2: Solo actor properly documented in the file comment block.

    The @author field contains both your first and last name, and only your name, in the file comment block of your chosen actor

  • -4: Solo classes do not produce imagery or other special visual effects.
  • -3: Missing call to GreenfootImage draw- or fill- method.
  • -1: Missing an overloaded constructor.
  • -3: Missing an array declaration and use
  • -1: Missing call to getObjects().
  • -1: Missing List variable.
  • -2: Missing for-each loop.
  • -12: One of your solo classes does not compile.

Guild XP Evaluation

  • 3: Project compiles with no errors and scenario works well with no observed glitches.
  • 2: Visualizer class present and displays screen above the piano keys.
  • 1: README.TXT file has the usual LABELS and the label fields are filled out.
  • 2: README.TXT lists all guild members and their classes and visualization produced, or "None" recorded if no contribution
  • 2: All guild member names are listed in the README.TXT with their solo Actors, or "No classes contributed" if the guild member did not add a solo Actor class to the project.
  • 1: README.TXT lists all guild members and their solo classes containing an array.
  • 1: README.TXT lists all guild members and the actions needed to produce their visualization.
  • 2: All member visualizations display when specified action is taken.
  • -12: Project does not compile.
  • -12: No reported contribution to the project.

Maximum Score: 24, plus extra credit


Follow these instructions carefully and exactly to turn in your quest (assignment) to Canvas and maximize your XP:

  1. Choose one person in your guild as the "submitter" who will submit the final project from which everyone is graded.
  2. The submitter ensures that all the parts are combined correctly, zips the folder and submits the project to Canvas.

    Do NOT submit solo versions of the project as the last submission by anyone in the guild will be counted as the final version for the entire guild.

  3. As a guild or guild submitter, submit the project following these steps:
    1. Create a folder named "project" (no extra characters) and place the guild's final Scenario Mashup Project into this folder.
    2. Create a zip file containing the project and submit the zip file to the Q8: Visualize this! slot of Canvas.
Last Updated: April 05 2020 @18:12:50