Week 6

Categorical Representations & Conditional Logic

In Class

• Presentation
  • Jay on Oliver Byrne
• Right Twice a Day
  • Code-based clocks crit
• Programming Workshop
  • Conditions & Boolean logic
    • if
    • if → else
    • if → else if → else
    • boolean tests
  • JavaScript operators useful for:
    • Comparison
    • Logic

Exercise

• Duplicate the clock template and create a representation of the current hour using if and else to switch between 12 unique representations
  • To create shapes more complex than rectangles and ellipses, try using some of these P5 functions:
    • beginShape & endShape
    • vertex
    • quadraticVertex
    • bezierVertex
  • You can also use different emojis and the text() command
• Add another set of if/else switches to represent the current min in 15-minute chunks
• Add one more if/else that changes something the style of the visualization based on the time of day (day vs night, awake vs sleeping, working vs eating vs resting vs watching tv vs…)
  • Good choices for this include changing colors used for the symbols, altering their positions using transform(), or changing sizes using scale()
  • push & pop also come in handy to limit the scope of these changes

Assignment

• Right Twice a Day
  • Complete at least three visualizations of the current time using if and else to interpret different time components categorically
  • Rather than representing each minute, hour, etc. proportionally, group them into meaningful ranges that are drawn differently
    • For instance, you could treat daytime hours differently from nighttime hours, weekends different from weekdays, or waxing moons different from waning
    • Explain the ranges you’re representing in a comment at the beginning of your code
  • Choose at least three components of the current time or date
    • You may continue working with hour, min, and sec, or you can expand to longer-term values like weekday, day, month, moon, season, etc.
  • Start by duplicating the Project Template three times and naming them Clock 4, Clock 5, and Clock 6. Once you’ve completed each sketch, rename the project with a more descriptive suffix (e.g., Clock 4: Zodiac Color Code)
    • Due date: 10/12 by 3 p.m. EDT
    • Format: Three P5 Editor-based sketches
    • Submit: Editor links via this form