Metropixeland

As digital beings, we have been playing, working, making friends in a virtual world for many years. Metropixeland is a vibrant metropolis where our pixels can live in peace.

And it’s animated

Pictures in this document are screenshots taken on different development stages. Final look may be slightly different.

The idea

The goal of this project was to make a representation of our digital experiences. Something that reminds the old times playing games or meeting friends online. A city or neighborhood could be a nice metaphor for this.

Aesthetics

Once the idea was roughly defined, I started thinking on aesthetics. I wanted to made some sort of ‘visual toy’ that was funny, vibrant, classic, and connected with our digital memories. A retro-ish aesthetics would fit well with those feelings. The isometric perspective is a must for this kind of stuff.

Also, I was looking for a modern look. No need to use big pixels. Found lot of inspiration on modern voxel art.

Here’s some pictures (not my designs) that have been a source of inspiration to help define the final aesthetics of this project.

Procedural architecture

For a long time I have been exploring different techniques for creating procedural buildings.

In the past I made some projects for 3D printing like ‘procedural buildings, skyscrapers, space cities‘

That was cool but for this project I wanted to create a small world filled with a many procedural elements dancing together.

Made with Javascrip + three.js. All elements are build by code. No external images, fonts or other resources.

Devlog

Evolution from early stages to current state.

Squares and Buildings

Everything started with a recursive subdivision for defining the squares and a custom algorithm to create random facade patterns.

Subways

Added underground levels with trains.

Sewers

Randomly placed groups of sewers on underground levels.

Decoration

Underground rocks and neon panels

Some extra decoration elements.

Trees

Yes, some trees.

Trains and Monorail

Chooo chooo

Parks

Fill some squares with some sort of ‘mazey’ parks. Using a recursive bactracker for mazes and/or a variation of “10 print” algorithm on some squares.

Traffic

A bunch of cars and trucks (and sometimes a red bus) wandering randomly across the city.

Traffic level (number of cars) is random for each generation.

Traffic can be right-handed or left-handed.

A Random-walk algorithm has been implemented here. When a vehicle reach a cross, it chooses between following straight or turn a random direction (or turn back if it’s a dead end).

At this point I considered breaking the ‘deterministic’ rule and used the infamous Math.random() for choosing the direction of cars.

This adds a very subtle non deterministic element that is hard to notice but even for the same seed cars move slightly differently.

More stuff

You may have notice some of this elements in pictures above (or not) : Helicopter, Diamond symbol, Light columns, Mint number sign.

Day Cycle

Day cycle determines the background gradient and a subtle global lightning.

The day cycle will run through the entire collection, Morning-Day-Evening-Night. Depending of the number of mint.

Clouds & Northern lights

Using a GLSL shader, added some animated clouds (by day)  and northern lights (by night).

Variations and rarities

Some elements and details that are uncommon.

Rainbow Train

London bus ‘Routemaster’

Traffic can be left or right handed.

If traffic is left handed, there’s a probability of spawn the classic red London Bus ‘Routemaster’

Light columns

Only appears by night on these ‘pyramid-like’ structures.

Pink trees

Some trees are pink!

Sakura Trees

Sometimes trees are white/pink. Inspired by Japanese sakura trees.

Elevators

Elevators may appear in tall buildings. Moving up and down, they add more dynamism to the scene.

Rainbow City

You may get ‘rainbow’ buildings. Color mix looks weird, not sure if it’s nice but added this feature as a ‘rarity’ that could make some collectors happy.

Others

Diamond symbols, blinking lights, parks or helicopters do not always happen but they are common. I would not consider rarities.

Color Palettes

Most generations will have a random coloring but there’s a chance of getting a predefined palette with colors out of the random generator range. 

There’s 7 Predefined palettes:

Camera control

Dragging the mouse will move the camera. As the whole point of this design is the isometric view, releasing the mouse will go back to Isometric perspective.

Pressing keys 1,2,3 changes the camera position to a side view. That shows a 2D-render of the city.

Press any other key or click the mouse to go back to 3D view.

Pressing ‘0’ key will swap between sky or transparent background. Just in case you want to take a picture and mix with another background image.

Final thoughts

First time I made something with this aesthetic. I’ve tried different approaches in the past but never had enough good results.

One of my favorite things about this project is the use of a bunch of different algorithms to build the whole city.

There are maze-generators and ‘10 print’ for the parks. Recursive subdivision for the squares of the city, custom algorithms for the patterns on the buildings facades, and more small custom algorithms.

Compared to other projects where I took an algorithm and worked hard on it, this time I feel like I’ve been working on a dozen mini-projects dancing together to create the final piece.

I hope you like it 🙂

Cheers

Fernando

Easter eggs

If you have read this far my sincere congratulations. You deserve some special information about a few hidden elements.

Text City

There’s a hidden city in each piece. Open the browser console (F12 or Ctrl-Shift-J in most of browsers) and you will see a procedurally generated ASCII-art city unique for each mint.

Also there’s some info about the piece such number of mint and population (calculated depending of the density and size of the buildings)

Ground and Sky

The design adapts to different screen formats or window size. Vertical formats lets you see more things over and under the city.

Changing the window format to a vertical bar, you may see a ‘ground’ and a sun (by day) or moon (by night) in the sky.

Hint: Open the right tab and drag to the left

Tha’s all folks. Have a nice day.