teaching machines

Lissajous

May 7, 2019 by Chris Johnson. Filed under public, twoville.

Twoville serves two purposes:

• to create SVG images that can be used as input to laser and vinyl cutters
• to create animations

To support the second of these, I have been using time blocks to define geometric properties at particular keyframes, and then letting the animation system interpolate between the keyframes. Like this:

  

    with viewport
  center = [0, 0]
  size = [10, 3]
  
with time
  start = 0
  stop = 200

with circle()
  radius = 0.1
  color = :red
  0 -> t
    center = [-5, 0]
  t -> 200
    center = [5, 0]

    
    
    
  
  
    

    with viewport
  center = [0, 0]
  size = [10, 3]
  
with time
  start = 0
  stop = 200

with circle()
  radius = 0.1
  color = :red
  0 -> t
    center = [-5, 0]
  t -> 200
    center = [5, 0]

  
  expand

Here we pin the center of the circle at two keyframes: as we leave time 0 and as we approach time 200.

Keyframe animation is only one approach to animation, however. Sometimes we want more control than interpolation can give us. For this reason, I have added support for raw time expressions. One can reference t directly in expressions to produce a time-sensitive property:

  

    with viewport
  center = [0, 0]
  size = [10, 3]
  
with time
  start = 0
  stop = 359

with circle()
  center = [4 * sin(t), sin(2 * t)]
  radius = 0.1
  color = :red

    
    
    
  
  
    

    with viewport
  center = [0, 0]
  size = [10, 3]
  
with time
  start = 0
  stop = 359

with circle()
  center = [4 * sin(t), sin(2 * t)]
  radius = 0.1
  color = :red

  
  expand

The circle follows a Lissajous curve, whose constant changing curvature evades description by keyframes.