» Interpolants in Twoville

Interpolants in Twoville

October 4, 2019 by Chris Johnson. Filed under public, twoville.

Shapes in Twoville are animated across time by interpolating their properties between keyframes. Time is a first-class concept in the language, with assignment statements storing values across a timeline rather than in a static memory cell.

Here’s a rectangle that oscillates left and right using this keyframe-sensitive assignment syntax:


  
    with viewport
  corner = [-0.5, -0.5]
  size = [11, 1]
  
with time
  start = 0
  stop = 200

with rectangle()
  size = [1, ~]
  color = :red
  0 -> t
    center = [0, 0]
  t -> 100 -> t
    center = [10, 0]
  t -> 200
    center = [0, 0]

    
    
    
  
  
    
    with viewport
  corner = [-0.5, -0.5]
  size = [11, 1]
  
with time
  start = 0
  stop = 200

with rectangle()
  size = [1, ~]
  color = :red
  0 -> t
    center = [0, 0]
  t -> 100 -> t
    center = [10, 0]
  t -> 200
    center = [0, 0]

The animation above uses linear interpolation. The rectangle moves at a constant speed; there’s no acceleration. Linear interpolation is the vanilla of animation. To add feelings of inertia and anticipation, we use other interpolants. I added a few of these this week!


  
    with viewport
  corner = [-0.5, -1.5]
  size = [11, 13]
  
with time
  start = 0
  stop = 200

to animateBox(interpolant, y)
  with rectangle()
    size = [1, ~]
    color = :red
    0 -> t
      center = [0, y]
    t -> 100 -> t
      center = [10, y]
    t -> 200
      center = [0, y]
    0 -> t -> 100
      center.tween = interpolant
    100 -> t -> 200
      center.tween = interpolant
      
animateBox(:nearest, 0)
animateBox(:linear, 2)
animateBox(:quadraticInOut, 3)
animateBox(:cubicInOut, 4)
animateBox(:quarticInOut, 5)
animateBox(:quinticInOut, 6)
animateBox(:backInOut, 8)
animateBox(:sineInOut, 10)

    
    
    
  
  
    
    with viewport
  corner = [-0.5, -1.5]
  size = [11, 13]
  
with time
  start = 0
  stop = 200

to animateBox(interpolant, y)
  with rectangle()
    size = [1, ~]
    color = :red
    0 -> t
      center = [0, y]
    t -> 100 -> t
      center = [10, y]
    t -> 200
      center = [0, y]
    0 -> t -> 100
      center.tween = interpolant
    100 -> t -> 200
      center.tween = interpolant
      
animateBox(:nearest, 0)
animateBox(:linear, 2)
animateBox(:quadraticInOut, 3)
animateBox(:cubicInOut, 4)
animateBox(:quarticInOut, 5)
animateBox(:quinticInOut, 6)
animateBox(:backInOut, 8)
animateBox(:sineInOut, 10)

Since interpolation describes how to blend between two keyframes, the interpolant or tween function must be set using the doubly-bound start -> t -> stop time interval.