This article accompanies the project: Vents by @revdancatt

A couple of weeks ago, Bruce, a.k.a. @Studio Yorktown released "Studio Yorktown Color Town Hall" a library of wonderful colour palettes. They are very suitable for generative projects and tuned over the years to work together.

Sometimes bringing a project into existence is hard work; nothing seems to work. Other times everything hits you just right. For "Vents", it was the latter and a combination of several things; I'd been listening to the music of Antarctica (again), their album 3.377083333333333/81.03 (Spotify, YouTube) has always stuck with me, at the same time I'd been studying Brutalism for my own projects, and I'd also recently revisited Tyler Hobbs' project "Wall". I was on an architectural kick.

I was thinking of cold metal, sharp edges and texture, but all in the scope of my current projects. But when I saw Bruce's webpage with all the soft, warm colours, and it being called a "Town Hall", everything came together instantly and fully formed.

"You know what this Town Hall needs?" I asked no one in particular, "Vents!". Besides, what's more Christmassy than a good old vent?

The process was swift, and I'll cover some of the iterations here and then the bits I decided to leave out.

Iteration

As I already knew what I had in mind, a grid with "vents" in, it was easy to get started. Grab palettes from Bruce's file and start making squares.

I then quickly added the gradients and inward vents.

Next came the subdivisions and vent sizes. Often with something like this, you'd use recursion; in that you'd make a tile, check to see if it was being subdivided and pass each quarter back into the same function, which decided if it should be subdivided or not, which once again passes each smaller quarter back into the function and so on.

This method is excellent for breaking up shapes into many smaller forms, but also wildly tricky and annoying to debug. If you're outputting data to the console, you kinda get too much of it, and if you're stepping in, through and out of code, it can take a long time to get to the part you want to untangle.

As this was only subdivided twice, I decided to "hard-code" it in a nest of loops and if statements. If I'd gone any further, I'd probably have to rethink that. Generally, you'd want to avoid nesting large numbers of loops or if statements, but as this is for art, and the output is more important than the ongoing maintenance of the code, you can get away with being a little messier and long-form.

The penultimate step was to add levels and a fun "Wireframe" mode. Originally the wireframe was going to be everything, but after a bit of playing, I decided I liked the solid edges and vents more.

After that, there was a bunch of playing around with layout rules, both for the vents, the type of vents and how the "levels" (the sticking-out blocks) are arranged. But I'll leave those to discovery in the outputs.

The last thing to do was tune the outputs and the colour palettes. I do this by adding some code at the end of the draw step, which saves the output image with the hash in the file name and then reloads the page. Leave it running and it'll spit out hundreds of images.

const drawCanvas = async () => {

  // ...ALL THE DRAWING CODE HERE ...//
 
  // Download the canvas
  await autoDownloadCanvas()
  // reload the webpage
  window.location.reload()
}

const autoDownloadCanvas = async (showHash = false) => {
  const element = document.createElement('a')
  element.setAttribute('download', `Vent_${fxhash}`)
  element.style.display = 'none'
  document.body.appendChild(element)
  let imageBlob = null
  imageBlob = await new Promise(resolve => document.getElementById('target').toBlob(resolve, 'image/png'))
  element.setAttribute('href', window.URL.createObjectURL(imageBlob, {
    type: 'image/png'
  }))
  element.click()
  document.body.removeChild(element)
}

This does two things. It allows me to plug the hash back into the code to iron out any problem outputs I see. For example, if a blank image turned up or something unexpected happened, I could run the hash repeatedly until I figured out the problem.

The other thing it does is allow me to run them through a script that turns it into a large contact sheet giving me an overview of the output as a whole set.

For example, the image below has 576 outputs, approximating the target of 600 in the final project.

I decided that as much as I love Bruce's palettes, there's no need to use all 83 of them! The selection of palettes is excellent; you can pick any and know they'll work with the others. Perfect for throwing into a project when you're starting. For me, there were too many similar cream/brown outputs. Even though the palettes were different, how I'm using them in this project didn't give them enough unique identity. So I kept pulling them out and re-running groups of 625 outputs until I was happy. You can see progress from the first pass to the final one.

I also threw in a few of my own palettes. You can see the final results in these two images, the first randomly ordered and the second a different set of 625, which are grouped by the palette.

The things left out

There are three things I was thinking about adding and then rejected. The first was circular vents; right from the start, I planned on possibly having the round vents on any "tile" that hadn't been subdivided up.

The second was occasionally adding windows instead of vents. My trip to Hong Kong inspired the layout pattern of vertical columns, where I gathered several photos like this.

I thought having windows instead of vents would have an interesting feel.

The final one was tiny rivets in the corner of each "tile".

I rejected them because I decided that any one of them took the design away from abstract and closer to figurative. The project is called "Vents", but it could just have easily been called "Switches" or "Post-it Notes". The moment I started adding, even more, it flipped from one type of project to the other, and I wanted this one to stay firmly in the abstract camp.

The wrap-up

I'm super happy with where it's all ended up, see it here: Vents

I think they work well as stand-alone pieces or small sets of two, three or four, both on screen or hanging in a room. I found them more-ish when hitting the refresh button, like snacking on candy. When you hit that moment with your own project, you know you're onto a good thing.

I also think they fit in well with the other projects I'm building around the architectural theme.

And with that, I'd better get on with wrapping up those other couple of projects before starting on the next big thing(s), but more about those next year 😁

Please grab one or two, and thank you for a beautiful year on fxhash; here's to 2023 🍾

WHERE TO FIND ME

• 🖼 fxhash - https://www.fxhash.xyz/u/revdancatt
• 🎥 YouTube - https://www.youtube.com/revdancatt
• 📸 Instagram - https://instagram.com/revdancatt
• 🐦 Twitter - https://twitter.com/revdancatt
• 🐘 Mastodon - https://genart.social/@revdancatt
• 💸 Shop - https://shop.revdancatt.com