
Show HN: Random Roads - edwardc
https://random-roads--edwardcunningh2.repl.co
======
justinpombrio
This reminds me of the beautiful "substrate" screen saver:
[http://www.complexification.net/gallery/machines/substrate/](http://www.complexification.net/gallery/machines/substrate/)

~~~
californical
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/](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 :)

~~~
kinduff
Looks like the author is redirecting the link lol

------
winrid
Reminds me of the Wave Function Collapse algorithm, although doesn't look to
be that.

[https://github.com/mxgmn/WaveFunctionCollapse](https://github.com/mxgmn/WaveFunctionCollapse)

What algorithm is this using? Got a GitHub link?

~~~
masfrost
If you see a .repl.co or .repl.run link you can get to the source by going to
/__repl

Here's the source [https://random-roads--
edwardcunningh2.repl.co/__repl](https://random-roads--
edwardcunningh2.repl.co/__repl)

------
ArchieMaclean
The code is at [https://repl.it/@EdwardCunningh2/Random-
Roads](https://repl.it/@EdwardCunningh2/Random-Roads)

------
jk563
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)

~~~
edwardc
Well spotted!

I enjoy the large ones (eg. [https://random-roads--
edwardcunningh2.repl.co/#1589058113269](https://random-roads--
edwardcunningh2.repl.co/#1589058113269)) where I imagine the gaps left in the
middle to be parks.

~~~
blattimwind
There are some very small ones, too.

------
amasad
Cool seeing repl.it hosted sites on HN! FYI if add /__repl to get to the
source: [https://random-roads--edwardcunningh2.repl.co/__repl](https://random-
roads--edwardcunningh2.repl.co/__repl)

------
Phithagoras
Would be cool to see a blog post explaining the simulation!

------
Kiro
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?

~~~
djmips
Looked at the code. You were right! It was random and some rules. Almost like
an algorithm.

------
cinntaile
It looks like an auto-generated PCB to me. Cool stuff.

------
cardmagic
If you like this aesthetic and want to play a game that looks like this and is
super fun, try Railroad Ink:
[https://ondras.github.io/rri/](https://ondras.github.io/rri/)

------
dusted
Wonderful little thing :) I was instantly reminded of substrate, but the way
this ends, each "run" looks like a minimalistic artwork.

This would be great on A4 sized e-ink paper, mounted in a nice frame and
refreshing a few times a day.

~~~
edwardc
Thanks for the feedback. Yes, I have been imagining the same thing too!

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?

~~~
dusted
Not really, I've no experience with e-ink displays, if I was to do it, I'd
hunt for an older-generation large-size e-book reader and try to hack the
firmware a bit.

I have two Kobo readers that are 5+ years old, the small one, I cracked open
and found that the Linux OS was on a normal SD card in a normal socket, so I
removed it and flashed it to a bigger card, I think one of those should be
easy(ish) to hack :)

------
djmips
Have you seen this one!!! [https://random-roads--
edwardcunningh2.repl.co/#1592751582695](https://random-roads--
edwardcunningh2.repl.co/#1592751582695)

------
Cynddl
Thanks for sharing! Really like the minimal design and the animations. Could
you explain how you did this simulation?

~~~
edwardc
Thanks for the feedback - the minimal look is pleasing to my eye too!

I wrote a brief description in this comment:
[https://news.ycombinator.com/item?id=23592538](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
Hey, good work! What algorithm did you use?

~~~
edwardc
Thanks! You can see the code here: [https://repl.it/@EdwardCunningh2/Random-
Roads](https://repl.it/@EdwardCunningh2/Random-Roads)

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.

~~~
winrid
Nice! My first page load I got a single line that stopped at the first point.
Is that just able to happen?

~~~
edwardc
Yes, there's nothing to prevent very small maps like what you saw - even ones
that terminate with a dead-end before a road has been drawn (eg.
[https://random-roads--edwardcunningh2.repl.co/#1592758760947](https://random-
roads--edwardcunningh2.repl.co/#1592758760947)).

I considered adding logic to prevent this, but have decided to embrace it as a
feature rather than a bug.

I quite like some of the small-ish maps, like this: [https://random-roads--
edwardcunningh2.repl.co/#1592759118928](https://random-roads--
edwardcunningh2.repl.co/#1592759118928)

------
nostoc
Interesting.

this one seems to show the boundaries of the display plane : [https://random-
roads--edwardcunningh2.repl.co/#1592753917190](https://random-roads--
edwardcunningh2.repl.co/#1592753917190)

~~~
edwardc
Good one! Yes, you've hit the bottom there.

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
Some people see this and say 'how did you do it?'. Others say to themselves,
'how would I do it?'. I'm in the second category...

~~~
jackdh
Alot of other people probably say 'Why did you do it?'

------
kuroguro
Had a weird bug where the whole page was flickering while it was drawing. A
reload fixed it. On latest FF/Win. Not sure what the cause was.

------
kleer001
I would love to see this combined with L-systems O_O

------
gb
Really nice. I tried something like this many years ago in Flash, but the
results this can produce are far more impressive!

------
kevsim
Seems to use the same approach used to design the road system in Boston :)

------
A4ET8a8uTh0
Oddly mesmerising. What did you use to do it?

~~~
edwardc
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!

------
phist_mcgee
Getting cert errors on this for chrome :(

------
sloreti
Generative Phoenix suburbs

------
cocktailpeanuts
great execution!

------
xwdv
Wouldn’t call these roads really.

Roads without context are just paths. You need the roads to provide useful
destinations as efficiently as possible.

Many of these paths lead nowhere. In fact, all of them go nowhere, I don’t
even think there’s loops.

~~~
krthr
you must be the life of the parties

