Image transition test page

I omitted the last image from this one to make sure I didn't screw up the closure in the script. (This gives it a different total number of images than the above image set.)

Since the city maps I make are generated, I wanted to do something more with the fact that they’re built from data rather than drawn as a single image.

Back when I started working with them, I tried rendering them as SVGs, thinking I could make some slick animations. But the SVGs were enormous—huge files, and so heavy my browser could barely render them. I shelved the idea for a while.

Recently, I thought about drawing the maps in layers, then fading between them. Here are some interesting bits:

The prototype of the code looks like this:

// Prototype for script to fade-transition layered images. Used for
// progressively revealing map layers.

let containers = document.getElementsByClassName(
for (let container of containers) {
let images = container.children;
let n = images.length;
let endTicks = 3;
let cur = n - 1;
let curTicks = endTicks;
setInterval(() => {
if (cur == n - 1) {
if (curTicks == 0) {
for (let image of images) {
cur = 0;
curTicks = endTicks;
} else {
next = cur + 1;
cur = next;
}, 1000);

Now, getting this working with the city map macro, which will be shown below.