I've ported CaveGen to the web so you can build caves in your web browser. Reasons why I did this:
- Linux/Mac users can use CaveGen
- Convenience of having your cavemaker in the same environment as HATPC and the Neopets uploader
- I have more freedom to add useful/interesting features than I did in the Windows desktop application version

Please bear in mind that I've pushed out the BARE MINIMUM you would need to make a cave in a web browser and store it there between sessions. So this thing currently looks really ugly. It's also laggy for big caves and may well be buggy too. On Firefox, there's some pretty shocking graphical problems when painting right now. But fear not! It will only get better with time. The Undo button is coming next. To save people the horrors of erasing their caves like they had with the desktop version, I've added a confirmation prompt for those times when you accidentally click the Generate button. This is a temporary measure until the Undo button is added.

It's open source, so you can see what bad code looks like. For information on upcoming features and the changelog, here is the README (and the repository).

Finally, CaveGen itself is here.

I want to make this tool as robust/useful as possible, so I would gratefully appreciate any feedback, feature requests, bug spots and even pull requests. Remember that I only develop this on the occasional evening - please don't weigh me down with high expectations. I'll do my best for you guys, but I won't promise speed or quality. Though I think I can deliver quality eventually. I know no-one makes caves very frequently these days, but I'm building this in hope that someone at some time will find it reasonably useful/nifty.

Have fun!  

How do you get the generate button to do anything?

Also what are the red Xs?

Change width and height to whatever sizes you want first. Clicking Generate without changing these should generate a new cave with the given dimensions anyway. It will just contain terrain.

Oh, i thought it was to generate the random cave like the last one had.

Yes, that's a reasonable assumption to make. That stuff will come eventually. But right now, it just generates a cave with the given width and height.

I'll try it out, maybe make a cave.

Cool! I recommend you keep the size of the cave small for now. Performance and usability is poor for larger caves. Especially in Firefox for some reason; I'm going to have fun figuring that one out.

It's really hard to see the tiles in the bigger caves, so a zoom feature is on my near-term agenda. This is one of the things I couldn't do with the desktop version, so I'm looking forward to finally implementing that.

A few other things to be noted, options of cave borders, cave being too small/large might be useful. Making a 10x10 cave automatically makes it 16x16

Thanks for trying it out and uploading a cave with it! Optional cave borders are certainly something I would like to add, though they have lower priority than some of the more urgent features/issues. With regards to the size limitations, I was trying to abide by the Neopets restrictions. I should do some testing to check what the actual limits are.

At the moment, caves cannot be uploaded by normal means, they can only be played using fiddler. so normal restrictions don't really matter until it's fixed (not hopeful)

Imagine a level editor that allowed you to enter your Neopets credentials and then click an Upload button (instead of the Copy To Clipboard button) that uploaded the cave for you. I have no idea if this is possible, but I bet I could replicate the Fiddler workflow programmatically so that the user didn't have to do anything besides clicking a button. I've not done Fiddler uploading before, so this is something I will investigate. May be tough to pull off, but would be a really cool feature. Uploading without needing an uploader page open...

And what if I could embed the HATPC flash file into the CaveGen page? Everything in one place. Mega pipe dream right now, but these are things I am definitely going to look into. Again, maybe no-one will use it and maybe it's all impossible, but for me this would be a really fun project.

Since it's web-based, all you have to do is be logged into your Neopets account, like the upload the HATPC button we currently have on this site. The problem is that the uploader doesn't even work at all currently, from what I hear. I wouldn't exactly recommend asking people for their Neopets' passwords even if you can make it work... I dunno if you can embed HATPC. The best you can do I think is probably to just have a launch button. The problem I think is it will tell you it's not running from its intended location... which is a thing that can be bypassed with that goto frame thing we use for HATIC, but IIRC that only works in IE? The dream, I think, is to somehow implement what we are currently using Fiddler to do, but I doubt that's possible either.

In my mind, if you can play your custom caves via Fiddler, you can do it through a button in CaveGen too. There are many awesome Javascript libraries out there. Shame the uploader is broken - pretty poor of Neopets to leave their old games in a totally broken state like that.

