PW-P5.md

Day 1

Start with Cassie

• Ahead of time - download p5.js desktop editor
• Set expectations - learn to code through making interactive and generative art
• What is p5.js? What does the .js mean? Show some examples interactive, generative art. (http://leslieruckman.tumblr.com/)
• What is code? Briefly mention that code is a series of instructions, executed sequentially.
• Stay within setup(). Talk about how to draw simple shapes, coordinate system, stroke, fill, background
  • exercise - draw three shapes, snowman
• Talk about draw(). Discuss frames, 30 f/s minimum, etc. Throw in the word loop.
  • code inside is getting executed over and over again, but at a fixed rate, every 1/60th of a second
• Talk about mouseX and mouseY. (ellipse drawing)
  • pose question - how do you clear the ellipse every frame
• Random() (randomly draw ellipse)
• Events (mouseClicked - draw ellipse at mouse position)
• Talk about variables and data types - boolean, string, number, printing (Emily from this point on)
  • some exercise
• if statements, check mouse position, check which key is pressed
• introduce variable for position and speed
  • how to bounce back?? (width and height)
• Number of bounces - intoduce strings and another number

Day 2

• While - explain it like for loop but less compact (while x < width)

• for loop - same but more compact

• Talk about map() - color gradient

• images (loadImage)

• push(), pop(), rotate()

  • choose three images, rotate different amounts

• Reference - constrain (keep image or ellipse or whatever within bounds)

• p5.sound - load a sound, introduce idea of libaries (play sound on bounce or on click)

• Make a one button musical instrument

• Make floating bubbles

• Make something run away from the mouse

• Continued learning - coding rainbow, kadenze class, nature of code, tumblr/twitter and looking at their code, getting started with p5.js book, art + tech community organizations, javascript the good parts