Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Random Roads (repl.co)
144 points by edwardc 21 days ago | hide | past | favorite | 50 comments

This reminds me of the beautiful "substrate" screen saver: http://www.complexification.net/gallery/machines/substrate/

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

Looks like the author is redirecting the link lol

That is absolutely stunning. My favourite part of flying!

You might like Gregory Dicum’s book “Window Seat: Reading the Landscape from the Air”. https://io9.gizmodo.com/how-to-read-the-landscape-from-your-...

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

Uh are you sure you're not thinking of Jared Tarbell, who made this very piece in Processing?

Oh right! Derp.

Brilliant. Anyone know of an impl ready to roll for macos?

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


What algorithm is this using? Got a GitHub link?

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

It seems to be available in browser, see script.js it's not minified.

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)

Well spotted!

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.

There are some very small ones, too.

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

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

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?

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

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

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/

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.

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?

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

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

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

Initially I had envisaged something a bit cleverer, but for an art project keeping it simple seemed to do the trick.

Hey, good work! What algorithm did you use?

Thanks! You can see the code here: 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.

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

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

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

Kind of reminds me of the algorithm to create a maze: https://medium.com/swlh/how-to-create-a-maze-with-javascript...

Not the author, but the algorithm is at



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

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.

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...

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

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.

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

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

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

Oddly mesmerising. What did you use to do it?

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!

Getting cert errors on this for chrome :(

Generative Phoenix suburbs

great execution!

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.

you must be the life of the parties

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact