7 ms·
Show HN: Little Procedural Pixel Worlds
Took a break from the falling sand simulation blog posts this week to work on another small project. It's a little pixel world generator- each time you visit, you'll see a new little world. I really like this stuff and had a blast building it yesterday!
- deleted 4y ago[deleted]
- Yhippa 4y agoReally cool stuff. I kept refreshing and it took me back to the days of all those ZZT games but this evokes much more geography. Crazy what you can do with ASCII characters and 256 colors.
- jpeg_hero 4y agoLove it. Ultima III !
- rpastuszak 4y agoNow I regret “being productive” on my day off instead of playing Dwarf Fortress. This looks lovely, well done!
- jasonjmcghee 4y agoThank you!
- hartror 4y agothis x100
- seanw444 4y agoAgreed. Came to say it looks like Dwarf Fortress.
- bradford 4y agoNice work! Are you familiar with the procedurally generated worlds in Dwarf Fortress (they have some similarity to your project)?
- jasonjmcghee 4y agoI haven't played it before, but from my understanding, it's an incredibly complex simulation. This is much simpler! Just hand-picked thresholds of some parameterized perlin noise.
- deathanatos 4y agoDefinitely has a Dwarf Fortress feel to it, but I think it's mostly the colors/"ASCII¹ art" feel. Almost like a pristine world, still unsullied by the various races & evils that inhabit a usual DF map. Peaceful. ¹not really ASCII, ofc.
- bovermyer 4y agoLove this! Are you using Simplex noise maps for altitude, temperature, and humidity? What's the process like?
- jasonjmcghee 4y agoNothing so creative / complex! You can check out the source code, I didn't obfuscate it. It's just hand-picked thresholds for perlin noise, leveraging the built in noise function in p5.js
- Folcon 4y agoReally great use of tiles and colours to make a great looking effect :)...
- pupppet 4y agoImmediately makes me miss my old MUDs.
- all2 4y agoIs it open source? I want to add clouds and birds and weather and time! [edit] Also I'm getting a lot of "out of bounds" errors when I resize my window.[/edit]
- jasonjmcghee 4y agoThe source code is all there and not obfuscated. You can just download and edit it! I'm probably going to continue working on it as a personal creative project, so I'm not planning on taking PRs- I hope that's ok! Maybe I should make a community fork?
- meetups323 4y agoIf possible could you include a license? I don't like touching code without one, as sharing modifications and/or derivatives is a potential copyright violation.
- jasonjmcghee 4y agoI will make a community repo with a license!
- jasonjmcghee 4y agoHere it is - the community repo: https://github.com/jasonjmcghee/little-worlds https://github.com/jasonjmcghee/little-worlds
- jasonjmcghee 4y agoRegarding the out of bounds. Indeed. I should fix that- middle of the work day / week now though!
- nirvanist 4y agolove it , inspiring , I think it can be done just with css also :)
- bitwize 4y agoMakes me think of Temple of Apshai and similar RPGs from the early PC and Commodore eras. ("Oh, man, my hit points are like, inexcusable in this dungeon, man. I need to find some elixors or something.")
- drewzero1 4y agoIt should date me fairly well to know that I'm familiar with Temple of Apshai, but only because of the other reference. "Man... I throwed up all over this maze."
- notum 4y agoNice, but every world is a swamp for me. So much water :)
- TrustPatches 4y agoLove it, procedural world generation is a ton of fun
- cracrecry 4y agoI like it but it would be more interesting for me if you provided some web page with the documentation of that. I am more interesting in the explanation of your code that the code itself.
- japanuspus 4y agoDid you have a look at the source for the page? This is a real, self-contained HTML page as intended by the old ones.
- natly 4y agoI've been playing around with something similar recently and I'd encourage you to look into doing this with pure webgl rather than p5.js. It's surprisingly simple (this would just be a `gl.drawArrays(gl.POINTS,...)` call it with some buffer setup and texture `texelFetch` reading) and freeing and empowering to work from the groud up without frameworks. It's also really nice to offload player offset and zoom to the gpu/shaders (it handles it really smoothly and with basically more straightforward than you'd have to do to only draw things that's on the screen with canvas rendering).
- jasonjmcghee 4y agoI had a lot of fun drawing instantly without a library, but p5js has so many great things that are easy to forget. Between noise, color conversions, prebuilt draw loop, event handling and working with images… It’s not so easy to give it up for quick projects. Suddenly 10 minutes in p5js is an hour or very difficult without a replacement library (noise) and focusing on boilerplate instead of the interesting bits
- natly 4y agoI totally get this argument. The only counter argument I'd put forward is that once you've set up that boilerplace once (which you've now figured out), abstracting that into a little library file of your own that you understand isn't too much work (and easy to extend in the future). Another argument is that learning raw webgl and getting comfortable with it (which repeated boilerplate setup and general comfort with all the API calls creates with long term use) is likely learning that will transfer over to future projects more than mastery of p5 in particular would. I'm mostly saying this as if talking to an earlier version of myself since I spent a lot of time learning threejs when I in hindsight now realize doing it with raw webgl (while building up a little boilerplate abstraction library and generally gaining comfort with the API) might have been a better use of time (especially long term). Kinda depends on what you overall goals are though too (and how eager you are to make the idea you have come into reality) etc etc.
- jasonjmcghee 4y agoGreat idea. This would be dramatically lighter weight in terms of client download and more performant. I believe color variation logic could also be offloaded to a fragment shader.
- TheRealNGenius 4y agoborked on safari
- jasonjmcghee 4y agoInteresting! Could you provide some more info? Seems to work on Safari on iOS and Mac for me.
- TheRealNGenius 4y agomacOS Catalina, Version 13.1.1 on Macbook
- jasonjmcghee 4y agoI appreciate that! I should have been more specific- I was curious about the error (in the console) you encountered or how exactly it was "borked"
- TheRealNGenius 4y agoIt also doesn’t work on iPad safari version 13. I’m not at my laptop now, but I’ll update you on the error message later.
- Tagbert 4y agoIt is working on Safari 14 on iPad. Not trying to contradict TheRealNGenius, just hoping to put some bounds on what works and what doesn’t. Perhaps there was a fix in Safari 14 that allows this but was broken in 13. I don’t have access to an older Safari to test against.
- TheRealNGenius 4y ago[Error] SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list. (anonymous function) (little-worlds:94) This is what I get on my laptop. Probably don't have to worry too much, I'm generally a hold out when it comes to updating OS versions, so things that expect newer features might not work for me
- Aperocky 4y agoNice one, I like the coloring, it'd be nice if it was dynamic or things could live on it, maybe next step? I have a few random for fun projects lying around: map gen and hydrology project hydrosim: http://aperocky.com/hydrosim/ http://aperocky.com/hydrosim/ pet map gen and having "people" living on it: http://prehistoric.tech/ http://prehistoric.tech/
- diggernet 4y agoHydrosim reminds me of the map generation phase of Wilderness. https://archive.org/details/msdos_Wilderness_-_A_Survival_Adventure_1986 https://archive.org/details/msdos_Wilderness_-_A_Survival_Ad...
- Folcon 4y agoThis is really cool =)... Do you mind if I dig into the code and figure out how it works? I'm really finding the market that you've got going interesting, how in-depth is it? I've got a thing[0] I've been prototyping which does a market simulation that I'm working on and I'd be curious how far you've gone down that rabbit hole? =)... - [0]: https://folcon.itch.io/fruit-economy https://folcon.itch.io/fruit-economy
- Aperocky 4y agoSupply/Demand was pretty simple on the individual level, just had to aggregate it: https://github.com/Aperocky/prehistoric-simulation/tree/master/src/sim/market https://github.com/Aperocky/prehistoric-simulation/tree/mast...
- Folcon 4y agoSure, but how that translates to a price is an interesting question.
- Aperocky 4y agoThe simple model consist of buy and sell orders, buys come with a max price, sell comes with a min price, both come with quantities. Just have to meet in the middle by dynamically accumulating orders by quantity from both sides and after the prices met, set that as the actual sell price and discard the rest of the order as not filled.
- Tagbert 4y agoThis reminds me of the character graphics you would get on Commodore computers in the 80's
- TacticalCoder 4y agoYup the colors and look are not unlike Ultima III / Ultima IV on the C64.
- staindk 4y agoVery cool! I love the colour scheme. Refreshing the page for more worlds reminded me - at some point someone recommended this[1] Chrome extension to me and it's been neat to have a new satellite view of earth show up every time I open a new tab [1] https://chrome.google.com/webstore/detail/earth-view-from-google-ea/bhloflhklmhfpedakmangadcdofhnnoh https://chrome.google.com/webstore/detail/earth-view-from-go...
- ajdude 4y agoI would love a firefox & chrome extension that would generate a tinyworld on every new tab.
- flobosg 4y agoAs others have already said, I’m getting some Dwarf Fortress vibes from this.
- sboomer 4y agoIt would be nice to give an option to download an image of this page in required dimensions. I would really love to have these as my wallpaper.
- Leftium 4y agoI got a desktop-sized image by putting the browser in full-screen mode and taking a screen capture via the OS.
- lethologica 4y agoI found this at a time when I was feeling rather blue. It was fun to come up with stories for each of the maps that I generated. Kept my mind off of things. Thank you.
- totetsu 4y agoLet me click on the doors and chests to toggle the open and close.
- bodge5000 4y agoBeen working on a similar thing recently, but this looks fantastic It looks like you're using some kind of perlin noise, one idea I had (probably been done a million times before) is rather than using the "height" of the noise to decide on a tile, you could have it decide on a biome, which itself has a list of tile types with a weighted random choice of which one it picks; so you're forest areas can still be populated with grass for example, but tree's are more common.
- kaba0 4y agoReally cool, I did something similar for a university project where I had to implement a Minecraft clone. I don’t remember all the details, but I used multiple, differently scaled Perlin noise “textures”, a 2D one was responsible for the surface terrain (which determined the type of the upper n percentage of blocks there), another 2D managed the height at each block column (with some interaction with the terrain texture’s value?), and a 3D one was responsible for caves under the surface. It was my first try at anything similar and a surprisingly easy code generated surprisingly good results.
- AltruisticGapHN 4y agoAs an aside would it take a lot more code if this was made with Phaser? Just wondering what's the easiest way to do something fun like this (procedural generation with tiles, but also basic rogue gameplay perhaps).
- muzani 4y agoI'm always surprised how charming this kind of thing is. Inspired to do something like this too.