class-04.md

Class 4

Project topic: Looping animations

🛠️ Strings

• The String object
• Practical uses
  • indexOf()
  • charAt()
  • substring()
  • trim()
  • match()
  • replace()
  • Live demo in REPL
• Fun uses
  • Typing effect
  • Random character effect
  • p5.Font textToPoints
• Text manipulation exercises

🛠️ Typography

• Custom fonts example
  • WEBGL example
• Kinetic typography artists inspo
• Kinetic typography examples by Cacheflowe
  • WTF?
  • What Whut Wat
  • Wobble
    • Quick demo
  • Drip
  • Wavy

🛠️ Images

• image()
  • Basic image
  • Advanced image
• get()
  • Re-drawing images
  • p5 video example
• copy()
  • marquee example
  • Example
• texture() w/vertex()
  • UV coordinates
  • UV coordinates 2
• Gradients w/vertex()
  • Fast background gradient
    • Alternate w/drawingContext
  • Radial gradient
• More exercises
  • https://creative-coding.decontextualize.com/media/
  • https://creative-coding.decontextualize.com/video/

🛠️ Looping Animations

• Example loops from Justin
• Time, according to p5js

📝 Homework

Read:

• Line by @wblut
  • Discusses OOP techniques around the concept of a line()
• Sketching with Math and Quasi Physics

Watch:

• Exploring Emergence by Andy Lomas
• CD Lecture: Kiel Mutschelknaus (Kinetic Typography concepts & tools)

Build a looping animation

• Make a seamless loop of some sort, starting with this example
• Some ideas
  • Scale something up and countdown
  • Cycle colors
  • Oscillate other properties of your graphics
  • Remap a looping number to do something less obviously-looping
  • Try to recreate a Bees & Bombs-style loop
• Inspiration loops
  • Bees & Bombs
  • Saskia Freeke
  • Cacheflowe
  • Sean Zellmer

📋 Review code

• Present your clocks