Visible Cities: Workshop Exhibition
On two successive Saturdays this spring, students from IDM and Critlab participated in a workshop organized by A.V. Marraccini and Thiago Hersan called “Visible Cities”. We are both adjunct professors at Tandon, Alex as the Critic in Residence and in art history, and Thiago in a variety of disciplines including creative coding. The workshop started with students discussing the text of Italo Calvino’ Invisible Cities, a 1972 experimental novel translated from Italian, that uses the framework of Marco Polo describing the cities of the Khan’s empire. Our students used the text to ask questions about what makes a city a city, and then used creative coding on other follow-on work to imagine their own cities.
First, we discussed the history of the city in antiquity, from Virtruvius to Piranesi, and compared this to recent generative code works about architecture and urbanism. Students then used the p5.js library to imagine and create terrain maps and environmental contexts for their cities. We then discussed Superstudio, postwar modernisms and architectures, and how to imagine a city that can’t or doesn’t yet exist. Student-artists then used a series of generative algorithms to envisage their cities’ structure and layout. Finally, students used a variety of creative media, alongside written descriptions inspired by the style of the original Calvino texts, to describe their cities. These cities, as imagined by our student-artists are what you see below.
We’re proud of these works from just a provisional workshop format, and hope you will read and interact with them in the spirit of excitement and curiosity with which they were made.
Thank You
A.V. Marraccini and Thiago Hersan
May 2024
Visible City: Americana by Keiani Allen
You do not travel to the city of Americana: you are either there or you are not. The people of Americana know no other place besides the innards of Americana.
Inside its never-ending, confining walls are long aisles, tiled with linoleum, and shelves filled with Things. All kinds of Things. Everything you could ever wish for and want. F00d, sh1rts, sh03s, t0ys, g4m3s, c0mput3rs, b00ks, lam9s, b4gs. All things to consume. To procure en masse.
It’s merely a city of greed.
When you are born in Americana, you are bestowed a cart and nothing more. This cart is your life, your home, your transportation, your safety, and your existence. As you grow and age your collection of Things only grows: you’re wearing every piece of clothing imaginable, boxes upon boxes are stacked within each other, bags wrap around the metal handle of the cart, a mess of wires and fabric lines the bottom on the basket while jars of indiscriminate liquids, solids and jelly-like substances sit on top. Some are filled with food. Others, human excretion. Carts are stacked tens of feet high, towering and teetering - on the verge of falling. It’s difficult to tell where one Thing starts and another Thing ends with the way that each object starts to decompose throughout time, morphing and melding into other Things in the carts, creating Frankenstein’s monsters of the objects the inhabitants “own”.
Once a month, the lights go out. And when they turn back on, the shelves are restocked. The inhabitants make their rounds, sprinting around the store with their carts in hand, to pick up as many Things as possible. Their only goal in life being to obtain the most. They worship the entity that replenishes their Things, not knowing who or what does so.
Eerily cheerful grocery store music blares in Americana, drowning out the squeaky sound of metal wheels turning down every aisle. An inescapable maze of objects, endcaps, and plastic. The downturned, tired eyes of the inhabitants stare forward into their impending doom. Sacks of flesh and bone, mutilating under the weight of all the Things, putrefying and coalescing with the objects they longed for, destined to become commodities on the very shelves they perused for their entire lifetimes, another Thing for the next inhabitant to consume.
NoThing is truly real in Americana.
Devour.
More more more more more More more.
Visible City: Cama by Thao Chi Vu
If you walk down the streets of Cama, your heart will soar with contentment and joy for it is a place that protects your friendships. Every single person that passes by you is a lifelong friend of yours. This city is built on a sense of security and safety. Round buildings, no dark alleys, and lots and lots of breathing space. Greenery and water sprawl out towards the edges of Cama, and every piece and patch makes you want to settle down and converse with a friend on a picnic blanket, or on a quick boat ride. Perpetual spring exists here, but no allergies are present.
Process Description
I was playing around with the algorithms we were going through during our workshop, and the Wave Function Collapse, Updated Queue was most visually interesting to me. Most of the algorithms we looked at looked like floorplans to me, and this specific one felt bubbly, warm and non-threatening, which was exactly what I was looking for to match my city. Then, I imagined what the buildings, streets and waterways would look like based on that floor plan.
Because my city revolves around friendships and staying in touch, I wanted to do something paper-based, as a lot of my friendships have been cultivated through postcards, notecards and letters. The technique of a tunnel book felt like a great combination between bringing in the analog notion of paper, but also infusing depth and perspective that's expected when looking at a city.
[original city map created in Processing and edited into physical form]
Visible City: Claudia by Lorca Yu
Description:
Claudia is a city of clouds in the here and now. Her towns are a 48-hour dataset of the clouds over Brooklyn, making her a city simultaneously existing in the past, present, and future. In Claudia, people practice a religion about time, which is considered the god of creation. Each apparition of time, referred to as a 'refresh,' dramatically changes Claudia's landscape and history. Claudia's territory is defined by the travelers who enter her. A traveler defines the city with their body, with every turn they take, every slope they climb, and every stream they cross sequentially becoming Claudia's new boundaries. Every stop they make becomes a town, named unconsciously on their map. How a traveler shapes Claudia's form is akin to how each look at the sky shapes the form of clouds. Claudia is a product of desire, about how a traveler perceives the world and themselves. Claudia's map is a flattened dictionary, a memoir laid out on a sheet of paper. Claudia is a ruin that is both endless and shapeless, a region that no traveler can truly know or understand. Travelers can only ever walk on the boundaries, for travelers are the boundaries.
Notes on how the code works:
1. Initialization: The code starts by setting up a canvas divided into two sections. The left side displays the image and game elements, while the right side is reserved for displaying words associated with game actions.
2. Data Fetching: It fetches 48-hour cloud cover data of Brooklyn and a list of random words from two separate APIs. These datasets are used to populate interactive elements and display content dynamically as the game progresses.
3. Drawing: The left half of the canvas features an interactive line-drawing game where cloud cover data is represented as points on the image. Players can click these points to select them, and lines are drawn between consecutive points clicked. The right half displays words next to the points as they are clicked, correlating to the sequence of actions on the left.
How to Play
- Hover: When hovering over the left canvas, the code enlarges the pixel under the cursor for a magnified view, which represents the traveler.
- Select Points: Click near the points representing cloud cover on the left side of the canvas. These points are mapped from the cloud cover data fetched from the API.
- Draw Lines: Continue clicking points to draw lines between them, forming connections based on your selection sequence.
- View Words: As you click points, look to the right side of the canvas to see words displayed next to each point. These words come from the random word list fetched from the API.
- Save Art: Press the 'p' key at any point to save your canvas as an image file, capturing your interactions and artwork.
You can change them as you want!
Visible City: The Surface City (Chenyi Wang + Fuguo Xue)
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 end point.
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?
Process
Inspirations
Italo Calvino, Invisible Cities
Ustwo Studio Ltd., Monument Valley
Sukeban Games, VA-11 Hall-A: Cyberpunk Bartender Action
Building Process
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
The tile was a little tricky for our city. 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.
2-Grid Tiles
Below is our 2-grid tile set. We listed all the color combinations as there are only 28 (24 * 2 - 4) possibilities.
While the fewer number of tile possibilities simplifies our drawing and programming, the outcome looks rather mosaic than 3D.
4-Grid Tiles
After trying the 2-grid wireframe, we realized that we need at least 4 grids in a tile as we have 4 colors to fill in. Below is our 4-grid wireframe and possible tiles.
Since 4-grid tiles have 256 (44) different color combinations, we filtered out many possibilities when drawing in Illustrator. Below is a cityscape generated with the 4-grid tile set, which is slightly better than the 2-grid tiles output but still not satisfying.
Color Rules Summary
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.
Back to 6-Grid Tiles
After summarizing the color rules, we 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.
Tile Selection
The cityscape generated with 98 tiles has many complex structures (some are visually confusing) and very few areas of background. We calculated the total amount of each unique edge color choice for right, bottom, left, and top, and found that edges of c2 and c3 color are a lot but those of b color are much fewer. Therefore, we decided to leave out some tiles.
In fact, there are many reasonable/possible, but not necessary tiles. For example, tile 21 and tile 87 can form a pure sky blue section between them, which makes tile 1 unnecessary. If use tile 1, 21, and 87 together, the possibility of having large areas of c1 color (sky blue) will increase. Ultimately, it's an artistic decision to find the balance among the four colors.
Since we want more background and fewer blocks in the cityscape generated with 98 tiles, we decided to leave out many tiles consisting mainly of c2 and c3. The resulting images are clearer and visually simpler in terms of building structures and have more background area.
Visible City: Koilparav Gelmezdek by Caleb Levy
Koliparav Gelmezdek
Koliparav, often called “The Divide” by foreign traders who struggle with the name, is a city of three phases. Founded in the 3rd century FC as a small community, the original portions of the city lie on its western mountain overlooking the valley. The founders, having been displaced by the Predocan-Leicher war in the Western Mountains, chose the higher ground to better be able to view an oncoming invading force, traveling down from the rocky peaks to farm in the more fertile valley below. As the centuries progressed, however, a boom in the cities population, coupled with improved farming techniques, military domination of more productive neighbors, and a boom in inter sea trade arising from the growth of the Kasakt Empire in the south sea led to the farming space in the valley being slowly replaced by dense housing and manufacturing space, forcing the poorer members of the population into the valley to live in what is now called the tower, a facetious reference to the way the lower set section’s street structure’s appearance on the map. In recent centuries, a rising merchant class, distinct from the traditional educated aristocracy and at the center of a cultural conflict engulfing the upper tiers of the city, has begun settling on the mountain on the eastern side of the valley, demonstrating their distinct status by casting off the tradition of sequestering wealth within the bounds of the old city.
Gelmez Steel
The dominance of Koliparav arose from its development of a new form of steel – “Gelmez Steel,” that was both durable and producible at large scale. The greater military strength this enabled allowed them to subjugate their neighbors, and its value in trade made it economically feasible to replace much of their farmland with dense production quarters, allowing for the formation of the Tower.
Tower Barons
Traditional Leitch (a traditionally elite subgroup of the Leicher people, and the ethnicity of those who founded The Divide) culture stipulates that thought is the highest form of production, and places a stigma on those who work with physical items. With the establishment of an entirely Leitch elite culture in the Pravians, there was a need for some members of the Leitch, who as a minority culture were able to maintain nearly all had non-manual jobs in their old society, to take up the roles of farming and craftsmanship. Initially, this was celebrated, with those who took up these jobs being hailed as heroes, sacrificing their individual value for the survival of the collective. Within a few generations, however, this celebration wore off, and soon the laborers were no longer considered to be properly Paravian. When Telamir Manalon created the process of developing Gelmez steel, therefore, he was labeled as an inferior member of the working class, despite his being born full Paravian, leading to his and his immediate family being ejected from the Koliparav upper class, and subsequent move to the then developing Towers. Since they maintained their wealth, however, they were able to establish power in the developing working sector, leading to a powerful pseudo-nobility whose influence remains to this day.
Old City Architecture
Old Paravian architecture is defined by its plazas, in which markets of both goods and ideas form. The plazas are surrounded by large, multi story buildings, in which the lower ranking noble Paravians live in apartments of varying sizes. Richer families can instead have large mansions, whose design is premised on the idea that they should be densely built, without much in the way of grounds, but with many courtyards and unusual floor plans and footprints, often leading to physically close regions of the house being difficult to travel between. These mansions will almost always have one room dedicated to hosting a philosopher whom the family is patroning.
Tower architecture is based on its origin as a farming encampment. Its roads are tightly connected, and although there was an effort made to emulate old city plazas after the Towers became its denizens full time living space, the demands on the space were too high, and the space wound up a densely packed group of mish mashed buildings defined by their irregular leans and patchwork states of repair. The only remnants of the plaza system in the Tower are a few private courtyards owned and controlled by the Tower Barons.
Traditionally, trade with foreign parties was handled largely by the foreign merchants, as buying and selling goods was considered to approach the line of working with your hands by Paravian society. Within the past few hundred years, however, members of the Old City realized they could make significant amounts of money by handling the trade themselves, especially when it came to Gelmez steel. This new wealthy yet somewhat estranged caste left the Old City willingly, forming the Fields on the opposite mountain, accessible only by moving around the Tower. Taking advantage of the open space, these merchants built large estates, with extensive grounds around each house.
Military
The military of Koliparav Gelmezdek is an anomaly in Paravian culture, as participation in it is not seen as disgraceful. Now ancient memories of being forced to flee warfare have made a willingness to fight be considered a necessary trait in a society, even if they still prefer to avoid war and keep their military in civilian reserves. Every Old City male is expected to join these reserves, and each gets a full set of Gelmez Steel. These forces are supplemented with a smaller quantity of soldiers from the Towers, who are allowed to move to camps just outside the old city, but aren’t given Gelmez Steel armor or weapons. Those Towers soldiers who prove themselves especially loyal will sometimes retire to become a police force within the Towers, serving as something of a bridge between the Tower Barons and the government in the Old City.
Process
I started my process with a functionally unaltered version of the default banding noise algorithm — I changed the colors it was producing and the thresholds for each, but that was it. From there I generated maps until I found one that stood out to me (the one on the left). The map reminded me of the Mediterranean, so I decided to use Ancient Greece, especially ancient Athens, as an inspiration. Using the L-drawings algorithm, I noticed that I always got more lines (which were supposed to represent streets) towards the middle, with more spaced out patterns along the sides. This made me think of denser working class districts comparing to more spacious social elite districts, which combined with the mountainous nature of my inspiration in Greece led me to the idea of the Tower.
Once I had the basic premises of the city, I went through and systematically expanded on each element, developing new elements of the story to justify them. I knew, for instance, that I wanted sponsoring philosophers to play a large role in their city, for instance, so I developed the Leicher culture to facilitate that. Finally, I translated relevant descriptions of the place into languages associated with their inspirations and mashed them together
