Programming for Interactive Digital Arts
CS 2, Fall 2023

HW 1, Due Mon, Apr 18

The goal of this homework is to synthesize the techniques you've learned so far, in order to do something fun of your own design. Your sketch should have the following features.

  1. [30 pts] It shows a scene including the following elements:
    • At least ten objects, including an ellipse, a rect, and a shape (i.e., using beginShape(), etc.)
    • At least four colors, including background, stroke, and fill; and at least one use of transparency to see through an object
    Comment your code to describe the objects, the color choices, and the use of transparency.
  2. [35 pts] The scene reacts to the position of the mouse:
    • The x and y coordinates control at least two different aspects of the scene (e.g., size of one object and color of another).
    • There is a mouse-over; an object changes when the mouse is inside it.
    Comment your code to describe the reactions and how they are done.
  3. [35 pts] The scene responds to mouse presses, including the following:
    • While the mouse is held down, something changes about the scene (e.g., something is temporarily revealed, or a color or a size varies). This may be for the object that the mouse is in, or just in general.
    • Each time the mouse is pressed inside an object, the state of the object is changed (e.g., a light is turned on or off).
    Comment your code to describe the responses and how they are done.

The notes and text provide examples of these various techniques, but you should develop a coherent sketch of your own design, and not just throw the examples together. That is, your sketch will be graded both on how well you have demonstrated your understanding of the techniques, and how well you can make a new coherent design.

Use comments and indentation to make your code clear and comprehensible for another human reader (i.e., both you and your grader). Your sketch will be graded on its understandability, in addition to correctness and design.

As always, turn in the zipfile on Canvas, as HW 1 in the Assignments section. In the field where you can type in some information, please tell me roughly how long this assignment took, and if there were any particular difficulties.

Grading Scheme


Part 1 Design: Use of Shapes and Colors[30]
* Has at Least 10 different objects make a coherent design [10]
 * One has an ellipse or circle
 * One has a rectangle or square
 * One has a "shape" other than the above
 * Has at least 4 colors, arranged using a logical color scheme [15]
 * Has background color
 * Has a complementary stroke color
 * Has a complementary fill color
 * At least one element of the scene Uses transparency
* Uses comments in code about design elements, color, and transparency [5]

Part 2 Interactions Mouse Movement[35]
* At least 2 different parts of the scene controlled by mouse x and mouse y coordinates [20]
* An object changes (reacts) when mouse is moved inside it [10]
* Has commenting about mouse reactions [5]

Part 3 State Changes Mouse Clicks[35]
* Something changes in response to mouse button held down continuously [15]
* When mouse pressed once, an object in the scene changes state [15]
* commenting abut mouse presses [5]