How to Make Mountains Memorable With Perlin Noise

Written by JohnDavidFive | Published 2018/04/29
Tech Story Tags: javascript | web-development | webgl | user-experience | education

TLDRvia the TL;DR App

A Tale of Memory, User Experience, and Fractals

Screen shot of applying Perlin noise to Grasp Theory memory island terrain.

Remembering…

I have been building a personal content management system (CMS) called Grasp Theory. I use it to ingest all the books I read or listen to so that I can quickly organize and recall that information.

The goal of the CMS is to provide the best experience for integrating information, synthesizing new information, and recalling information. While researching effective techniques for consuming and remembering information, I came across the concept of the “memory palace”.

Perhaps, you have heard about the concept of a memory palace from Joshua Foer in his TED talk or in his book Moonwalking With Einstein. It’s a powerful tool and is used by memorization professionals to do incredible things like memorize 70,000 digits of PI.

https://en.chessbase.com/post/memory-techniques-memory-palace-from-roman-times-to-today

The memory palace technique involves visualizing a familiar 3D space and then mentally placing objects you wish to remember along a path within it. Because of our brain’s remarkable spatial encoding abilities, the technique makes recalling objects along a path within a memory palace trivial.

Your own house is the colloquial example. You can easily navigate mentally from outside to inside, from room to room, and from piece of furniture to piece of furniture in each room. Your house provides enough distinction so there is a memorable relationship between rooms and enough hierarchy to help the mind transition between rooms and sections of rooms.

Could the memory palace technique be used to do more than memorize long lists of numbers? Could it be leveraged to recall general knowledge stored in a CMS?

Building Memory Island

A content management system needs to scale as more content is added. Likewise, the memory palace implementation would need to scale as well. Ideally, it would have one memory palace for each topic that warranted deep exploration. This meant it would need to support many memory palaces.

The CMS should also make it easy to remember all memory palaces and where they are in relation to each other. Essentially, there needed to be a memory palace for the memory palaces!

Storing buildings inside of buildings might be confusing so I decided that I wanted to bask in the sun on my own personal island. On the island, I could build and organize many memory palaces with a Piña Colada in hand.

https://www.3d-relief.com/Raised-relief-maps--of-the-world/Reliefkarten-USA/raised-relief-map-hawai.html?language=en

The island needed to function just like a single memory palace. It needed enough detail at different levels of scale to accommodate forming groups of memory palaces and perhaps even forming groups of groups.

Additionally, it needed enough interesting features to help orient someone at different scales the same way it is easy to maintain orientation in your own house.

If successful, I should easily be able to recall every memory palace I had placed on the island.

The question became, “How do you make the terrain of an island interesting?”

How do you make mountains memorable?

On the First Day, There Were Fuzzies. It Was Good.

I wanted the elevation profile of the island to help enhance recall of all the memory palaces that were placed on it. I also didn’t want to draw the elevation profile manually so I wanted to generate it procedurally.

If I could generate it procedurally, I could supply a few variables to some code and have it spit out the elevation profile for my island. This would allow me to iterate quickly as I tested the effects of different values for the variables.

The combination of global randomness and local predictability is powerful.

Those already familiar with procedural generation know about Ken Perlin’s invention, the Perlin noise function (and it’s more performant simplex predecessor).

The Perlin noise function generates unique but “locally predictable” outputs. This gives a nice balance of high level randomness with low level continuous predictability.

This combination of randomness and local continuity is so powerful that even Minecraft uses it to generate it’s terrain and caverns.

Here is an image generated using 2D Perlin noise and a 3D interpretation of that image as terrain. This was my initial starting point.

Check out the live demo of this here.

Basic Perlin noise and a 3D representation

This does generate an elevation profile but some work was needed to get more of that island feel and make it more realistic.

Getting in Shape

In order to obtain an island shape, the elevation of the terrain needed to approach sea level as it got closer to the edges of the map. This was easy enough. You can see the code here.

This is what things look like with the island configurations enabled:

Restricting Perlin noise based on distance from center of the island

Mountains to Mole Hills

The island at this stage was a bit boring. Additional detail needed to be added to give the user enough information at different scales to help them orient themselves better.

If I zoom out, I should be able to pick out unique features from a bird’s eye view. If I zoom in to ground level, I should see enough elevation change at a smaller scale to orient me at a lower level.

To frame this problem better in my mind I considered analogies from fractals and self-similarity. Things that have a fractal nature have a “scale free” characteristic. The level of details seems to stay the same at different scales.

https://en.wikipedia.org/wiki/File:Fractal_tree_(Plate_b_-_2).jpg

Trees can be considered fractals. If you cut off a branch from the tree and examine it, it looks, well, like a tree.

There have even been studies on mountainous terrain that assign a fractal dimension to describe it’s scale-free behavior. It seems that using the fractal analogy was the right way to go.

Simulating Scale-Free Terrain

Perlin noise does a great job of giving enough detail for ONE scale. I needed the same Perlin noise effect at different scales.

Naturally, some smart folks already figured out a nice solution. I simply needed to add additional layers of Perlin noise that are transformed at different scales. This is called adding “octaves”. Each octave is a layer of Perlin noise that is scaled by some factor so that it shrinks or expands the detail. Each octave is then normalized and combined.

After I added just one octave of Perlin noise, things immediately started looking better.

Two octaves total giving way to mountains and hills

Turning the Knobs

Ultimately, I ended up layering on 4 octaves that seemed to adequately provide the right amount of detail at each level of scale. It took some time to tweak the scale and the percent of elevation each octave contributed, but the results look considerably more realistic.

Four total octaves gives detail at the macro and micro scales

When you zoom in, you can see the right amount of detail to find points of interest. You can see distinct mountains far away, a few hills as you get closer, and bumps right at ground level. Mission accomplished!?

Detail at many zoom levels allows the user to find points of interest useful for orienting themselves at different scales

Applying the Technique

I applied these simple techniques to my 3D world in the CMS.

Check out the animation below that shows the different scales at which users interact in the Grasp Theory memory palace island and note the application of the Perlin noise techniques discussed in this article:

Implementation using ThreeJS with custom shaders and LOD Terrain algorithms.

Did it Really Work?

My goal was to recall every memory palace added to the island. The initial results here are subjective, but promising.

  1. After placing just a few groups of memory palaces and a few pieces of content in each memory palace, I realized that this approach for me was very effective. You can stop me on the street at any time and I can tell you where on the island every memory palace is and what topic it is associated with.
  2. Additionally, I could draw you a nice picture of what you see when you look out from any memory palace including the minor hills and mountains in the distance.

Quantifying the effectiveness will be something that comes as the software progresses and I’ll be sure to post again. Hopefully, this leads to new and fun ways to enhance education and learning!

Like this Article?

Thanks! Consider giving this article some clappy claps!

Generate Your Own Island!

Check out the live Perlin noise demo and create your own terrain!


Published by HackerNoon on 2018/04/29