Module 01 : Drawing Shapes

• Topics
• Resources
• In-Class Activities
• Sample Quiz Question

Topics

• The Coordinate System
• Drawing Shapes
• Stroke properties

New processing syntax:

• size (sets the size of the overall sketch window)
• rect
• ellipse (which includes circles)
• line

• arc
• point
• triangle
• quad
• strokeWeight
• strokeCap
• strokeJoin
• rectMode
• ellipseMode

Resources

• pp. 13-23 of Ch. 3 of the Reas/Fry book

• processing.org tutorial on Coordinate System and Shapes

• My own (very brief) notes

• Watch Daniel Shiffman Video 1.0, Drawing With Pixels (14 minutes)
  (available at learningprocessing.com and YouTube)

• Watch Daniel Shiffman Video 2.0, How to Use Processing (14 minutes)
  (available at learningprocessing.com and YouTube)

In-Class Activities

Try to recreate the geometry of the following sketches. The additional guidelines shown in my images designate 100-pixel increments.

Mickey (spoiler: my code)
Uses: ellipse

Tree (spoiler: my code)
Uses: ellipse, rectangle

House (spoiler: my code)
Uses: rectangle, triangle, point, strokeWeight

Snowman1 (spoiler: my code)
Uses: ellipse

Snowman2 (spoiler: my code)
Uses: ellipse

Propeller (spoiler: my code)
Full Disclosure: originally intended to make a flower
Uses: ellipses (that aren't circles)

Peace (spoiler: my code)
Uses: ellipse, line, strokeWeight

Pacman (spoiler: my code)
Uses: arc, ellipse

Yield Sign (spoiler: my code)
Uses: triangle, strokeWeight, strokeJoin, (and a bit of triginometry)

Fake Cube (spoiler: my code)
Uses: rect, quad

Tophat (spoiler: my code)
Uses: arc, ellipse, rect, point

Sample Quiz Question

Although there are a lot of new commands discussed in the various resources for this module, we will limit the quiz to proper use of the commands size, rect, ellipse, line, and perhaps strokeWeight.

Question: Assuming that the dashed lines designate 100-pixel intervals, give a Processing sketch that generates the following image. (Your sketch is not expected to generate the actual dashed guidelines.)

(Spoiler: answer)