FSEM 131 Project 2

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, based on an art piece, as in Project 1, your composition tells a story or creates an atmosphere.

Plan and design a composition on paper: you must submit this plan on Moodle and bring it to each lecture thereafter.

Select and model your composition on a painting, artistic poster, fine-art photography, or picture(s) of a sculpture. Abstract/synthesize/simplify the work to be able to turn it to code. 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' pause or restart the animation. (It is a toggle pause = !pause;)
  Key press 's' save the frame in a .png file.
• A mouse interaction modifies an attribute of the scene.
• A conditional statement should be used. It can serve to create some visual or timing pattern or random effect.

In term of code style the following is required.

• The animation should look smooth: frame rate adequate and increment appropriate.
• The code should
  • be easy to follow/understand (blank lines help to separate features)
  • 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.

Once, you have fulfil the requirements above, you may

• 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

If I do not see your paper plan by the above deadline the penalty is 10% of this work grade.

Code submission, create a zip file

• named username_project2.zip and
• containing your Processing folder functionalComposition with inside it
  1. the program composition2.pde and
  2. the resulting picture username_result2.png.

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

For the final submission, upload the zip file on Moodle using the Project 2 link and in the comment box you should respond to the following questions.

1. Describe each animation you created: for each the variable update that changes which element of the scene.
2. Include key press you used: in addition to 'p' for pause and 's' for save frame.
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 anything extra? 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.)
   
   Thank you!