Tech demos: variable fps drawing

Published 2023-06-12



Experiments in variable fps animation to simulate drawing / handwriting.

Drawing instructions are encoded and stored as a string in the lua code. Two different encodings ISIDORE and ROXANA were implemented, each with corresponding function used to decode and execute the drawing instructions.

TIP: toggle performance monitor using Ctrl+P to view fps

When using animation to simulate something being hand-drawn or handwritten, ability to vary the speed of the "pen stroke" can help make the animation look more realistic and convincing, e.g. faster for straight lines, and slower for tight turns and loops.

With this undocumented function:

The wiki seems to suggest that 15, 30, or 60 are the only acceptable values, but with a bit of experimentation I found that arbitrary values do work.

There are a few caveats:

Before doing anything fancy, it is important to note that on a raster display, animating a line or curve as it is extended pixel-by-pixel will cause the perceived speed of drawing to vary depending on direction. We will need to compensate for this when setting the speed at which a "pen stroke" is animated.

(If you understand why, feel free to skip ahead. Otherwise, open hidden block for explanation.)

When drawing curves rather than straight lines this phenomenon can cause the perception of variable speed over the course of the animation. Here is a circle outline that is noticeably slower at the top, bottom and sides. It takes about 4×d/sqrt(2)≈2.828×d frames to complete -- significantly faster than the theoretical circumference pi×d:

One approach to counter this while staying at constant fps would be to interpolate distance traveled by the "pen" over time. For instance, drawing a 45° diagonal line would add a pixel in only about 71% of frames (≈1/sqrt(2)). Applying this principle to draw the same circle outline as before produces a more realistic result:

A comparison with both overlaid shows the naive version clearly pulling ahead in the diagonals:

It is important to keep this phenomenon in mind when setting the speed at which a "pen stroke" is animated.

Bonus content for reading the explanation: circle drawn with variable fps