Layerage

Layerage

A collage tool that uses neural image similarity to make patterns inside thousands of community-created layers explorable.

Year
2019
Type
Data art
Role
Concept · Design · Code
Tech
D3.js · Vue.js · TensorFlow.js

Layerage builds collages out of r/Layer — Reddit’s community canvas, made in partnership with Adobe and once open for everyone to draw on, in the spirit of r/place. Tens of thousands of small drawings accumulated there, and I was so intrigued by their creativity and granularity that I had to experiment on them: first with timelapses while r/Layer was still running, then with a zoomable explorer for all the layers, built on VIKUS Viewer, and finally with this tool, which felt more accessible for everyone.

Search for a layer, hit build, and Layerage assembles a collage of its nearest neighbors — drawings a neural network considers similar. The canvas automatically adapts to your screen, so the result is a ready-made desktop or phone background. A menu tweaks dimensions, layer size and count; a random button picks a set for you — and on mobile, you can just shake your phone.

Layerage collage on white: dozens of r/Layer drawings grouped as similar, mostly round pink characters (many Kirbys, Peppa Pig, Patrick Star), with an octopus, a turtle and a jellyfish mixed in

The similarity behind it: every public layer is run through a neural net (Inception/MobileNet) to extract an imprint of its visual character, then t-SNE and UMAP reduce those imprints to a 2D similarity space. Pick a point in that space, select the closest layers, distribute them to fit the canvas — collage. The first experiments lived in an Observable notebook before becoming a Vue.js app.

Some honest notes from the process: running t-SNE on ~50,000 × 1,000-dimensional vectors makes your system sweat — I hit memory limits until I switched to the WebGL implementation (TFJS-TSNE), and YaleDHLab’s UMAP implementation helped too. And while the quick Observable experiments were pure fun, carrying a finished app over the line took considerably more self-motivation.

The code is on GitHub under a CC BY-NC 4.0 license — contributions and feature ideas welcome.

Thanks to u/youngluck for the support.

Globe visualization of layers

The earlier zoomable explorer, built on VIKUS Viewer: thousands of r/Layer drawings arranged by similarity

Close-up in the same explorer: individual r/Layer drawings side by side

Collage of road-marking layers from r/Layer

Credits
Christopher Pietsch — concept · design · code