How it works
I was initially puzzled myself about how this beautifully complex maze-like piece is created from just diagonal lines and tiling when I watched Tim Holman's demo on YouTube (I highly recommend watching his whole talk - it's fascinating!)
Happily he wrote a brilliant tutorial for it (linked below) and I could follow it to reproduce it here.
But for those who don't want or know how to read the code, I wanted to explain how this illusion works visually. To that end... try clicking the button below to reveal some grid lines...
Do you see how the illusion is achieved now with tiling diagonal lines? 👏
Great! Now that you know, we can go back to playing around with parameters to make the generated maze look different. Here are some controls:
Okay I was going to render some sliders on the page but that takes more time to wire up than, say, asking you to set the parameters in the URL. So here's how you can control the generated image:
- click here to reload this page with swanky new parameters added to the URL
- valid range for
cells is 0 to infinity
- valid range for
leftToRight is 0 to 1 (it's a probability)
Here are some presets:
You can also edit the URL directly and refetch the page to get a new maze!
Notes
Following the Genuary 2023 day 6 prompt: Steal like an artist.
I stole from Tim Holman via his generative artistry website, who in turn stole it from another artist long time ago who probably wrote this first on a very old computer...
Tiling with randomness creates a maze! I could get this working in about 10 minutes. I'll spend the rest of the time exposing user controls to reveal how the sausage is made illusion is achieved.
Created with p5.js, a JavaScript library for creative coding.