Hi! I make interactive visual explanations of math and algorithms, using motivating examples from computer games.
I’ve been curating game development articles since 1990, and my web site has been up since 1995. All of my articles are available for free, with no signup and no ads. The main audience is independent, student, and hobbyist software developers. I started experimenting with interactive explanations in 2004, but didn’t figure out until 2007 the style of interactive explanation I use now.
I make fun demos while learning new things and writing explanations:
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
- 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: can I recreate it?
- Procedural planet generation on a sphere using Voronoi+Delaunay
- Reshaping distributions
- Signed distance fields: quick visual explanation
- Railroads on a hex grid
- Game map design: what should you show and not show?
I’m working on a series of pages that explain how to make interactive tutorials:
- Interactive tutorial about making interactive tutorials, including multiple diagrams, layered diagrams, drag-and-drop, and scrubbable numbers. Example code uses d3.js.
- Starter code you can study and copy, with versions using React, Vue, lit-html, vanille js, and Preact
- How I implement my interactive diagrams, part 1 and part 2.
- Little design elements I like to use — colors, shapes, controls, etc.
- Drag handles with constraints
- Arrows outside the diagrams, 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 for graph editing
- Blog posts about my process and struggles
- Scrubbable numbers in ObservableHQ
- Using Vue’s reactivity system with Canvas, which can also work with D3.
- Using Vue with KaTeX, proof of concept.
- Using Vue with pointerevents, quick example.
- Vue text modification using render functions for syntax highlighting, proof of concept.
Accompanying code is open source, under either the MIT License or the Apache v2 License. Both allow use in commercial projects. Other projects are found at at github/amitp and github/redblobgames. My project ideas board is public.
I’ve been helping people make games since 1990. I wrote games earlier in life, with Solar Realms Elite being the most well known, then worked on an environmental simulation game called BlobCity, then took a break for over a decade. The recent rise of indie, mobile, tablet, social, and web games have made me interested in game development again. My current passion is using interactivity on the web for learning, especially computer science and math. I’ve started with game development because it’s a rich source of interesting problems that can be explained visually. With modern web browsers, we can use explanations that don’t follow the formats used in magazines, technical papers, and books. We can combine learning by reading, learning by watching, and learning by doing.
I previously worked with Root-1 on educational games, Wild Shadow Studios on Realm of the Mad God, Peter Norvig on interactive diagrams for Artifical Intelligence: A Modern Approach, and Nonagon Games on A Chronicle of Misdeeds.
If you’re in the Silicon Valley area and want to chat in person, email me at email@example.com. I’m especially interested in algorithms related to maps, procedural generation, and pathfinding, but love to chat about anything.