CS 100 Assignment 3

Composition: functions & interaction

Use the Processing language/environment to develop a program that creates a composition. The composition should include an animation and keyboard/mouse interactions; the implementation should use functions.
Design a composition that

• use functions to draw objects:
  • Group the shapes and graphical attributes that define an object in a function.
  • Use parameters to make the function drawing flexible: position, size, color, extra feature.
  • Call/invoke those functions to create individual objects by varying the parameter value.
• has an animation
• has a mouse mediated interaction and
• is visually pleasing as in A1:
  compose a scene that tells a story or creates an atmosphere.

Plan and design a composition on paper: you must submit this plan at the start of the lab on Monday April 21st.

I encourage you to model your composition on a painting, a poster or a photograph. Simplify it, but not too much. Cite the work of art or image that inspired you in your source code header as a comment.

Your Processing program translates this plan to code.

Requirements

Your program should have the following properties.

• The image should be at least 500 pixels by 500 pixels. You may make your image bigger, but not smaller.
• In addition to the setup() and draw() functions you should define, implement and call at least three functions, each of which responsible to draw a particular object.
  • At least two of the functions should have parameters.
  • The parameters should be varied in their effects. For example, they could vary location, shape, size or aspect ratio.
  • Both functions must be called at least twice.
• An explicit loop should be used in the code to repeatedly draw some objects or background elements.
• An animation changes the image frame. For example, the animation may
  • move the position of an object or
  • continuously change the color of an object.
  Key press 'p' pauses the animation. Another key press restarts the animation.
• A mouse interaction modifies an attribute of the scene.
• A conditional statement should reinitialize the animation once it has ended (after out of range).

In term of code style the following is required.

• The geometry should be drawn with smooth edges.
• The animation should look smooth: frame rate adequate and increment appropriate.
• The code should
  • be indented and commented, including a header that describes the program and names the author, and a comment above each loop and function describing the code block
  • name its variables and functions informatively.

For extra credits

• add multiple animations and/or
• complex mouse interactions (use mouseX, mouseY, pmouseX, pmouseY).

20% of the evaluation is based on the quality and complexity of the composition created by your code.

Submission

Create a zip file

• named username_composition3.zip and
• containing your Processing folder functionalComposition with inside it
  1. the program composition3.pde and
  2. the resulting picture username_result3.png.
     Use the function call
     save("username_result3.png");
     as the last line of your main drawing function.
• If you did not bring your plan on April 21st you have to include a picture of it in your zip file.
  If I do not see your plan by the assignment deadline the penalty is 10% of this work grade.
  

You should replace username with yours (mine is efourque).

Upload the zip file on Moodle using the Assignment 3 link and in the comment box you should respond to the following three questions.

1. Describe each animation you created: for each the variable update that changes which element of the scene.
2. Include which key press restarts the animation: a particular key or any (other than 'p').
3. Describe the mouse interaction you implemented: how does it change the scene.
4. Are all the requirements completed? If no, list the missing ones.
5. Did you do extra feature(s)? If yes, give short description(s).
6. Are you giving me the permission to post your png picture on the course gallery?
   If yes, how do you want your name and the picture title to appear.
   (Blanks --anonymous/untitled-- are possible choices.)