World Map generator for T5

[OjnoTheRed]

I have created a World Map generator that uses the T5 World Mapping rules (page 433 of v5.09).

At present it is little more than a proof of concept: input a world name and UWP and add from a selection of trade codes that can't be derived from the UWP. Then input the number of resource hexes.

Then press the Generate Map button. You can download the map in SVG format. This is a simple text file; you can use a program like Inkscape to edit it or export it as a bitmap, or you can view it in most web browsers.

There are a few things still to implement:

1. Twilight Zone worlds; although the option is there, it doesn't do anything. Yet.
2. Neaten up the format so that the world name and UWP appear at the top and everything is enclosed in boxes neatly in the style of IS Map Form 8.
3. Put some meaningful instructions on the page.
4. Add a map key to each map, listing the hexes used.

I would love feedback. Size 1 worlds were a particular problem.

 

[inexorabletash]

Cool!

The generated continents are a bit triangular. Can you shuffle hexes around the edges to break it up a bit?

Can you expose the random seed as an option, so that deterministic generation is possible?

 

[inexorabletash]

Also, its possible to render SVG to a bitmap in JavaScript in a browser, if you want to expose a "download bitmap" button for users without Inkscape. Let me know if you need any tips.

 

[Ulsyus]

As a proof of concept, this is great! As inexorabletash mentioned breaking up the giant triangle continents would be good, as well as having smaller land masses of varying sizes.

Are you able to add the legend in down the bottom?

 

[OjnoTheRed]

Thank you all very much.

Yes, a key / legend is definitely on the to-do list, but the symbols used are all directly taken from p. 431 of 5.09. The colours are mine.

I'm new to SVG and graphics in HTML5; this project was partly about learning how to use SVG by working my way through W3Schools tutorials and getting some extra help from Google.

So I'd LOVE tips for converting SVG to bitmap - more options for the user is always good.

The generator just uses javascript's Math.random function buried in a couple of functions that output dice ranges. As far as I know, it's not possible to select the seed used in javascript; but on a quick google I see developers have made their own libraries for pseudo-random generation that can be seeded. I'll have a look into it; any tips gratefully received.

The triangular continents are a result of literally applying the T5 rules as written:

Randomly select Hyd x 2 Triangles as Oceans. Consolidate Ocean Triangles that share sides. Enclose Oceans with Shore lines (which may run through any type terrain). Non-Ocean Triangles are Continents (they are not consolidated; treat each Triangle as a separate Continent).

I'm pretty sure what any world mapper would do is trace wiggly coast lines or shift a random number of hexes. So, yes, that's also on the to-do list.

Interestingly, a number of 'sea' hexes equal to hydrographics are also placed randomly on 'continent' triangles which already break it up a little. The results are most pleasing around sizes 3 to 5; at size 6 the triangular shapes become obvious again.

There are a couple of approaches to breaking up the triangles. One is just placing a random number (e.g. Size plus Flux?) of one-hex seas in land continents and an equal number of land hexes in oceans. A second might be to make ocean construction start in the middle of a selected triangle and place an ocean hex; then select a neighbour at random and place a hex; then select a neighbour of the new group at random and place a hex; and so on until the number of hexes in a triangle of that world size is reached (trivial to calculate).

A long term goal is to have MegaTraveller World Builders' Handbook level of detail built into the output.

The second looong-term goal is to be able to click on any given world hex and have a world hex generated for you; then click on any terrain hex in that world hex and have that generated for you with beast encounter tables; then click on any local hexes and have them generated for you.

Lastly, because the world map scale is calculated based on size, there is theoretically no limit to the size of the input world. This will make it possible to "map" a gas giant for a bit of colour.

 

[OjnoTheRed]

inexorabletash - am I right in thinking are you the genius behind TravellerMap?

I have set up my world object to be able to read a T5 string based on TravellerMap data, although to my disappointment discovered that AJAX between servers doesn't work on the client side. Hence a simpler user-input to get it working.

Any chance of integrating the generator into TravellerMap? It's all client-side HTML / javascript. That way a user could choose a world and get a map - admittedly non-canon.

 

