Realistic Plate Tectonics with Tectonics.js


For some time I’ve had an interest in terrain generation using simulated tectonic processes. I’ve successfully used PlaTec, but it’s strictly 2-d and the output is pretty limited. Another one that seemed promising was pytectonics, but since it froze my system dead, I’m not sure how good it might be(sour grapes and all that…).

Recently, I came across a plate tectonic simulator that runs in javascript on the web browser. Surprisingly, given all the trouble I’ve had with compatibility issues lately, it worked and was reasonably fast. Tectonics.js was created by Carl Davidson, who was also the author of the forementioned pytectonics. I’ve been engaged in a discussion with Mr. Davidson on reddit, and he has been very active and responsive to user suggestions.

The procedure, in a nutshell, will be, first, to create an attractive tectonic simulation, and then, second, to convert that into a decent map.

First, run Tectonics.js at a speed of about 5 Myr/s till the age reaches about a billion years or so. The goal, here, is to give the model time to reach a reasonable equilibrium without spending forever doing it. Slower speeds, on the other hand, tend to produce more attractive results. I’m using the Safari browser, which isn’t all that fast, but my attempts with Chrome, while much faster, also tend to crash out after roughly the first billion years. If your browser has a significantly faster javascript implementation, your computer is a bit less long in the tooth than mine or you’re a lot more patient than me, it could pay off to run at smaller time steps. Although it took most of a day, I’ve made runs at as small a time step as 0.25 Myr/s. For the most part, much cleaner.

From about a billion years, reduce the time step or “Speed” to 1 Myr/s. Run it like that till you approach a desired age, perhaps four to five billion years. Make sure you get at least the last half billion years or so at no more than 1 Myr/s time step. If desired, reduce the speed to around 0.25-0.5 Myr/s for the last few hundred million years.

When you’ve reached the desired time or the map is in a configuration a you find attractive, reduce the Speed to zero to stop the animation. Personally, I consider the Bedrock view attractive and useful and the Plates view is a crucial guide to building your world. The Elevation view is less useful than I’d hoped, but its still helpful. First, make sure that the projection is set to Equirectangular, and the screen is sized so that some black is showing all around the jagged edges of the map. This can take some window resizing and using the scroll wheel to bring the image in and out. It’s self explanatory once you try it. Next, set the view to Bedrock and press p to create a screenshot in a new tab. Save the new tab to a png in your working directory. Repeat this process with the view set to Plates, then again for Elevation. You can also save copies in other modes, like temperature and precipitation, but, as of this writing, those are less useful. The program is currently in active development, so those modes may be more useful later.

It can pay off to save intermediate imagery before you reach your desired time. Sometimes the model approaches an attractive configuration, then, in a fit of perversity, quickly morphs irretrievably into an ugly mess. Perhaps, even if you don’t initially intend to model the geological history of the planet, having maps of the earlier continental positions could be useful later. Particularly, if you’d like to model adaptive radiation of local lifeforms and such, having at least a sketchy history of the world’s tectonic drift could be helpful. I’ll deal with geological history in a later post. For now, you just want to pick out one time point that fits your needs.

Now, import the Bedrock image from your chosen time period to Photoshop or your favorite raster editing app. First, select the black background with the Magic Wand tool on zero tolerance. Next, invert the selection and copy. Now create a new image, retaining the default size, and paste from clipboard. In Photoshop, at least, a New image file defaults to a size just big enough to contain the selected area.

If you’re raster editor doesn’t behave similarly, you can simply Crop the image down till it just contains the map area instead of the procedure described in the previous paragraph.

If you examine your image, now, you’ll notice two things. First, the edges are jagged.

The prepared equirectangular bedrock map.

The prepared equirectangular bedrock map.

Second, the image size is not quite a 2:1 rectangle. I believe these both relate to the fact that the map is composed of discrete cells that don’t conform to the latitude, longitude grid. The easiest way to deal with this is to crop the image down so that the jagged edges don’t show and resample the result to a 2:1 rectangle. This will necessarily reduce precision a bit, but for most purposes it doesn’t matter. You might need to cleanup around the edges to fix shorelines that don’t quite line up. I made an attempt to line up the east and west edges, but they didn’t line up. Instead, I decided to keep the image as it is, use the eyedropper to sample the ocean color, and fill the background layer with ocean color. This works because I could center all the land on the map without overlaps. If it’s impossible to center land on the map such that it doesn’t overlap the edges, you’ll need to connect the land across the boundary somehow.

Now resample the image to a 2:1 rectangle.

The prepared equirectangular map of the tectonic plates.

The prepared equirectangular map of the tectonic plates.

Repeat for all of the output images. For the Elevation, I fill the ocean background with white to represent sealevel elevation. I then invert the image, because I prefer darker values for lower elevations. It’s a matter of taste, though you have to keep track. I also saved a seamask, based on the selection I created to mask out the blue seas. Except for resizing, I took Plates pretty much as-is, because the edge behavior is continuous, so any boundaries across the problem areas would be a work of imagination.

The prepared equirectangular elevation map.

The prepared equirectangular elevation map.

The imagery is now ready to be applied to gplates, of course. Each of them will have an extent of 90º N to 90º S, and 180º W to 180º E.

Once you have all that loaded into gplates, you can look at it with a nice graticule, varying opacity, so that you can for, instance, compare plate boundaries to continental shorelines, or a variety of other effects.

The final prepared, separated and inverted equirectangular map.

The final prepared, separated and inverted equirectangular map.

For the picture at the top of the page, I added a photoshop-derived hillshade to give a better sense of what the elevations look like straight out of the box. Photoshop or Wilbur with a judicious bit of well-applied noise could be used to enhance the appearance of the mountains. The vector editing tools in gplates or qgis could be used to mark shorelines, various kinds of plate boundaries, mountainous regions and other data derived from the tectonic simulation. I’ll leave that for a future article. For now, have fun with tectonics!

The Astrographer

This entry was posted in Mapping, World Building and tagged , , , , , , , , . Bookmark the permalink.

3 Responses to Realistic Plate Tectonics with Tectonics.js

  1. Pingback: Tectonics.js - 3d plate tectonics in your web browser

  2. josmile says:

    Have you seen this?
    You could take some ideas from it.

    • Astrographer says:

      I’ve seen Amit Patel’s work on the plane(, but this spherical equivalent is pretty neat. From my limited understanding of Carl’s Three.js and glsl code(really… really limited), it looks like he is doing something similar to segment the crust, but his tectonic simulation TRIES to be a bit more rigorous. I think he does run into some problems due to the complexity imposed by that rigor. On the other hand, Carl’s code deals with the change over time of the map, and should show the kind of puzzle connections like that between the east margin of South America and the western margin of Africa. Other than that, the experilous model might be a better fit for an artistic approach like mine than Carl’s. I’m still hoping for some kind of tectonic vicariance model.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s