02_animation.md

Animation: Variables

The videos in this section were created ~2 years ago. They use different editors for p5.js. All of the concepts should still apply, however, there are some minor changes. Most notably in JavaScript let is now the preferred way to declare a variable over var. If you would like to learn more about this you can watch this video about let vs var.

Tutorials: Basics

• setup(), draw(), and other events: mousePressed(), etc.
• Built-in variables
  • video 2.1: Variables in p5.js (mouseX, mouseY)
• User defined variables
  • video 2.2: Variables in p5.js (Make your own)
• The random() function
  • video 2.5: random()
  • Rainbow Paintbrush in p5.js by Kelly Lougheed
• The map() function
  • video 2.4: map()

Tutorials: Transformations

• video 9.1: translate(), rotate(), push(), pop()
• video 9.2: scale()
• video 9.3: More on transformations

p5.js editor examples

• random painting
• mouse controlled painting
• moving circle
• clock -- Clock coding challenge video

Getting Started with p5.js book

• Chapters 4 through Ex.4.5, 8 through Ex. 8.9
• Going further: Chapters 6 (Transformations) and 8.10-8.15 (More complex motion)
• Getting Started with p5.js book | Ebook (free with NYU Library login) | Code