I wanted to try something where you painted the map instead of relying solely on procedural generation. This is intentionally low resolution and blocky. Try moving the smoooooooth slider to the left to see the bitmap you’re actually editing, then move it back to see the smoothed version.
smoooooooth (left=minimap, middle=round, right=angled)
jitttttttttttttter
distooooortttt and then set freq
I used a simple smoothing algorithm[1] based on shifting vertices of the mesh but there's also marching squares[2] and fancier pixel upscaling algorithms like HQ4X[3] or Waifu2X[4], and also fancy pixel to vector algorithms[5].
In addition to working on the map stuff, I used this project to try out (1) regl.js[6] for easier WebGL programming, (2) ES6 classes (I had previously used classes in Typescript, and done it by hand in JS), (3) my own mouse dragging code (I had previously only used d3.js). All three of these will be useful in future projects. I didn't need a build step for this project, which was nice.