Procedural tree generator #

I'm still a bit sad about Flash going away. Yes, I know lots of people hated it. But it was an amazing tool for creativity. One of the tiny fun projects I did was procedurally generating trees:

Set of procedurally generated trees
Procedurally generated trees

Upgrading my PRNG for procedural generation #

For a long time now I've been using a very simple Park-Miller LCG random number generator for my procedural generation projects. This is in part because back in the Flash days, Michael Baczynski's "" library was popular, and it had an implementation of Park-Miller. When I switched to Haxe, I used his Haxe data structures library. And then when I switched to Javascript, I used the Javascript port of polygonal's library, and then I wrote my own. I love how simple the core algorithm is.

However I know that it's not a great random number generator.

The original Flash version and the Javascript port both point to Robin Whittle's page about this algorithm, which explained that 16807 was the original multiplier used in this random number generator, but that "47271 or 69621" would be better. I ended up making my own code that used 47271. But I noticed today that the Wikipedia page says 48271 is better, so I'm wondering if 47271 is a typo. So I looked at the paper and indeed, 48271 and 69621 are listed. Not 47271. So for years now I've been using a multiplier based on a typo.



Improving island shaping for map generation, again #

Back in 2019 I rewrote the island section of my noise-based map generation page. I had high hopes for that rewrite. It was ok, but I was still quite unhappy with it. So I rewrote it again.

Island map generation: demo and main ideas


Offline access with File / Save As #

One of my low priority goals for my site is to make my pages work offline. I had looked into "web manifests" but they seem more suited for web apps and not for documents like mine. So I looked at what it would take to make File→Save As work, preserving interactivity. It turns out it does not work in general on my site. Why?

I tried to make the original HTML + JavaScript should work offline in the sense that they only access resources on the current server and not from any CDN, Google Fonts, etc. So if you save the HTML + JavaScript it should work on a local web server. However, File→Save As doesn't work this way!

Diagram showing what happens when using Save As in the browser on an interactive page
Save As for an interactive page (diagram made with excalidraw)


Ten Years of Red Blob Games #

Wow, it's been over ten years now for Red Blob Games. I had started experimenting with interactive diagrams in Java back in the early 2000s, and wrote a blog post in 2007 about why I wanted them. My early experiments weren't entirely satisfactory. Although Flash applets worked better than Java applets, they both produced the diagrams alone, not the whole page. Once HTML5 became widely available in 2011, I started learning how to make interactive diagrams with it. I concluded that HTML5 would let me create the unified experience of interactive text+diagrams that I wanted. I started Red Blob Games in late 2011 to explore this style of interactive articles, which Bret Victor called "explorable explanations".

Screenshots of various projects I've worked on in ten years

Reaction-diffusion #

I'm following Phillip Compeau's online biology+math course, and it starts out with reaction-diffusion systems. I've played with them several times before, most recently in 2019, but with this course it finally "clicked" how they work. I have this experience often — I have to play with something before I can understand it.

Reaction-diffusion patterns
Reaction-diffusion patterns

What I did in 2021 #

It's time for my annual self review. It's been a messed up year, not only for me but for many other people. Last year I said I wanted to learn some biology and math. I didn't have any particular goals for game or tutorial projects. I knew the year would be a mess so I left it open ended.

Chart showing predator-prey differential equations


Summer of small projects #

I've kinda been quiet for a while. The main reason is that world events finally got to me. I had been doing ok mentally, working at home, spending a lot of time outdoors, etc., but eventually the COVID pandemic and the California drought+wildfires drained me mentally, and I spent much of the summer unproductive.

I decided to get going again, I should work on easier things. This strategy has worked in the past for me. I spent part of the summer following the reddit r/roguelikedev summer tutorial series. Each week I approached the tutorial topics but decided to implement them differently than what the tutorial did. I implemented "thin walls", a different inventory system, a different ui, a new map generator, tile graphics, and a few other things. It was fun. It wasn't too hard. I wrote up my notes and included a playable version.

After that project, I looked through my ideas list and remembered that I want to make a lot of small updates to existing pages.

Patterns added to A* diagram

Highlighting diagrams and text together #

I love the annotated geometry proof here. It doesn't take a lot of JavaScript to make. The main idea is to annotate the text and also the diagram, and then use the annotations plus CSS to drive the highlighting. I wanted to recreate a tiny bit of it to demonstrate how to make something like this. Live demo:


Rewriting my grid parts page #

If you've followed my work you know I'm a fan of grids. I had a page I wrote in 2006 that I decided to update. Those were the days before html5, and even before SVG was reliable in browsers, so I had made images using some Ruby code to generate SVG, and then ImageMagick to turn SVG into PNG. If I'm going to update this page, what might I want? I made a list of possibilities:

  1. Change of focus. The old page spends a lot of time talking about the properties of grids in the abstract, and how different grid types relate to each other. When I visit the page for my own needs, I don't care about that. What I do want to see is the formulas. I use this page as a reference. I want to change it to make the formulas the main focus of the page.
  2. Interactivity. I could make all the diagrams interactive. That's what people expect from me, after all!
  3. High resolution diagrams. We're not living with 800⨉600 desktop monitors anymore. With "HiDPI" screens including 4K, I wanted to use SVG everywhere so that the diagrams are sharp.
  4. Put coordinates into the diagrams instead of only off on the side.
  5. Make the relationship diagrams for all three grid types. On the original page I have diagrams only for squares.
  6. Animations showing how square grids relate to triangle and hexagon grids.
  7. Animation showing how square grids relate to isometric grids (which are really isometric views of a square grid).
  8. More algorithms including distances, to screen coordinates, from screen coordinates.
  9. Sample code generation, so that you could select a programming language and see sample code in your favorite language.