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

Layerage builds collages out of r/Layer — Reddit’s community canvas, 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 a zoomable explorer for all the layers, then 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.

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 open source on GitHub — contributions and feature ideas welcome.

Globe visualization of layers

Screenshot of r/layer interface

Collage of layers

Layerage index page

Credits
Christopher Pietsch — concept · design · code