This page contains a weekly breakdown of the course topics, notes and assignments. All dates are Monday unless otherwise specified.
Contents
- 1 Week 1: Intro ~ 1/27/2025
- 2 Week 2: Color ~ 2/3/2025
- 3 Week 3: Debugging ~ 2/10/2025
- 4 Week 4: Text & Image ~ 2/18/2025 (Tuesday)
- 5 Week 5: Variables ~ 2/24/2025
- 6 Week 6: Logic ~ 3/3/2025
- 7 Week 7: Animation ~ 3/10/2025
- 8 Week 8: Loop ~ 3/17/2025
- 9 Week 9: Functions ~ 3/24/2025
- 10 Week 10: Pattern ~ 4/7/2025
- 11 Week 11: Keyboard + Sound ~ 4/21/2025
- 12 Week 12: Interaction ~ 4/28/2025
- 13 Week 13 ~ Week 15: Final project
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:
- 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)
- 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
- 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