I just got it -- thanks for sharing this! Could watch it for hours...
If anyone else wants to download the screensaver, you can get it for linux/osx/ios/android: https://www.jwz.org/xscreensaver/ . Most in the collection aren't great (unless you're in an early-2000s aesthetic mood), but I just installed the substrate one :)
Ach! this reminds me of an artist who worked mostly with Processing ( https://processing.org ) and either did this or something very like it (and a bunch of other stuff.)
Being able to see the random seed used in the console and use it in the hash is a nice touch. I found a few large ones and one with a single path between two points (1592751582695)
I feel I'm missing something when people ask what algorithm this is using. I'm imagining it as a bunch of Math.random and If statements. In fact, I don't think I've ever googled for a specific algorithm or implemented one. Am I doing programming wrong?
1. I define a set of possible moves (eg. straight ahead, left turn, junction, etc). One possible move is a dead-end, which looks a bit like a house in my interpretation.
2. Each move is assigned a relative weight (eg. continuing straight ahead 10x more likely than turning left).
3. Each iteration, for each of the roads under construction, a random move is selected. Some moves are impossible (based on other roads already drawn on the map) and so it will ensure not to select one that would result in a collision. At worst, it will terminate the road with a dead-end.
4. Repeat forever, until every road has terminated in a dead-end.
Most of the script itself is dealing with the rendering logic. To avoid collisions I maintain a 2D array of all visited points.
It is artificially limited to a 1001 x 1001 grid - just to stop it from growing forever (which could get quite slow on lower end devices). In practice I rarely encounter maps that go that far.
Thanks. It's plain JavaScript, rendering with an HTML canvas.
I did investigate JS 2D graphics libraries but decided in the end that this was sufficiently simple to not warrant one. It was harder than I expected to get the drag & zoom to work!
[+] [-] justinpombrio|5 years ago|reply
[+] [-] teddyh|5 years ago|reply
[+] [-] californical|5 years ago|reply
If anyone else wants to download the screensaver, you can get it for linux/osx/ios/android: https://www.jwz.org/xscreensaver/ . Most in the collection aren't great (unless you're in an early-2000s aesthetic mood), but I just installed the substrate one :)
[+] [-] kqr|5 years ago|reply
[+] [-] carapace|5 years ago|reply
[+] [-] cdaringe|5 years ago|reply
[+] [-] winrid|5 years ago|reply
https://github.com/mxgmn/WaveFunctionCollapse
What algorithm is this using? Got a GitHub link?
[+] [-] masfrost|5 years ago|reply
Here's the source https://random-roads--edwardcunningh2.repl.co/__repl
[+] [-] shobith|5 years ago|reply
[+] [-] ArchieMaclean|5 years ago|reply
[+] [-] jk563|5 years ago|reply
[+] [-] edwardc|5 years ago|reply
I enjoy the large ones (eg. https://random-roads--edwardcunningh2.repl.co/#1589058113269) where I imagine the gaps left in the middle to be parks.
[+] [-] amasad|5 years ago|reply
[+] [-] Phithagoras|5 years ago|reply
[+] [-] Kiro|5 years ago|reply
[+] [-] djmips|5 years ago|reply
[+] [-] cinntaile|5 years ago|reply
[+] [-] cardmagic|5 years ago|reply
[+] [-] dusted|5 years ago|reply
This would be great on A4 sized e-ink paper, mounted in a nice frame and refreshing a few times a day.
[+] [-] edwardc|5 years ago|reply
Just need to track down a e-ink display for this sort of fun project. Anyone know of any good ones that would make this easy?
[+] [-] djmips|5 years ago|reply
[+] [-] Cynddl|5 years ago|reply
[+] [-] edwardc|5 years ago|reply
I wrote a brief description in this comment: https://news.ycombinator.com/item?id=23592538
Initially I had envisaged something a bit cleverer, but for an art project keeping it simple seemed to do the trick.
[+] [-] dfxt8|5 years ago|reply
[+] [-] edwardc|5 years ago|reply
It's not especially clever:
1. I define a set of possible moves (eg. straight ahead, left turn, junction, etc). One possible move is a dead-end, which looks a bit like a house in my interpretation.
2. Each move is assigned a relative weight (eg. continuing straight ahead 10x more likely than turning left).
3. Each iteration, for each of the roads under construction, a random move is selected. Some moves are impossible (based on other roads already drawn on the map) and so it will ensure not to select one that would result in a collision. At worst, it will terminate the road with a dead-end.
4. Repeat forever, until every road has terminated in a dead-end.
Most of the script itself is dealing with the rendering logic. To avoid collisions I maintain a 2D array of all visited points.
[+] [-] KineticLensman|5 years ago|reply
https://random-roads--edwardcunningh2.repl.co/script.js
[+] [-] nostoc|5 years ago|reply
this one seems to show the boundaries of the display plane : https://random-roads--edwardcunningh2.repl.co/#1592753917190
[+] [-] edwardc|5 years ago|reply
It is artificially limited to a 1001 x 1001 grid - just to stop it from growing forever (which could get quite slow on lower end devices). In practice I rarely encounter maps that go that far.
[+] [-] abdulhaq|5 years ago|reply
[+] [-] jackdh|5 years ago|reply
[+] [-] kuroguro|5 years ago|reply
[+] [-] kleer001|5 years ago|reply
[+] [-] gb|5 years ago|reply
[+] [-] kevsim|5 years ago|reply
[+] [-] A4ET8a8uTh0|5 years ago|reply
[+] [-] edwardc|5 years ago|reply
I did investigate JS 2D graphics libraries but decided in the end that this was sufficiently simple to not warrant one. It was harder than I expected to get the drag & zoom to work!