intro
Wave function collapse in JS
Kudos to CodingQuest and his The Wave Function Collapse algorithm and accompanying repo implementation in Python which I ported to Javascript and slightly restructured.
changelog
2023/10/23
wfc.mjsno longer importsconfig.mjs(configuration is now received via DrawWorld.ctor args and Tile's static property setting)- minor UI improvements (font scales with sprite scale, github link)
- early experiments with manipulating initial state
potential todo list
- manipulate initial state:
- by drawing solid forms (circle, bresenham line, rect)
- by using simplex noise to drive different zones with different weights?
- create a WFC editor that reads/writes JSON, similar to this idea here
structure
The abstract algorithm code sits under wfc.mjs.
canvas.mjs has the simplest canvas abstraction I could come up for these purposes.
In main.mjs you can have the code display the spritesheet, the configured sprites and also run the algorithm (the function activate ATM).
config.mjs drives this WFC setup. The only non-generic code has to do with a fix which superimposes forest over grass so that WFC doesn't have to handle special use cases.
Created a simple UI overlay which reads and overrides the URL search parameters for demo purposes, it sits on ui.mjs.
resources
canvas cheat sheet
code
artwork
- 2D ortho
- 2D side-scroller
- 2D hex
- 3D hex
fonts
inspiration
- https://www.youtube.com/watch?v=OiJmO2BRcVE (the godot WFC editor)