Category: 01-Map

 

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.

 

 

Cirlrea 

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. 

Link

link2source

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 :~)

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 ;~)

xoxoxoxo

~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!

Process:

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:

 

 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.

CODE