Movement and animation

Lecture slides

Bit more about variables

Often for animating things we need to store some values in variables. Variables were introduced in the last class but the video below recaps the key concepts and introduces a new topic: variable scope.

Animations with trigonometric functions

The video below shows how to use the sin() function for animations.

Additionally to using sin() you can also try out noise() for introducing less regular but still smooth movement. Note that noise()returns a number between 0 and 1. Link to reference. Noise function will be covered more in depth later on this course.

Coordinate transformations

For rotating, scaling and moving things around we can move the coordinate system around to make things a bit easier. The video below shows how and here's also a great resource: https://genekogan.com/code/p5js-transformations/.

Assignment

Use the concepts above for creating an animated composition in p5. You can use the composition created in the previous class as your starting point.