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

Interactive Sketches

Part 2

By Ahmad Moussa

Made with Slides.com

Part 2

  • 51

More from Ahmad Moussa