Please enable JavaScript to use CodeHS

Digital Art with p5.js

Animation

Students learn techniques to turn their static sketches into animations. Students learn how to change the value of variables to animate the position, color, and transformation of shapes.

Lessons

2.1 The Draw Loop

  • The Draw Loop
  • A Brief History of Animation
  • Frame Rate
  • No Loop
  • Frame Count

2.2 Color Transitions

  • Animated Color Transitions
  • Color Gradient
  • Grayscale Gradient
  • Grayscale to Color
  • Color to Grayscale

2.3 Shape Transformations

  • Shape Transformations
  • Translation
  • Animated Translation
  • Rotation
  • Animated Rotation
  • +2 more

2.4 Direction

  • Direction
  • Up and Down
  • Left and Right
  • Diagonal

2.5 Project: Animate a Song

  • Project: Animate a Song

Courses that include this module