Category: 01-Map

mokka – where the mouse travels

About my territory: As a kid, I remembered how my parents would always print out a google map sheet for GPS. I utilized that map to manifest my own imaginary world. There were plenty of red, orange, and green dots scattered across each map and I imagined treasures or places worth exploring.

Process: Thus, I made treasure maps for this assignment! I wanted to keep an almost child-like quality to it as I wanted to reminisce about my imagination when I was much younger. I utilized nested loops and played around with the placement of shapes to illustrate a simple landscape and kind of natural-looking dynamic utilizing randomness. I also tried providing information for the user indicating where they start once the canvas is open so that when they “get lost” they will at least know their starting point. This starting point is indicated in the top left corner where both the longitude and latitude are recorded once they start moving their mouse. I did this by abling the code to indicate where the mouse is on the canvas at all times. Also, the user’s mouse would leave a trace of its movements utilizing an ellipse that is constantly being drawn. I incorporated this because it resembles how I would immerse myself by using a pen and tracing how I would explore the world that I had in my hand. Once the user clicks the mouse a new starting point is recorded and the treasure items/areas are reset in a random, new area of the map giving the user a whole other map to explore. Due to the number of shapes I had to make, I also created my own functions to make my code a little cleaner for my own sanity.

via GIPHY

My imaginary world, much like our own planet, has several land masses over a vast ocean. It also depicts several cities with varying populations. The ocean level varies with each generation, allowing for both huge continents and small island clusters to occur.

CODE

Variations of Generator

Process

This map generator creates a 3D terrain using Perlin noise. The map’s scale and ocean level is chosen at random. The points are stratified by whether or not they are below the ocean level. The points below the ocean are colored by mapping each depth to a corresponding HSL color range. I wanted the land masses to look like a treasure map, so I mapped the land points to a specified color range.

The number of cities is directly proportional to the amount of land. I was curious what it would look like if I could raise or lower the ocean level of a given map. If you use the left/right arrow keys the ocean level will raise and lower. The cities & populations will adjust accordingly.

Link to project

Description:
I’m very interested in the structure and chaos of city planning and the geometry that results from it. View from an aerial perspective, there exists symmetry and asymmetry, as well as a lack of identity.

Technical Process:
I chose to use basic shapes that are typically seen when you view grid-plan cities from an aerial view. Artifacts include trees, house roofs, and bodies of water all from three for loops. Each time the mouse is clicked, the city grid layout is always different, but overall, they end up looking almost the same – akin to perceptual differentiation. The colors are generated randomly but limited to certain RGB codes that represent the formal colors of each artifact. I was inspired by my hometown, where our city grid is very visible aerially because of our flat terrain.

Inspiration picture of a city grid plan

https://editor.p5js.org/thumbpin/sketches/QaTaxmeerj

The first time I left Pittsburgh and went back to my hometown, the flat terrain of my hometown was one of the things that stood out to me the most. The territory in my map is inspired by the landscape I grew up in and generic parks in my neighborhood.

To create the organic shapes in the maps, I followed an instructional video that used perlin noise to create blobs. I randomized the location that the blobs would center at and I wanted the sizes and colors of these blobs to vary but still follow some rules. To make the blobs gradually decreasing in size, I set the size of the blobs to a random number within a certain range of numbers. To create a gradient of color changes, I also set the color of the blobs to random colors within a certain range of red, green, and blue. I created an array of words used for parks, streets, etc. in my city and randomly selected two words out of the array to create the name of this fictional place.

About my imaginary map:

Something that is fascinating to me is the idea of fabricating false information to create a realistic person based on specific facts of information, such as names, addresses, coordinates and other identifiers.

This is what I came up with: (LINK TO PROJECT)

Technical process:

To create this, I tried to emulate the randomness of city streets by  iterating through alternating paths with different cases determined by chance so that the structure of the city is erratic, yet slightly linear and organized (much like the Andean city in the image above!). These paths all start at at the origin of where the user clicks, this is also the point that marks the specific location of the constructed person. I also created banks of first names, last names, cities (made up for prefixes and suffixes) to create their random identifiers.