Into to P5 - Part 2

Animations, Interactivity

Process

Refresher on trigonometry and how to use it in the setting of an animation.

1 Animations with P5

A first look at making interactive sketches with mouse and keyboard inputs

2 Interactive Sketches and Inputs

What we covered last time

0 Recap

Flow/Structure of a P5 Program
Drawing Functions
Circle Packing Sketch

Recap

This notion might be important when teaching the students, there's three ways to declare variables in JavaScript:

var - declared variables exist in the function they were created in
let - declared variables only exist in the block they were created in
const - once a const variable is assigned a value, it can't be changed later on

Quick Note about Variable Declarations and Scope

Example

if(true){
    let x = 1
    console.log(x)   
 }
 
 console.log(x)

Refresher on Trigonometry
Rotating around a Circle
Example I - Parametric Shapes
Example II - Lava Lamp

Animated Sketches

Trigonometry is super useful when we want to place things along the circumference of a circle - we don't actually need to know the math or anything, just think about it intuitively. It's a very important tool in creative coding!

For example, if we want to draw a circle of points on the canvas, how would we do it? Compute point coordinate with cos() and sin()

Trigonometry Refresher 1

Trigonometry Refresher 2

rad = 100
angle = PI

let x = 200 + rad * cos(angle)
let y = 200 + rad * sin(angle)

strokeWeight(5)
stroke(255,0,0)
point(x, y)

Next: How do we animate this?

The easiest way to think about this is that we're converting from cartesian to polar coordinates.

Input: any number, automatically mapped to a [0, 2PI] range
Output: number in the range [-1, 1]
Converts a linear motion into an oscillating motion in the context of animation.

Properties of sin() and cos()

We need a counter to increment the animation and redraw it:

Manual Increment Counter
frame count + frame rate
+ specific loop length

Animated Rotation

Instead of a simple rotation, we can modify the rotation parameters and modulate them to obtain interesting shapes.

Example I - Parametric Shapes

Example II - Oscillating Lava Lamp

Conversion from polar to cartesian coordinates
Placement around the circumference of a circle
Parametric Shapes
Conversion of a linear motion into an oscillating motion
Used for Modulation
Other sorts of interesting illusions

Conclusion

Detecting Mouse and Keyboard Inputs
Example I - Drawing without resetting the Canvas
Example II - Cursor Effects