# teaching machines

## Lissajous

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()
color = :red
0 -> t
center = [-5, 0]
t -> 200
center = [5, 0]

var twovilleDiv = jQuery('#twoville_slide');
twovilleDiv.closest('pre').replaceWith(twovilleDiv);
document.getElementById('twoville_form_slide').submit();



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)]
color = :red

var twovilleDiv = jQuery('#twoville_lissajous');
twovilleDiv.closest('pre').replaceWith(twovilleDiv);
document.getElementById('twoville_form_lissajous').submit();



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