Introducing 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!