With regards to passwords, I could encrypt them rather than storing the plaintext. I would completely understand people feeling uncomfortable about me storing their passwords in the app - it wouldn't be difficult for me to record their passwords. There might be some Heroku add-ons that allow users to input text that goes through a secure server. Or maybe just open up a direct link to the Neopets login. As a 23 year-old man, I can assure everyone that I have no interest in hacking someone's Neopets account. The source code is all visible so anyone could see if I was grabbing peoples' passwords. I appreciate that it's a legitimate concern though. That said, I can think of numerous applications that I entrust my credentials with.

Embedding HATPC could be an interesting challenge, though I strongly believe there's a workaround for all of these problems. I'm really looking forward to investigating this. First, I will deal with the Undo button though.

EDIT: Google Analytics is awesome. Already I can see how you guys are interacting with the app.  

Actually it might not give you the unintended location message if you use Neopets' copy.

Just read the Fiddler uploading guide. I definitely feel now that an upload button with embedded HATPC could be possible. Still a significant challenge though.

While implementing the Undo/Redo buttons, I accidentally came across a bug in the code where I was drawing a tile to the canvas even if the existing tile was of the same type as the brush. The result was huge improvements in painting performance across all browsers! On my machine, 6-tile painting on huge caves has no perceivable lag. Great demonstration of how it's easy to make mistakes when mindlessly converting C# to Javascript. I'm not sure how close I am to finishing work on the Undo branch, but when it's merged in, you guys should notice a big improvement in performance!

Quick demo of the improvement (more of a bug fix I'd say - the old performance was embarrassing).

https://www.youtube.com/watch?v=XS_ZA00AZjU

Wow, the difference is total. I'm looking forward to try it out soon right after I check out some latest caves done with this tool.

The better performance isn't on the public server yet. It will be released along with Undo/Redo. That is almost done by the way - I will make an announcement when the new version is available.   

Version 1.0.1
HERE
- Undo/Redo buttons
- Improved performance when painting in larger caves
- Terrain images replaced with grey rectangles to make undoing/redoing "generations" faster
- Images slightly reduced in size to make them look better in larger caves

It might be useful to have a grid for blank spaces, it gets really confusing in open areas.

Noted. Thanks!

I think this program is a great start and believe that with more development, it could become the next great cavemaking program.

My only suggestion is that it'd be nice if there was a way to import caves from source code. For instance, if I want to finish making a cave in CaveGen that I started elsewhere.

That's a great idea! That's really not possible with the current way I'm loading  caves. Fortunately, a function for doing this already exists in the code; I just need to add an input box for people to paste their caves in. Thanks for the feedback!

Version 1.0.2
HERE
- White lines between tiles on the cave grid to help users measure distances (as requested by Soccerboy)

This may seem like a really simple change, but it's been my living nightmare for the last three days. I'm really delighted that I managed to solve the problem. The HTML5 canvas automatically applies anti-aliasing to lines that overlap. So when I was drawing lines on large, asymmetrical caves, the white lines were either blurring or disappearing altogether. I tried fiddling around with the size of the tiles and rounding up floating point numbers in the hope of keeping the tiles and the lines separate.

I gave up on that and tried migrating the entire system from the HTML5 canvas to SVG. SVG fixed this problem but brought with it problems with performance and compatibility with any browser that wasn't Chrome. I even tried a hybrid approach of drawing the tiles on the canvas and the lines with SVG.

Then I read that you could draw a line on the HTML5 canvas without anti-aliasing if you set each pixel individually using a low-level line drawing algorithm. So I used Bresenham's line algorithm to do this and found that this worked, though these new clear white lines were still overlapping with the tiles in some caves. I then converted the size of the borders either side of the cave to integers and this magically achieved perfect separation between tiles and lines.

This looked perfect though the performance was a lot worse than the gridless version of CaveGen. Undo/Redo were unusable so I considered turning the grid off when undoing and redoing. But then, out of curiosity, I tried reverting back to the old efficient, anti-aliased way of drawing lines. And it turned out that altering the borders was the solution all along. So I've put the Bresenham function aside for a rainy day and now have a fast, perfectly-aligned grid drawing function! And as a side benefit, large, asymmetrical caves now look much neater.