Wave Function Collapse

This is a demo page for my post about the wave function collapse algorithm in ClojureScript. If you're interested, you can read more here.

To use, upload a sample image by clicking on the upper canvas, and split the image into tiles of specified size. For ideal results, an image should be constructed from tiles that have exactly the same pixels (no compression). After that, press the Generate button to see the results.

After uploading a sample and setting the tile size a tile picker will show above the renderer. You can click on the desired tile and paint with it on the renderer. Pressing Generate will fill the missing tiles based on the recipe. Or you can click on the empty tile and remove parts of the generated image with it. The algorithm will try to fill those for you.

Here are some pre-defined samples to try:

Cavernas
by Adam Saltsman

Kyst
by Adam Saltsman

Cosmic Lilac
by PetricakeGames

Desert
by BeyonderBoy

Structures on water
by Sta.Toasty

Desert Ruins
by Trixie

Source code is available here