6 ms·
Show HN: Random Roads
- xwdv 6y agoWouldn’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 6y ago[deleted]
- krthr 6y agoyou must be the life of the parties
- Cynddl 6y agoThanks for sharing! Really like the minimal design and the animations. Could you explain how you did this simulation?
- edwardc 6y agoThanks 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.
- cinntaile 6y agoIt looks like an auto-generated PCB to me. Cool stuff.
- dfxt8 6y agoHey, good work! What algorithm did you use?
- KineticLensman 6y agoNot the author, but the algorithm is at https://random-roads--edwardcunningh2.repl.co/script.js https://random-roads--edwardcunningh2.repl.co/script.js
- edwardc 6y agoThanks! 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 6y agoNice! My first page load I got a single line that stopped at the first point. Is that just able to happen?
- edwardc 6y agoYes, 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
- y42 6y agoKind of reminds me of the algorithm to create a maze: https://medium.com/swlh/how-to-create-a-maze-with-javascript-36f3ad8eebc1 https://medium.com/swlh/how-to-create-a-maze-with-javascript...
- A4ET8a8uTh0 6y agoOddly mesmerising. What did you use to do it?
- edwardc 6y agoThanks. 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 6y agoThis reminds me of the beautiful "substrate" screen saver: http://www.complexification.net/gallery/machines/substrate/ http://www.complexification.net/gallery/machines/substrate/
- teddyh 6y agoAs seen in XScreenSaver: https://www.youtube.com/watch?v=dCCVgBOVD0E https://www.youtube.com/watch?v=dCCVgBOVD0E
- kqr 6y agoThat is absolutely stunning. My favourite part of flying!
- cpeterso 6y agoYou 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-airplane-window-5932313 https://io9.gizmodo.com/how-to-read-the-landscape-from-your-...
- carapace 6y agoAch! this reminds me of an artist who worked mostly with Processing ( https://processing.org https://processing.org ) and either did this or something very like it (and a bunch of other stuff.)
- californical 6y ago
- jk563 6y agoBeing 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 6y agoWell 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 6y agoThere are some very small ones, too.
- Phithagoras 6y agoWould be cool to see a blog post explaining the simulation!
- ArchieMaclean 6y agoThe code is at https://repl.it/@EdwardCunningh2/Random-Roads https://repl.it/@EdwardCunningh2/Random-Roads
- kuroguro 6y agoHad 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.
- nostoc 6y agoInteresting. 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 6y agoGood 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.
- cocktailpeanuts 6y agogreat execution!
- winrid 6y agoReminds 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?
- shobith 6y agoIt seems to be available in browser, see script.js it's not minified.
- masfrost 6y agoIf 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
- gb 6y agoReally nice. I tried something like this many years ago in Flash, but the results this can produce are far more impressive!
- abdulhaq 6y agoSome 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 6y agoAlot of other people probably say 'Why did you do it?'
- kevsim 6y agoSeems to use the same approach used to design the road system in Boston :)
- sloreti 6y agoGenerative Phoenix suburbs
- dusted 6y agoWonderful 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 6y agoThanks 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 6y agoNot 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 :)
- kleer001 6y agoI would love to see this combined with L-systems O_O
- cardmagic 6y agoIf 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/
- Kiro 6y agoI 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 6y agoLooked at the code. You were right! It was random and some rules. Almost like an algorithm.
- djmips 6y agoHave you seen this one!!! https://random-roads--edwardcunningh2.repl.co/#1592751582695 https://random-roads--edwardcunningh2.repl.co/#1592751582695
- phist_mcgee 6y agoGetting cert errors on this for chrome :(
- amasad 6y agoCool 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