Schedule

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

Contents

Week 1: Intro ~ 1/29/2024

JavaScript Intro
Create an account for the p5 editor
Intro to p5
Assignment 1: 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

Shapes and Functions
Color Functions and Values
Adobe Color Wheel
Assignment 2: Self Portrait
- Draw a self portrait using p5
- Use shape and color functions
- Include something unique to you, which can include how you look but also things like interests or hobbies, or abstract expressions
- Make a screen shot of the image and a post on Open Lab with a link to the code

JavaScript statements & operators
Variables
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 Blackboard (no Open Lab post)
Assignment 3: Self Portrait with Variables
- Rewrite your self portrait using variables for the position (x,y) and size
- You can use the same design or create a new one
- The entire design should change when variables are changed
- Take a screen shot of the image and post on Open Lab with a link to the code

Text
Image
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

System variables
Interaction
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

Conditional logic
Drawing with logic
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

Animation
Transformation
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

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

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

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

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