My first solo fxhash 1.0 work explores the bizarre world of abstract parking lot arrangements. It is the largest and most complex generative art program I’ve released, written in pure vanilla JavaScript. [The 500 piece set is now sold out but some are available on secondary and every iteration is available for viewing on fxhash.](https://www.fxhash.xyz/generative/13317)

# Concept

My idea for this generative work was to use parking lots as a canvas and automobiles as a brush to explore a variety of arrangements both realistic and abstract. I was interested in how a vehicle can sometimes embody so much life, while other times becoming a sterile abstract shape or even part of an even larger construct. The concept took inspiration from top down driving games like GTA and aerial photographs of parking lots. I wanted to explore these concepts through the lens of generative art.

![Aerial Photograph Reference Art by Adobe Stock](ipfs://QmTpfHaWsuKWnKkgHSgKtZfoM56AQLjGEWTULD52RZko4s)

One of the first things I implemented was vehicle rendering, breaking it down to a simple abstraction that could produce a variety of forms. In this case they are drawn using as few as 3 overlapping rectangles. As the project progressed I added more rules that determine how to generate each vehicle falling into several groups like car, truck, minivan, taxi, and trailer truck.

All of these vehicles need a place to live, so next I build a parking lot generator. This not only provides a backdrop and space for the vehicles to exist but perhaps more importantly implies a set of rules that describe how they should be placed when parked correctly, incorrectly, or in an unusual arrangement. The various rule sets I developed are able to replicate many of the reference photos I found online as well as some more fantastic possibilities. I also experimented with sidewalks and trees but as this project grew, I decided it was best to focus on core elements.

To create the ground texture, first the asphalt is drawn with layered noise and rectangles. Colored lines are drawn on top of this according on the parking arrangement possibilities like if the spots are angled and how many spots each row is. Some spots are marked as no parking, disabled or fire parking. I coded the wheelchair symbol from scratch using a few circles and lines. There are also arrows, numbered spots, and several other parameters that control the complete setup. Finally a layer of grime and road wear is added on top to give it a lived in feel.

Having both the vehicles and parking lot to put them in, I began experimenting with rules for how to place them. First in a very regular way, then once everything was working properly I explored more abstract and playful arrangements. In order to prevent overlapping vehicles I wrote a small polygon collision packer which I had some fun playing around with too.

![Testing my polygon overlap code](ipfs://QmdZJahwiV2fTQQjnkckorAtiMksXsYQT5ubcqRVBJiTUQ)

The project really took on a life of it’s own when I added the “asshole parking” feature which determines how many vehicles are parked completely wrong. As I posted my progress on twitter, people took great joy in critiquing others parking, pushing this project into meme territory.

Of course it’s one thing to make successful jokes on Twitter and another to create great art that people want to own. So I soldiered on and continued polishing the work. Some of the vehicle types were inspired by twitter comments like taxis, police cars, and shopping carts. I wasn’t originally planning on adding so many different kinds but it became interesting to use those special vehicle as a way of defining the color palette.

# Features

I strived to achieve a great variety of results with this piece from realistic to completely abstract compositions. In addition to real world scenarios, I was inspired by some of the other great generative artworks we have seen recently including [Sequence by Hevey ](https://www.fxhash.xyz/generative/slug/sequence)and[ Fidenza by Tyler Hobbs.](https://www.artblocks.io/collections/curated/projects/0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270/78)

::embed-media[]{href="https://twitter.com/KilledByAPixel/status/1524193175610568704"}

One of the special modes called “Dealership” creates longer spaces that can fit multiple cars parked with great regularity. This mode also limits the number of seeds used for car generation to create a kind of rhythm almost resembling a beat sequencer. This particular one also has the shopping cart “Spree” happening which fills in empty space with an army of carts.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::722830"}

Circular and spiral style arrangements are also possible which create interesting abstract designs. Several hidden parameters help to add variety like vehicle orientation and center randomization.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::723287"}

The “Lines” arrangement creates a network of overlapping lines using the same flow field code with a few tweaks by choosing constant angles rather then using a noise function.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::723151"}

One of my favorite variants is the “Military” color style which uses a camo palette and tweaks the vehicle generator to produce battle tanks with turrets mounted on top. These get back to some of my videogame inspirations like GTA and Metal Gear.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::722530"}

The camera height is determined by the view feature with a small chance of a “Close Up". I like how these show off more of the ground detail and abstract vehicle construction.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::723335"}

The "Prism" color style uses a hue gradient controlled by position with some mutation to produce a holographic style color gamut.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::723273"}

Taxis are a color palette in themselves, one of the most iconic in the series because the yellow is so striking. This one also has the lines feature with an extra parameter that causes everything to be lined up in the same direction.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::723028"}

# Rare Features

There is a small chance of some more wild features inspired by bugs that occurred during development. I noticed that if the collision test code was disabled, it created some amazing abstract results due to the many vehicles overlapping. This one also has inverted color feature, making it one of the rarest in the set.

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::723171"}

The rarest feature is an entirely empty lot, there are only 3 of these in the entire set!

::tezos-storage-pointer[]{contract="KT1U6EHmNxJTkvaWJ4ThczG4FSDaHC21ssvi" path="token_metadata::722957"}

# Results

There are so many possibilities with this one, it’s impossible to talk about everything. Here is a 20×25 grid of every single output from the set on fxhash…

![All 500 Auto Parks on fxhash](ipfs://QmZ9aXHDhhYPEs5AEvmGKrwKKg1TyRAPNjZMmi493A6T7v)

This project has been in development for several months and it feels really good to share it with you all. Thank you for everyone who supported the development on twitter and collected on on fxhash. I couldn’t be happier with the results.

As is tradition I will leave you with the first sketch posted an early sketch back in April. Thank you for reading, take care of yourselves, and have a great week.

::embed-media[]{href="https://twitter.com/KilledByAPixel/status/1513974861533790215"}


My abstract parking lot generator is the largest and most complex generative program I have released. Here I will talk more about the background and development of the work.

Auto Park – Parking Abstraction

Written by

Editions

Share

Details