Recitation 5: Processing Basics

For today’s exercise, you will be working individually to draw an image in Processing based on a photograph that inspires you.

Step 1: Choose your motif

To complete this exercise, you will need to select a photograph image as a motif. You can take this image now, but more likely you’ll be selecting an existing photograph from your album. The motif of your image is up to you – but try to select an image that has an aesthetic quality (e.g. in light/shadow, composition, colors), and also a number of geometric features, since Processing is well-equipped to render those.

Step 2: Draw your image on paper

Use the photograph as a starting point, or inspiration, to draw a new image on paper. This won’t be purely reproduction of the photograph: you might want to omit certain features, simplify/abstract elements so that you can form them out of the drawing functions in Processing we covered, rearrange others, etc.

You should use graph paper for your sketch so that you can easily determine the positions of the elements if needed. Do this before you begin coding. You must include a photo of your hand-drawn graph paper in your documentation.

Step 3: Draw your image with code

Start a new sketch in Processing and build the image using code, following your paper sketch. Your canvas size should be at least 600 x 600 pixels. Start out with the following structure:

As you work on it, using the functions and methods covered in class, you can modify shapes and adjust colors to enhance your design further.

Here a list of some of the available drawing functions in Processing for you to use:

• • • point()
    • line()
    • arc()
    • ellipse()
    • rect(), rectMode()
    • triangle(), quad()
    • beginShape(), vertex(), bezierVertex(), endShape()

• • • stroke(), noStroke()
    • fill(), noFill()
    • color()
    • colorMode()
  • • size()

For other functions and questions, please review the Processing tutorials page and the Processing reference.

[Optional] Step 4: Going beyond

If you finish your drawing early and want to challenge yourself, consider tackling one or more of the following options:

• • • • • • (a) Select an element in your composition and animate its position using code. (You would change a coordinate for a global variable, whose value you modify inside the draw function – so that every time through draw, the position will be slightly different.)
          • (a+) Use a conditional to make the element re-appear once it has gone out of the frame.
          • (b) Select an element of your composition and give it some controlled degree of randomness – e.g. in its position, size, or exact color. (You would introduce global variables to hold these values, and use the random() function inside setup to pick randomized numbers – thus producing a slightly different image every time the program runs.)
          • (c) Modify the colors in your drawing to use a carefully chosen color palette, which amplifies the atmosphere of the situation your image depicts, rather than using natural colors. (consider e.g. Bauhaus School of Arts, or Edward Hopper for inspiration).

Documentation

Document your work on your blog. Start by uploading the image you chose, and add a description of why you chose this image. Then, discuss what and how you wanted to draw it in Processing, and your method of achieving that goal. Consider how your final creation is linked to photograph and paper drawing – and in what ways it is similar and different. Don’t forget to upload the sketch you made on paper. Do you think that drawing in Processing was a good means of realizing your design? Please make sure to post your code and a screenshot of your final sketch in addition to the information above.

You should copy your code as HTML and insert it in your blog post instead of taking a screenshot. Ask for help if you don’t know how to do this.

Additional references:

• • Computer Graphics and Arts (1976 – 1978)
  • Bauhaus School of Arts
  • Victor Vasarely
  • Osamu Sato
  • Sol Lewitt
  • Vera Molnar