Project Showcase
Story of The Surface City
In SC, the Surface City, nothing is hidden from the city as all the activities happen on the surfaces of buildings. The city may seem gravity-free and floating in the air from a visitor's point of view. However, to the SC citizens, gravity does exist wherever the buildings are: they can stand on any surface of a building, vertical or horizontal, smooth or rough. They can also go anywhere from anywhere, as long as there is substance connecting the starting and the endpoint.
It is said that SC has 98 districts, but no one has been to all of them. According to hearsay, SC-0 is a void district with no building at all; SC-1, SC-2, and SC-3 are districts with only one plane, where citizens living on its two sides never meet for their entire lives. There are many districts just a little less boring than these four, which are also one plane but with some peaks and valleys.
However, there are some very attractive districts, like SC-39. While having a few buildings and residents, the district has a clean and minimalist style. Citizens in other districts love gazing at SC-39 from far away, just to escape from the complexity/monotonicity of their districts.
The most structured and convenient district is SC-68, with just the right amount of buildings and just the right ways of surface connections. Wherever a citizen wants to travel within the district, there is a way. The buildings are the perfect labyrinth for children's hide-and-seek, but not too confusing to allow them to find their way home.
SC-97 is the most frightening district with many fading ends. Many things seem to be the same as SC-68: dense buildings, countless surface connections, etc. However, there is minimal breathing space; it is a labyrinth that no one can get out of. The best way to survive one has to be cautious enough to avoid those fading ends, which will swallow them into nothingness. Nothingness is different from death; one may be technically still alive in nothingness, but all proof of their existence is erased from the world — even more horrible than death. As the number of people vanishing drastically increases, the remaining residents begin to be aware of this fact and start to panic. A few people also become curious about where those people went, and bring up a hypothesis that the vanished people actually “entered” the buildings. But what does “enter” mean? Isn't everything just directly accessible, right on the surface?
SC-0
SC-1
SC-2
SC-4
SC-20
SC-39
SC-41
SC-68
SC-71
SC-97
SC-?
Inspiration
Italo Calvino, Invisible Cities
Ustwo Studio Ltd., Monument Valley
Sukeban Games, VA-11 Hall-A: Cyberpunk Bartender Action
Production
Our city is built with p5.js coding and Adobe Illustrator. We first used Adobe Illustrator to create tile images, which were fed into our p5.js code for cityscape generation. The technique we adapted is the Wave Function Collapse model introduced in our workshop.
Tile Design
Inspired by the Monument Valley game, we wanted to build a city in 2.5D (two-and-a-half dimensional). Therefore, a standard tile image should be able to show light and shade of a 3D object in order to create a 3D visual effect.
However, the p5.js canvas is a rectangle, which works better with rectangular tiles. Thus we had to find a way to draw polygons with rectangles.
By placing more polygons side by side, we recognize that there is a pattern able to splice and compose polygons. Below is how we find our standard tile wireframe.
The final shape of our tile is a rectangle with six divisions. To create a complete drawing of a cube with shades, we need at least three colors: light, gray, and dark. Since we also want to add a background for our city, there are a total of four colors in our tile set.
Because our tile wireframe has 6 grids, there are 4096 (46) different tiles theoretically. However, there are many possibilities that do not apply to our city's construction as they won’t be able to help form any shapes of polygon that we need. As a result, we need to analyze the possible color adjacencies and summarize a set of rules to eliminate those impossible tiles.
Color Adjacency Analysis
Since there are too many possibilities with the 6-grid tile, we found it hard to analyze the rule for color adjacency and shortlist the applicable results. Therefore, we attempted to simplify the tile wireframe. The other two wireframes we experimented with are 2-grid and 4-grid.
However, However, both the 2-grid and 4-grid tilesets produce visuals that are more 2D than 3D.
Color Rules Summary & Back to 6-grid
The original code restricts two adjacent edges between each tile to be in the same color. Since we are working on a 2.5D effect pattern, there can be more possibilities for left and right neighbors of a tile. Based on observations of 2-grid and 4-grid tiles, we summarize the following set of rules for the intersection of a tile and its neighbor to the right, which should help generate the cityscape we wanted (we mark the background color, light color, gray color, and dark color as b, c1, c2, and c3):
- b can have b or c2 on its right.
- c1 can only have c1 on its right.
- c2 can have c2 or c3 on its right.
- c3 can have b, c2, and c3 on its right.
The symmetrical rules apply to the intersection of a tile and its neighbor to the left.
For the top and bottom edges, the rule of the same color should still be followed as they are responsible for forming a complete polygon.
For example, according to our tile design, c2 and c3 are two different shades of the cube, with c2 representing the left side and c3 representing the right side of the cube. If a c2 right edge has a c2 left edge on its right side, it will connect to form a large left side of a 3D shape; if it is connected to a c3 left edge on its right side, it will form an edge of a 3D shape.
After summarizing the color rules, applied them back to the 6-grid tiles and generated 3D visuals very close to our expectations. We also drew more tiles in Illustrator, and our final 6-grid tile set contains 98 different tiles. Below is a cityscape generated with all the 98 tiles.