Schedule

This page contains a weekly breakdown of the course topics, notes and assignments. All dates are Monday unless otherwise specified.

Week 1: Intro ~ 1/27/2025

  • JavaScript Intro
  • Create an account for the p5 editor
  • Intro to p5
  • Videos: p5 intro, p5 shapes
  • Examples: p5 intro, p5 shapes
  • Assignment 1: Shape
    • Use p5 to create a composition with only shapes (no colors)
    • Make an abstract representation of an emotion, a place or an object
    • Save an image of the sketch make a post on Open Lab with a link to the code

Week 2: Color ~ 2/3/2025

Week 3: Debugging ~ 2/10/2025

  • Assignment 3: Recreate an artwork
    • Choose an artwork from one of the artists in the list (or propose an artwork from an artist you like)
    • Use JavaScript to recreate the artwork in p5
    • You can be creative – try to capture the idea or feeling of the work without necessarily recreating each shape and color exactly
    • Save an image of the sketch make a post on Open Lab with a link to the code
    • Demo

Week 4: Text & Image ~ 2/18/2025 (Tuesday)

  • Text, video
  • Image, video
  • Assignment 4: Meme/Logo
    • Make a meme or logo design using an image and text
    • Take a screen shot of the image and post on Open Lab with a link to the code

Week 5: Variables ~ 2/24/2025

  • System variables
  • Variables, video
  • Interaction, map function video
  • Assignment 5: Interactive design
    • Create a simple interactive design
    • The user should be able to vary the position, color or size of shapes in the design
    • Use an HTML paragraph to give the user instructions for interaction
    • Take 3 screen shots with variations of the design and post on Open Lab with a link to the code

Week 6: Logic ~ 3/3/2025

Week 7: Animation ~ 3/10/2025

Week 8: Loop ~ 3/17/2025

  • Loop
  • Random
  • Assignment 8: Windows
    • Draw the a grid of windows like the front of a city building
    • Each window should be at least 5 shapes
    • Use your apartment building or Windows of New York for inspiration
    • Take a screen shot of the design and post on Open Lab with a link to the code

Week 9: Functions ~ 3/24/2025

  • Functions
  • DOM Elements
  • Assignment 9: Generative landscape
    • Use a loop and random to generate a landscape with at least 3 elements (sky, trees, grass, mountains, buildings, clouds, etc)
    • Use a custom function for each component
    • Take 3 screen shots with variations of the design and post on Open Lab with a link to the code

Week 10: Pattern ~ 4/7/2025

  • Nested Loop
  • Generating patterns
  • Assignment 10: Generative pattern
    • Using a nested for loop, create a pattern
    • Use randomness and variation
    • Use user interface components for use to regenerate and save pattern
    • Take 3 screen shots with variations of the design and post on Open Lab with a link to the code

Week 11: Keyboard + Sound ~ 4/21/2025

  • Keyboard interaction
  • Sound
  • Assignment 11: Keyboard Sampler
    • Combine sounds with keyboard events to create a sound sampler
    • Use simple colors, shapes or images to reflect changes in sound

Week 12: Interaction ~ 4/28/2025

  • Interaction
  • Assignment 12: Final project proposal
    • Create an Open Lab post with a proposal for your final project
    • Options for final project
      • Elaborate on a previous class project
      • Combine multiple class projects into a hybrid
      • Create a new concept
      • View previous class project examples for inspiration
    • Proposal
      • Project title
      • Theme or premise for the project: What is the project about?
      • User interaction: How does the user interact with the project?
      • Description of visual design with examples: Does the project use images or p5 graphics? What is the general style or look? Include screen shots of examples from a prototype or previous project for reference

Week 13 ~ Week 15: Final project

  • Week 13 ~ 5/5/2025
    • Present final project proposal
    • Begin work on Final project
    • Final project requirements (check rubric on Brightspace)
      • The final project is a p5 sketch
      • The project is interactive
      • Includes at least 1 external media file (image or audio)
      • Instructions for the user in HTML page or part of p5 sketch
      • The code uses custom variables
      • The code has at least one example of: logic, loop, or custom function
      • The code uses comments consistently
      • Citations for any Creative Commons or Public Domain media, and/or code resources
  • Week 14 ~ 5/12/2025 ~ Final project workshop
  • Week 15 ~ 5/19/2025 ~ Present final projects, followed by optional workshop time