# teaching machines

## Introducing Twoville

February 24, 2018 by . Filed under public, twoville.

Some students and I are building a programming language for generating animated SVG images. Rather, each of us is building our own language, because each of us wanted 100% of the learning experience. By the end of the semester, we’ll have four different takes on how to build such a language.

My take is called Twoville. Its most interesting feature are time blocks. To say that rectangle r should be at position (0, 0) as time t advances past 15 seconds, we write:

15 -> t
r.position = [0, 0]

Any statement in a time block has an effect only when the animation falls within the specified time interval.

We can also define the position as t approaches 30:

t -> 30
r.position = [100, 100]

With both ends nailed down, the Twoville runtime will interpolate between the two values when the animation is in the [15, 30] time interval.

Tonight, after the close of SIGCSE 2018 and while imprisoned in my hotel room by the Baltimore drizzle, I was able to achieve my first animation goal in the language: rotating one square around another. Behold.

Here’s the Twoville code that produced this animation:

# Defaults
sun = rectangle()
sun.rgb = [1, 0.5, 0]
sun.position = [200, 200]
sun.size = [100, 100]

earth = rectangle()
earth.rgb = [1, 0.5, 0]
earth.size = [100, 100]

# Keyframes
0 -> t -> 10
earth.position = [200, 100]
earth.pivot = [300, 200]
0 -> t
earth.rotation = 0
t -> 10
earth.rotation = 180

10 -> t -> 20
earth.position = [300, 200]
earth.pivot = [300, 300]
10 -> t
earth.rotation = 0
t -> 20
earth.rotation = 180

20 -> t -> 30
earth.position = [200, 300]
earth.pivot = [200, 300]
20 -> t
earth.rotation = 0
t -> 30
earth.rotation = 180

30 -> t -> 40
earth.position = [100, 200]
earth.pivot = [200, 200]
30 -> t
earth.rotation = 0
t -> 40
earth.rotation = 180

The language doesn’t have loops yet. Once it does, I’ll be able to remove some of the redundancy.

Happy 0th birthday, Twoville!