Module 02 : Colors

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

Topics

• 8-bit color representations (grayscale and RGB)
• Controlling colors in Processing with fill, noFill, stroke, noStroke commands
• Transparency with the "alpha" channel (RGBa representation)
• Custom shapes

New processing syntax:

• background
• fill
• noFill
• stroke
• noStroke

• beginShape
• endShape
• vertex
• curveVertex

Resources

• pp. 24-31 of Ch. 3 of the Reas/Fry book

• processing.org tutorial on Color

• My own (brief) notes

• Watch Daniel Shiffman Video 2.1, RGB Color (24 minutes)
  (available at learningprocessing.com and YouTube)
  Note: First 2:30 of video is helpful info about Processing, but not related to the theme of color.

• processing.org reference page for beginShape command, although we will not typically use the various optional arguments (e.g., POINTS, LINES, QUAD_STRIP)

In-Class Activities

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

Yield Sign (spoiler: my code)
Uses: stroke and strokeWeight

Unfilled Triangle (spoiler: my code)
Uses: noFill

Borderless Triangle (spoiler: my code)
Uses: noStroke

Warhol (spoiler: my code)
Uses: fill colors

Warhol2 (spoiler: my code)
Uses: fill colors

Warhol3 (spoiler: my code)
Uses: transparency

Colored Lines (spoiler: my code)
Uses: line, stroke, strokeWidth, transparency

Mastercard (spoiler: my code)
Uses: Clever combination of layering with transparency

Swiss (spoiler: my code)
Uses: beginShape/vertex/endShape

Pinky (spoiler: my code)
Uses: we combine half-circle (using arc) with custom body using beginShape

Pinky2 (spoiler: my code)
Uses: careful treatment of open stroke with the arc/shape

smile (spoiler: my code)
Uses: fill and stroke colors; ellipse and arc (and text command)

Although there is probably not time during class, if you need more challenges, try to recreate any of the following in Processing:

Size	Reference Image	My Attempt	My Code
400x300			code
232x217			code
174x203

Sample Quiz Question

The quiz will include color representation and control of colors. It will not include use of the beginShape and endShape mechanism.

Question: Assuming that the dashed lines designate 100-pixel intervals, give a Processing sketch that generates the following image.

(Spoiler: answer)