Hi! I make interactive visual explanations of math and algorithms, using motivating examples from computer games.
Learn
Line drawingAlso: linear interpolation (lerp), supercover
Curved roadsAlso: Bezier curves, circular arcs, biarcs
Polygonal Map Generation[1]Also: blue noise, Delaunay triangulation, Voronoi diagrams, water flow
Grid parts: tiles, edges, vertices for squares, hexagons, and triangles
Guide to Delaunator[4], a Delaunay+Voronoi library Also: mesh data structures, half-edges
Noisy edges out of straight lines Also: area-constrained noisy paths
Play
I make fun demos while learning new things and writing explanations:
Ponder
I also explore ideas sometimes without writing a full tutorial:
- Alternative to Voronoi with rounder cells
- Procedurally generating names using pronunciations and neural networks
- Procedurally modifying spelling using pronunciations and letter-phoneme alignment
- Understanding the color yellow: why are there three primary colors in science but four primary colors in board games, crayons, etc.?
- Distance to seed points using Breadth First Search
- Homunculus: stretching and shrinking maps to match a game’s needs[9]
- Map generation with no code, only image filters
- Terrain shader experiments for filling triangles with various patterns
- Placing natural resources on a map
- Hexagon on Saturn[10]: can I recreate it?
- Procedural planet generation on a sphere using Voronoi+Delaunay
- Reshaping distributions[11]
- Signed distance fields[12]: quick visual explanation
- Railroads on a hex grid
- Game map design[13]: what should you show and not show?
- /r/roguelikedev summer event, 2020, 2021, 2022, 2023, where people in the reddit/discord communities make our own roguelikes over several weeks.
Meta
I’m working on a series of pages that explain how to make interactive tutorials:
- Tutorial about making interactive tutorials, including multiple diagrams and drag-and-drop. This shows how I write my interactive tutorials since 2015, using vue.js
- Event handlers for dragging objects around, my recommendations for mouse/touch event handling for modern browsers as of 2023.
- An older Tutorial about making interactive tutorials. This shows how I wrote my interactive tutorials from 2011–2015, using d3.js.
- Starter code[14] you can study and copy, with versions using React, Vue, lit-html, vanille js, and Preact
- How I implement my interactive diagrams, part 1[15] and part 2[16]. This is a high level overview without being specific to any particular library.
- Little design elements[17] I like to use — colors, shapes, controls, etc.
- Drag handles with constraints
- Arrows outside the diagrams[18], something I haven’t seen elsewhere, and haven’t used yet
- Responsive web design implementation for interactive diagrams (canvas, svg, webgl)
- Notes on how I made the A* pages and the tool I made
