Note: Take a look at WaveFunctionCollapse[1] and this interactive demo[2]. This page is about ConvChain, which was an earlier project from ExUtumno before he made WaveFunctionCollapse.
I saw this reddit post from ExUtumno[3] and decided to study the C# code[4] and port it to run in the browser.
Click to edit the pattern
or try one of these presets from ExUtumno:
receptorSize =
temperature =
iterations =
Outputs
I don’t know how this algorithm works. I just ported the code over to run on the web. I was hoping I could find some more cool patterns but haven’t found any...
Porting notes
The original C# code is here[7]. My port to TypeScript/JavaScript is here. I added a UI here. I used TypeScript to make it easier to compare the original code to my port (I wanted to see all the types). The UI code is a bit messier, in JavaScript, without type declarations.
The original code uses Bitmap in several places. I decided to separate out Bitmap so that the core calculations don’t rely on a graphics library. I converted the bitmaps into a 2d array of ints first.
The original code uses the system random number generator. I switched to PM-PRNG[8] because I wanted to reuse the same sequence each time you changed parameters. That way you can separately see the result of changing parameters and changing the random number seed (there are three different seeds used to generate the three outputs).
There’s a function to choose from a weighted distribution. It uses a dictionary input and converts it to an array. I changed it to take an array directly. It takes a random number generator as input; I changed it to take the generated number, so that I would no longer have a dependency on a random number generator, and it would be easier to test. See the weighted_choice function in my code.
Typescript (ES6) classes don’t have multiple constructors, so when I ported the Pattern class over, I changed the interface to have only a single constructor. Instead of a constructor with a function initializer, a constructor with a Bitmap initializer, and a constructor with a 2D array initializer, I made it always take a function initializer, and then wrote a helper function that converted a 2D array into a function that read from that array.