Wave Function Collapse

Andrey Listopadov

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.

no error
no error

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:

Source code is available here