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

• Shapes and Functions
• Color Functions and Values
• Adobe Color Wheel
• Videos: JavaScript function syntax, p5 color values, p5 color modes
• Examples: JavaScript function syntax, p5 color values, p5 color modes
• Assignment 2: Color
  • Create a color study like these Josef Albers examples:
    • Josef Albers: The Magic of Color | ART+COLOR
    • Josef Albers Paintings
  • Use simple shapes
  • Make a screen shot of the image and a post on Open Lab with a link to the code

Week 3: Debugging ~ 2/10/2025

• JavaScript statements & operators
• JavaScript debugging
• Debugging exercise
  • Duplicate the debugging exercise sketch and save a copy
  • Solve all of the bugs
  • Finished version should look like this image
  • Submit the link to your new sketch on Brightspace

• 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)
    • Wassily Kandinksy
    • Julio Le Parc
    • Kazimir Malevich
    • Agnes Martin
    • Carmen Herrera
  • 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

• Conditional logic, video part 1, video part 2
• Drawing with logic, Interactive comic example video
• Assignment 6: Interactive comic
  • Use text and images or p5 designs to create a comic with 3-4 panels
  • Use interaction to advance the comic
  • Use an HTML paragraph to give the user instructions
  • Take screen shots of each panel and post on Open Lab with a link to the code

Week 7: Animation ~ 3/10/2025

• Animation, Bouncing DVD Logo video
• Transformation, video
• Assignment 7: Animation
  • Create a design in p5
  • Animate the size, position or color of the design
  • Take 3 screen shots with variations of the design and post on Open Lab with a link to the code

Week 8: Loop ~ 3/17/2025

• Loop, video
• Random, video
• 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, video
• DOM Elements, video
• 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, video
• Generating patterns, video
• 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, video
• Sound, video
• 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, video
• 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