Week 1 Intro

• JavaScript Intro
• Intro to p5
• Create an account for the p5 editor
• Assignment 1: Recreate an artwork
  • Choose an artwork from one of the artists in the list
  • 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 and post on Open Lab
  • You can suggest an image if you want to use something else
  • Artists
    • Wassily Kandinksy
    • Julio Le Parc
    • Kazimir Malevich
    • Agnes Martin
    • Carmen Herrera

Project 1 Self Portrait

• Over the next three weeks you will make a self portrait, starting with a simple drawing and ending with an interactive artwork using variables.
• One version due each week. The three versions include a hard coded drawing, a static drawing with variables, an interactive version.

Week 2 Shape & Color

• Shapes and Functions
• Color Functions and Values
• Adobe Color Wheel
• Assignment 2: Self Portrait
  • Draw a self portrait in a p5 sketch
  • Use the shape and color functions
  • Add something unique to you
  • Doesn’t necessarily have to have a face/body, could be abstract

Week 3 Variables

• JavaScript statements & operators
• Variables
• JavaScript debugging
• Debugging exercise
  • Duplicate this p5 sketch
  • Solve the bugs
  • Submit the link to your new sketch
  • Finished version should look like this image
• Assignment 3: Self Portrait with Variables
  • Use variables for the x and y position of the self portrait
  • The entire portrait should move when x and y are changed
  • Optional: Add variables for size or color

Week 4 Interaction 1

• System variables
• Interaction
• Assignment 4: Interactive Self Portrait
  • Choose part of your self portrait to animate with interaction
    • size, position or color, or a combination
  • Use the map function at least once
  • Add instructions for the user in the HTML using a paragraph tag

Project 2 Meme/Logo

• The next three weeks will be dedicated to the second project. You have a choice to create a logo for youself or a fictional client or to make a “meme”, meaning a humorous combination of image and text (must be appropriate for class).
• This project will also have three versions: rough draft, simple interaction, and final animation.

Week 5 Text & Image

• Text
• Image
• Code Academy: Variables
• Assignment 5: Meme/Logo
  • Rough draft of logo or meme
  • Use at least two variables

Week 6 Logic

• Conditional logic
• Drawing with logic
• Code Academy: Control Flow
• Assignment 6: Interactive Meme/Logo
  • Use interactivity to update the project
  • Use conditional statements to control how the projects changes
  • Change parameters for the shape, color, image and/or text functions

Week 7 Animation

• Animation
• Transformation
• Assignment 7: Animation
  • Add animation to the Meme/Logo design
  • Choose what type of animation to use
    • One from first category: size, position or color
    • One from second category: translate, rotate, shear or scale
• Inspiration
  • Animated name logos

Project 3 Pattern Generator

• This project introduces using loops and a user interface that allows users to generate a pattern.
• That pattern could applied to different themes, like a product design, website background, or game setting.

Week 8 Loop

• Loop
• Random
• In class: Code academy: loops
• Assignment 8: Variations
  • Using a loop and random, create several varations of a drawing
  • You could use your self portrait, a series of windows on a building, an abstract pattern or any pattern you want to create
  • Document three variations of the pattern

Week 9 Functions

• Functions
• DOM Elements
• Assignment 9: User Interface
  • Add buttons to save and regenerate your pattern from Assignment 8
  • Style the buttons using CSS
  • Add a custom function for drawing the pattern elements

Week 10 Pattern

• Nested Loop
• Generating patterns
• Assignment 10: Generated Pattern
  • Using a nested for loop, create a pattern
  • Use randomness and variation
  • Use user interface components for use to regenerate and save pattern

Project 4 Sound Sampler

• This project introduces adding sound files to a p5 project.
• We will combine interactivity and sound to create interactive samplers.

Week 11 Keyboard + Sound

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

Week 12 Interaction 2

• Interaction 2

Final Proposal

• Presentation sketch
• Choose a previous project to elaborate on or propose something new, hybrid
• How will user interact with sketch?
• What type of graphics will be used?

Final Project

• p5 sketch
• User interaction (with sketch variables or DOM elements or both)
• At least one external file (image or sound)
• Use variables
• Use at least one example of logic (if statement)
• Use at least one of loop or function