Assignment 1 - Shapes and Transformations


Due 11.59pm, Sunday, May 25th.

  • You are graded on the completeness, neatness, comments, and visual style of your final assignment
  • All assignments are individual
  • ZIP SKETCH FOLDERS (not individual files) INTO ONE FILE
  • Each part of this assignment should be a separate sketch
  • Submit to WebCT before the deadline

There is no late policy for this course!

If you do not complete the assignment by the deadline, you will receive 0
You "may" be excused pending discussion with your TA

Part 1 - Drawing Directly

Draw a scene using the shapes covered in lectures and labs.
Place this code inside the setup method.

  • A location (city, street, ocean, mountains, island, jungle)
  • A pattern (shapes in grid layout, shapes inside shapes)


Practice each shape type and have some variation in position, size, shape.

At least 4:

  • Lines
  • Rectangles
  • Ellipses
  • Triangles
  • Quads
  • Arcs
  • Curves

Strokes and Fills:

  • 8 different fills
  • 4 different strokes
  • 4 different stroke widths
  • Use both RGB and HSB color modes

Part 2 - Drawing with Transformations

Draw a character for your scene.
Place this code inside the draw method and clear the background.

  • A spaceship
  • An animal
  • A person


  • Centered around (0, 0) like this
  • Use at least 4 different shapes
  • Use at least 16 shapes in total
  • Your character should no more than 200 pixels wide or tall


  • Translate your character to the center of the screen
  • Rotate your character 45 degrees to the left and 45 degrees to the right based on the mouseX position
  • Scale your character based on the mouseY position (suggested values: 0.5 - 2)
  • Your mouseX and mouseY interaction must use the full width and height of the window

Part 3 - Drawing Methods

New sketch (using scene from Part 1 and character from Part 2).
Move your scene and character code inside their own methods.
Call these methods from the draw method.


  • Clear the background
  • Call the scene method
  • Provide x, y, rotation, and scale parameters for your character method
  • Call your character method at least 8 times with different positions, rotations, and scalings
  • At least 2 calls to the character method must use mouseX and mouseY, respectively (transformation should be different from part 2).

Tips and Tricks

  • Be creative with your character! You will be reusing these characters in future assignments
  • Style counts! Take time to design your scene and character
  • Start now! Use Part 1 to practice the shapes learned in the lectures