Generative Art
Perpendicular Inhabitation
Published : 2023, fxhash, Tezos
Editions : 512
Medium : Code / Generative (JavaScript + p5.js)
Inspired by the colors of faded manga and 80’s Japanese ‘City Pop’ album illustrations, ‘Perpendicular Inhabitation’ generates nostalgic skylines that evoke a feeling of hope and possibility through code.
Selected Outputs
1
2
3
4
5
6
7
8
9
Edition #124
Edition #512
Edition #891
Edition #212
Edition #761
Edition #746
Edition #425
Edition #111
Edition #678
1
2
3
4
5
6
7
8
9
Perpendicular Inhabitation was created with p5.js, a popular graphics library for the JavaScript programming language. Although the final outputs appear three-dimensional, they are actually created on an underlying two-dimensional grid where the building blocks of the building's shapes are constructed by carefully choreographing the direction and order in which these shapes are drawn (as p5.js draws from back to front). The illusion of complex cityscapes can be made possible as such buildings are drawn from right to left and from the top downwards, which is somewhat counter-intuitive to the way buildings are usually constructed. Various facades are created using repetitions of vertical lines, grids of dots, and a variety of geometries and shapes.
The collection’s outputs generated with three types of color treatments:
The first is a natural palette based on the artwork of illustrators such as Hiroshi Nagai and Eizin Suzuki, generating outputs with a somewhat vibrant yet nostalgic and optimistic tones.
The second color treatment randomly assigns a color to individual elements from a selected palette. Whilst the results are somewhat more psychedelic, the variation of colors bring the complexity of the outputs to the forefront.
Process & Development
Thinking process sketch of the method of drawing the main geometry of the building and how to logically and sequentially turn it into a function (process) that can be re-used in a versatile way by the algorithm.
Brainstorming sketch of a helpful process that allows details to be repeated and spaced equally along angled lines. This function became integral to the development and aesthetic of the collection and as such, represents a turning point in its creation.
A sketch trying to think of a way to calculate the spacing, angles and shapes of the various 'segments' that make up each building.
Sketch to brainstorm various facade conditions, such as dot grids and undulating windows.
Rough 'napkin' sketch of potential commercial building designs.
Concept sketch of the first exploration of mid-level sky gardens that would appear intermittently within a building's design.
Sketch exploration of vertical, horizontal and checked facade conditions, as well as one of many development to-do lists!
Exploration of a color mixing process to automatically calculate an appropriate color for sides of the building which are in shade relative to the color of the sky.
Sketch exploring sky and mezzanine gardens, as well as the triangular curtain facade, later simplified for the release version.
Sketch exploration of different potential facade treatments.
Thinking-process sketch of sky garden and roof designs for spacing of each tree and columns..
Development 'To-Do' list and concept sketch brainstorming a process for drawing office blinds, along with how to tackle the coding challenge to create more dynamic facades.
Concept brainstorming sketch exploring the different segmentations to each building depending on type. You may also note the early working title of the project, 'Metropolitan Inhabitation'.
Facade design concept sketch and unused 'hanabi' (fireworks) design.
Development brainstorm to clarify the draw sequence for the buildings.
Development to-do list.
Concept sketch exploring building column thicknesses.
Concept sketch of a possible facade design design.
Sketch exploration of a potential building massing design.
Sketch exploration of a cross-braced façade design.
Sketch of an unused undulating roof crest design.
Concept sketch for rooftop billboards and displays.
Concept sketch of later unused cantilevered connecting segments which would have bridged between two towers of a building, for example.
Exploring potential roof conditions such as billboards, architectural screens and sky gardens. The idea of cranes on top of some buildings had been explored, but was omitted from the final release.
Concept sketch of unused rainbow, airplane and telegraph/electric wire details.
Sketch of unused Hanabi (fireworks) and string light trait concepts.
Sketch exploration of an 'extra-terrestrial visitor'.
Exploration of a potential festival output design which later became the 'matsuri' trait, inspired by the city pop artist Eizin Suzuki.
Exploration of building signage and roof billboards eventually omitted from the released algorithm.
Sketch exploration of potential façade types.
Concept and 'self-feedback' development sketch for rooftop shadings and design, along with general suggestions for algorithm adjustments.
Concept sketch of a later unused flag/banner detail.
Sketch exploration of potential building designs with mid-floor gardens and a variety of roof conditions.
Exploration of roof and sky garden designs.
Concept sketch of roof details, staggered building designs, and cloud details, all later removed from the release algorithm.
Quiet Details
The invisible underlying grid that governs the generation of each output of the output's elements are roughly of the same proportion as the grids in Sabler.
The collection’s palettes are named after popular City Pop artists.
In some outputs, the tail of a kaiju is visible.
Palettes