02_animation.md

Animation: Variables

The videos in this section were created using a different editor 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.

Video Tutorials: Basics

• setup(), draw(), and other events: mousePressed(), etc.
• Built-in variables
  • 2.1: Variables in p5.js (mouseX, mouseY)
• User defined variables
  • 2.2: Variables in p5.js (Make your own)
• The random() function
  • 2.5: random()
• The map() function
  • 2.4: map()
• Code Examples for Videos: 2.1-2.5

Tutorials: Transformations

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

Getting Started with p5.js book

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

More code examples

• random painting
• mouse controlled painting
• moving circle

Going Further

• clock -- Clock coding challenge video
• Tutorial: Recode Catalog by John Whitney
• Rainbow Paintbrush in p5.js by Kelly Lougheed