[inexorabletash]

I have set up my world object to be able to read a T5 string based on TravellerMap data, although to my disappointment discovered that AJAX between servers doesn't work on the client side.

It should work - I'm serving up CORS headers to allow cross-origin requests specifically to enable this. (jsonp is also supported, though it shouldn't be necessary in any browsers in use today). Other people have sites that have this sort of integration.

Email @gmail.com and we'll get it sorted out.

 

[inexorabletash]

So I'd LOVE tips for converting SVG to bitmap - more options for the user is always good.

I put a sample together at: https://jsfiddle.net/Ltmmqc94/

The generator just uses javascript's Math.random function buried in a couple of functions that output dice ranges. As far as I know, it's not possible to select the seed used in javascript; but on a quick google I see developers have made their own libraries for pseudo-random generation that can be seeded. I'll have a look into it; any tips gratefully received.

Yes, that's what you'll need to do. For some of my hobby projects I use this one:

https://github.com/inexorabletash/jslogo/blob/master/logo.js#L207

 

[infojunky]

A A for presentation, though the core obviously needs some work.

Some noise in Hex assignment is obviously necessary.

 

[OjnoTheRed]

Thanks! I've also just realised I need to read up the API doco you put up on travellermap.com. I'll work my way through that before e-mailing questions.

If you don't get questions, watch this space! I'll post updates.

 

[David Johansen]

Okay, that's awesome and will be seeing a lot of use!

 

[OjnoTheRed]

Thanks David!

Inexorabletash - I had more of a play with AJAX and got it working downloading sector data straight from travellermap.com. Your documentation is superb and makes it really easy for hobbyist developers like me. The problem was entirely at my end (PBKAC as they say) - and now I'm starting to understand AJAX better. I think I'll be OK, but thanks for the invitation to send e-mail. You might still hear from me.

 

[OjnoTheRed]

First update!

Two major improvements:

1. User can automatically select a world from the OTU drawing on travellermap.com data.
2. User now enters T5 world data more comprehensively - or they can modify what is loaded from travellermap.com data

The website layout has been generally improved and I have started a simple change log and 'wish list'.

 

[inexorabletash]

It works in Firefox, but in Chrome the second XHR (to fetch the world names once a sector is selected) is failing. It looks like a combination of the sync XHR and the redirect to https. If I modify the script locally (either do an async fetch or use 'https://travellermap.com/...') then it works.

You should switch to async fetches, and use https://travellermap.com URLs regardless.

FYI, this is https://crbug.com/68105 - Chrome has had this behavior since at least 2010. No plans to fix (since sync XHR is vile anyway)

 

[OjnoTheRed]

Thank you! I went with synchronous because as I started playing around I wanted things to load before moving on. But obviously that's causing further problems.

A user on Facebook also flagged the select-world not loading in Chrome. I'll explore further and put out another update.

 

[pendragonman]

Thank you! I went with synchronous because as I started playing around I wanted things to load before moving on. But obviously that's causing further problems.

A user on Facebook also flagged the select-world not loading in Chrome. I'll explore further and put out another update.

Interesting. I only use chrome and had no issue with the planet selector. As a test I picked Spinward/Anduril and it worked fine.

Perhaps there is another related issue? Operator has an add on that is not compatible or ad-blocker exception?

 

[OjnoTheRed]

I posted an update earlier today in line with inexorabletash's guidance above; Chrome users will have no problem now (I've tested it on Chrome).

I found that asynchronous requests do not result in the drop-down menus being filled. I'm not sure if that's an issue with the way I've written the code: basically, once the ready state & status are fine, the text of the document is returned by the loadDoc function into a variable that is then analysed. So, for now, requests remain synchronous, but the URL update to https: has fixed things for Chrome users.

 

[OjnoTheRed]

UPDATE: Map key now generated for each world.

 

[sfchbryan]

This is great!

I look forward to seeing it grow.

 

[OjnoTheRed]

This is great!

I look forward to seeing it grow.

Thanks! Now that the grunt work of rendering the hexes is done, it will be easier to update in pieces.