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 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.
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.
For a long time I have been exploring different techniques for creating procedural buildings.
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.
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.
Added underground levels with trains.
Randomly placed groups of sewers on underground levels.
Underground rocks and neon panels
Some extra decoration elements.
Yes, some trees.
Trains and Monorail
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.
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.
You may have notice some of this elements in pictures above (or not) : Helicopter, Diamond symbol, Light columns, Mint number sign.
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.
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’
Only appears by night on these ‘pyramid-like’ structures.
Some trees are pink!
Sometimes trees are white/pink. Inspired by Japanese sakura trees.
Elevators may appear in tall buildings. Moving up and down, they add more dynamism to the scene.
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.
Diamond symbols, blinking lights, parks or helicopters do not always happen but they are common. I would not consider rarities.
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 and 2D projections
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.
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 🙂
If you have read this far my sincere congratulations. You deserve some special information about a few hidden elements.
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.