[HN Gopher] Show HN: Random Roads
___________________________________________________________________
Show HN: Random Roads
Author : edwardc
Score : 120 points
Date : 2020-06-21 12:14 UTC (10 hours ago)
(HTM) web link (random-roads--edwardcunningh2.repl.co)
(TXT) w3m dump (random-roads--edwardcunningh2.repl.co)
| Phithagoras wrote:
| Would be cool to see a blog post explaining the simulation!
| cardmagic wrote:
| 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/
| kevsim wrote:
| Seems to use the same approach used to design the road system in
| Boston :)
| A4ET8a8uTh0 wrote:
| Oddly mesmerising. What did you use to do it?
| edwardc wrote:
| 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!
| ArchieMaclean wrote:
| The code is at https://repl.it/@EdwardCunningh2/Random-Roads
| dusted wrote:
| 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.
| sloreti wrote:
| Generative Phoenix suburbs
| winrid wrote:
| Reminds me of the Wave Function Collapse algorithm, although
| doesn't look to be that.
|
| https://github.com/mxgmn/WaveFunctionCollapse
|
| What algorithm is this using? Got a GitHub link?
| shobith wrote:
| It seems to be available in browser, see script.js it's not
| minified.
| kleer001 wrote:
| I would love to see this combined with L-systems O_O
| xwdv wrote:
| 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.
| [deleted]
| krthr wrote:
| you must be the life of the parties
| Cynddl wrote:
| Thanks for sharing! Really like the minimal design and the
| animations. Could you explain how you did this simulation?
| edwardc wrote:
| 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.
| abdulhaq wrote:
| 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 wrote:
| Alot of other people probably say 'Why did you do it?'
| justinpombrio wrote:
| This reminds me of the beautiful "substrate" screen saver:
| http://www.complexification.net/gallery/machines/substrate/
| cdaringe wrote:
| Brilliant. Anyone know of an impl ready to roll for macos?
| kqr wrote:
| That is absolutely stunning. My favourite part of flying!
| cpeterso wrote:
| 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-...
| carapace wrote:
| 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.)
| MattRix wrote:
| Uh are you sure you're not thinking of Jared Tarbell, who
| made this very piece in Processing?
| carapace wrote:
| Oh right! Derp.
| californical wrote:
| 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 :)
| kinduff wrote:
| Looks like the author is redirecting the link lol
| teddyh wrote:
| As seen in XScreenSaver:
| https://www.youtube.com/watch?v=dCCVgBOVD0E
| Kiro wrote:
| 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 wrote:
| Looked at the code. You were right! It was random and some
| rules. Almost like an algorithm.
| djmips wrote:
| Have you seen this one!!! https://random-roads--
| edwardcunningh2.repl.co/#1592751582695
| kuroguro wrote:
| 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.
| gb wrote:
| Really nice. I tried something like this many years ago in Flash,
| but the results this can produce are far more impressive!
| cocktailpeanuts wrote:
| great execution!
| jk563 wrote:
| 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 wrote:
| 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.
| blattimwind wrote:
| There are some very small ones, too.
| nostoc wrote:
| Interesting.
|
| this one seems to show the boundaries of the display plane :
| https://random-roads--edwardcunningh2.repl.co/#1592753917190
| edwardc wrote:
| 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.
| cinntaile wrote:
| It looks like an auto-generated PCB to me. Cool stuff.
| dfxt8 wrote:
| Hey, good work! What algorithm did you use?
| KineticLensman wrote:
| Not the author, but the algorithm is at
|
| https://random-roads--edwardcunningh2.repl.co/script.js
| edwardc wrote:
| 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.
| winrid wrote:
| Nice! My first page load I got a single line that stopped at
| the first point. Is that just able to happen?
| edwardc wrote:
| 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
| y42 wrote:
| Kind of reminds me of the algorithm to create a maze:
| https://medium.com/swlh/how-to-create-a-maze-with-
| javascript...
___________________________________________________________________
(page generated 2020-06-21 23:00 UTC)