Project link

This map preserves the past and the present. By generating seeds of fire before their eruption in a never-ending forest, the map reflects how memories overlap and intertwine to create new versions of ‘places’ in our head.

Technical Process:

From the start, I knew that I wanted to create a level of depth in my map through overlay of elements. After scouring through some videos online, I decided to manipulate and repeat variations of recursive circles. By randomizing the distribution, color, size and other elements, I was able to convey a sense of dreamy haze that come with remembering an event and the place.




This is a terrain generator which generates random terrains with different levels of heights. It also generates two types of trees of various sizes with random positions on the terrain.


I was inspired by this dynamic webgl example and decided to create a static version. I first created the terrain using PlaneBufferGeometry and displace the vertices of the plane randomly when generating different results.

Then I used the positions of the vertices of the plane to place the trees onto the terrain. I decided to use a set number of trees but tweak the sizes and dimensions of the results. Each type of trees has its own set of positions and is regenerated when space bar is pressed.





Cirlrea is a uniquely shaped world where important landmarks are marked by filled in circles and the surrounding circles represent the elevation. Unlike Earth, Cirlrea was once a planet covered in moss-green water. The landmarks are all manmade and they house what is thought to be the last pockets of humanity. 

Initially, I wanted to create a map that could mimic the look of train maps typically seen in brochures and underground train stations. However, I quickly realized I had to add a lot of constraints so the look of the train lines would be aesthetically pleasing. The final product was inspired by contour maps. I liked the look of rings around a filled center and while I tried with other shapes, I ended up liking the look of circles the best. I didn’t want the map to represent earth, but I did want the overlapping contours to create the feeling of land masses. I used a nested for loop to determine how many circles I wanted and another to determine how many rings would be around the respective circle. The rest was just choosing colors and numbers to increase the diversity of circles. 



Generative Map


I tried to represent an abstraction of motion and forces as the territory of my map. I wanted to explore how motion and forces could be depicted through the overlapping and overlaying of circles. I found that overlaying and creating circles within circles could generate a ripple effect, seen in how earthquake magnitudes are represented on maps and diagrams. My focus was on generating ripples, where ripples could be generated in a way that will still read as a map of motion and.

Technical Process:

One of my inspirations for creating the large circular discs were earthquake maps, where multiple circles are used as ripples to simulate the earthquake magnitude. Using circles, I created a map where the overlaying of vibrant circles creates an abstract sense of motion through ripples, along with a sense of sound due to the composition of the ripples.




About the Territory

People living and traveling across the outer space might not just a fictional story. If traveling to space becomes just as easy and fast as traveling to another country around the Earth now, what would the map of the universe look like? There would be more things to keep track of to locate oneself, potentially much more than our current 3 dimensional location and time.

Technical Process

From selecting colors, location, and shapes to selecting names for each planets, I used randomization to almost every element in this project. I had three different for loops generating planets of different sizes to create well-spread depth of 3 dimensional space, yet one thing I wish I could do was creating the planets closer to the window(i.e. bigger) to be 3D, not flat like in the current state of the project. Perhaps the mixture of 2D and 3D looking planets could have contribute more to creating an experience of looking at an unknown, abnormal map of an unfamiliar space. In terms of time dimension, I came up with a fake time counting system All Universe Time (AUT) and randomized a number, as well as the +/- symbol, to mimic our current time counting system(GMT+/-, UTF+/-,etc.).


Generator Gif

Generator Screen shots



Territory description

This is a nebula generator.  It generates a random number for the nebula name and the celestial bodies populating it: planets in the foreground, stars in the background.

Creation Process

To make this generator I looked through the p5.js documentation pretty carefully.

First I made the background of stars:

then I added some random colors for the stars:

then I added the planets as ellipses and the rings

then I added the color randomization  for the planets, and converted them to spheres.

finally, I added the randomization of the rotation, converted the ellipses to spheres, and added the text.



Map to Happy Time with Friends Again :~)

gif of generated maps

It’s better to have loved and lost than never to have loved at all—isn’t it better to have searched for paradise and failed than never to have searched at all? I miss my friends & their friends & having fun with all of them :~(

The destination is placed randomly and the rocks and bushes and trees and whatnot are generated around it with bezier curves. The path then curves from some random direction at the edge of the map to where all of your friends are, with some variability along the way so you can enjoy your journey <3. The land’s features are vague enough to correspond to some actual place, if you look hard enough ;~)


~Sweet Corn



Distant Planet

Looking through your amateur telescope, you can’t see much. The hills and valleys seem to stretch on endlessly. Nevertheless, you diligently mapped everything down, and looked harder for signs of life. 

Map more wasteland!


1.) basic isosurfaces from “islands” 2.) set thresholds so it looks more like topography maps 3.) dynamic coloring base on height 4.) further tweaking of variables

I wanted to create a topographic map, and I happened to stumble on this tutorial which I thought could be used achieve the effect I want. The “islands” are generated at random locations on the map, with a random size and height(shown in yellow circles in  1-2). The color of each pixel is then evaluated base on their distance to all islands and the height of that island, and I specified thresholds so it appears more like “levels” of land . At last, there’s some randomly generated coordinates and map legend drawn.

Although my original intention is to create like an “island on ocean” kind of map, I really liked the black and white color scheme and stuck with it. It reminded me of pictures of the moon’s surface.

More Pictures:


Toad2 – Map

 Road Maps to Nowhere

Link to Code

For this project, I created a road map that leads to nowhere and that the user could never reach. I wanted these maps to feel as if it the user was had opened up Google Maps while on a road trip.

These maps were created by creating jagged lines that mimic roads and rivers by drawing short line segments that varied in size and direction that began where the previous line segment began. As each segment is drawn there is chance that a white marker is placed as well a chance a completely new branch would be drawn from the current point creating a split in the current jagged line being drawn. I increased the probability that rivers would branch in order to better mimic how rivers move. Additionally, I also randomly varied the thickness of each river tributary to to make the rivers more river like.


Generating in Action

Selected ScreenShots

Brief Paragraph About the Territory

My imaginary place is how I currently perceive myself. It is dominated by contrasting colors, ambiguous shapes, and undefined labels. Around the blended vibrant colors, there exist rigid lines holding back the circles that are on the edge of merging with the unknown.

Technical Process

From the beginning, I wanted to experiment with cartography, especially with the placement of labels. Therefore I focused the majority of my time on generating arbitrary terrains and orienting letters around it.

For my terrain generation, I utilized the Marching Squares algorithm to generate arbitrary sections with weighted vectors.

Problem 1: Orienting Text on a line 

To orient the text, I took the dot product of the vectors and centered the text on the first vertex.

Problem 2: Collisions

The labels like the collide, and even when they are single-letters (used longer letters to demonstrate the problem). I approached the problem from two perspectives: controlling the number of labels on the map and detecting dark pixels on the screen. Both of the methods have their challenges such as hardcoding values and layering of visual elements. To be fair, I am not confident that they completely do not collide at all, and it would be an interesting problem to solve if I continue the project in the future.