LINKS

• The video version: https://www.youtube.com/watch?v=MLvLA0QTLmg
• fxhash page: https://www.fxhash.xyz/generative/23706
• Source code: https://github.com/revdancatt/Dub-Be-Good-To-Me
• Buy prints: https://shop.revdancatt.com/collections/dub-be-good-to-me

I wanted to give a little explanation for my “Dub Be Good to Me” project, as I know people sometimes appreciate getting to understand the thinking behind a piece of work.

This is not a complicated project, it doesn’t it need to be, and it uses some simple compositional tricks I thought worth highlighting. ‘Cause often you can see two different projects, and for some reason one seems to be more successful or popular than the other and it’s not always obvious why. And when people start with generative art and the random element of it they often apply the randomness evenly across everything. While people who’ve studied art or just have a natural aptitude for it tend to shape that randomness and use traditional, well established rules of composition.

So, this is what I did for my project, again theses aren’t complicated, that’s the point, but they are intentional and there’s three of them.

The first is making sure the artwork has a background and a foreground. The background is supposed to be functional and act as the foundation, the foreground has your points of interest. This project is made up of four layers, two background layers and then two foreground layers.

The background layers are made from these scenes, twenty-four retro futuristic interiors, shown here.

And 24 outdoor landscapes. How these came about I’ll cover in a bit.

This is how those backgrounds layers are built up, first one indoor scene is picked at random. Then we select a number of triangles to take from one point and randomly place on another point, flipping them if needed, so you may take a pointing up triangle from one place flip it into a pointing down arrow somewhere else.

Here are some examples.

Which already have a nice feel to them.

Now we randomly pick a second layer from the outdoor landscapes and again take some triangles from that landscape and place them in random positions on the background. Like this...

And that is the foundation of our artwork, bringing us to our foreground, and for that we’re using portraits. The great thing about faces is that our brain loves faces, it can pick out a face from miles away, even faces when they’re not really there. Here are twenty-four faces that I’m using.

This isn’t like a cheat code I’m using here, but it kinda is. I want you, the viewer to see the whole piece, then recognise elements in it, like an eye, chin or mouth. Once you’ve seen one part then you start to look for other parts, then your brain is kinda trying to solve a puzzle, giving the artwork some energy, and triangles are an energetic shape too.

A couple more tricks here for the third and forth layer. Now, I’m no expert on portraits of people’s faces, but the most interesting parts tend to be in the middle, and besides we already have our background.

So for the third level, when we pick where to take triangles from, we’re going to favour the middle, and then place them all across the image. I’m going to remove the background and show just the third layer.

Now let’s put that onto our background.

Fourth layer, same again, but this time we take with a bias towards the middle and put with a bias towards the middle too. Again, showing just layer four with everything else removed.

And everything all in together, gives us…

That’s the compositional layers, now the second thing…

STYLISTIC DESIGN

This is straight forwards, I’m keeping a relatively consistent style for all the layers. These layers are of course all created with Midjourney. The prompt I was using was roughly this…

1960s cinematic futuristic interior architecture photo taken by ARRI canon fuji kodak, incredibly detailed, sharpen, details, professional lighting, film lighting 35mm anamorphic lightroom cinematography, depth of field, bokeh

With a couple of small variations to control the colour palette, I'd drop in words like prismatic, or vaporwave. The outside landscape was the same, but using phrases like “american landscape” and “bright, sunny, colourful”. Those were both from the 60’s. Meanwhile I got the type of portraits I wanted from the 80s, I tried the 60s, wasn't right, 80s was perfect for the vibe.

1980s cinematic american portrait photo taken by ARRI canon fuji kodak, incredibly detailed, sharpen, details, colourful, professional lighting, film lighting 35mm anamorphic lightroom cinematography

A couple of reasons for doing this, the consistency I mentioned before and the fact there’s no copyright on the images, they're AI generated, I’m free to use them. And in fact anyone can take the images from this project and use them themselves, and assuming they’re not copying my code, whatever they decide to do with them will look different to what I’ve done, so that's neat.

I also haven’t named any specific artists or photographers, I’ve based the prompts I’ve used around things like cinematic and lighting, 35mm and film, and so on. So I feel pretty comfortable using them.

The third thing I’m using, is…

COLOUR

Even though source images have this shared stylistic look, I want to use colour to both add a unifying layer over the image while also give different pieces more distinct looks. Most of the time they’re these warm colours, but sometimes we go towards stronger reds or yellows, pulling in blues sometimes. So while this piece looks consistent it's different to this piece.

For this I’m using two processes, first a tint, and let me show you using just a tint.

And sometimes I’m using solid colours, here’s some with just solid colours.

In the project itself, I use a mixture of the two, although sometimes it favours more one way than the other, we’ll see where it’s doing that in the code section.

As a general rule about 20% of the triangles are coloured or tinted. Sometimes though we’ll go into “colourful” mode which affects all of them.

That’s nearly everything.

BITS AND BOBS

A couple more things I wanted to cover. The first is the selection of how many triangles are going to be used, which is how many rows down there are. I found when going through outputs when I had a full range, I really liked the ones at the lower end of the range, and the upper end of the range, but the ones in the middle were kinda, meh. Also it meant there wasn’t an over all character for the project, it could be anything. But by cutting out the middle then you had more of a distinction between the high notes and the low notes in the project.

The other thing is that some of the time I’ll switch the two background layers, so instead of it being an indoor layer with some outdoor put on top of it, it’ll be an outside layer with some inside put on top.

That’s to add some more variety, it’s not obvious, but then it’s not supposed to be ‘cause it’s the background, but you have that undertone there, the base note if you like.

Also, sometimes, we’ll swap the background out and use a face instead, which gives the whole thing a different vibe.

PRE-CODE WRAP UP

So there we have it, an overview of what’s going on in the project and the decisions I made.

Like I said, it doesn’t need to be complicated, you can take a simple strong rule and figure out how to apply it. The trick is of course to think about your own and try to be intentional about what decisions you’re making and why. Do they work together or against each other. Do you have too many things going on at once and if so how can you regain balance?

If you want to stick around for some code, and I’m not going to be going in that deep, just picking out the bits that relate to what we’ve already gone over, then stay here. If not, now’s a good time to bail, thank you for following along.

CODE

Okay, code time, again not too intense, just showing where things happen.

This snippet of code here is what we were talking about when picking the number of triangles to have, we’re going to pick a number from 0 to 3, then most of the time add 6 to it, but 25% of the time we’ll subtract that from 18 instead. Giving us either 6 to 9 rows, or 15 to 18 rows, but none of the middle stuff!

These next two bits of code are picking the index number of each layer to use, one for the inside, one for outside and two faces. The bit just underneath is a 20% chance to swap the inside and outside background, and a 14% chance to use a face as the base image instead.

Jumping right down to the bottom of the code is a function that’s being called on an interval timer, triggered in the index.html file. We don’t want to load in all the images, we only want to load in the ones selected at the top of the code.

This create four image elements, which are then told to load in the selected images, each has an onload event which sets the fact that it’s loaded to true. The function keeps getting called until all four image loaded values are set to true, at which point it’ll kick off the rest of the code which’ll draw stuff.

Next up we’re going to figure out which triangles we’re going to swap, we loop through all the triangles, checking to see if we’re going to swap something into them. If we are going to swap something into the triangle, we randomly pick which triangle we’re going to copy from.

Looping through all the triangles and working out if we wanted to swap into them was a simplified way of doing things for the background.

When it came to the foregrounds, because of how we wanted to control the random placement a bit more we did things slightly differently. I decided I wanted about 10% of the triangles to be pulled in from the first face, that’s what’s happening with the `subset1` value.

The rather convoluted `fromIndex` line is used as a way to bias the selection of the from area to the middle of the image, where the face features are most likely to be.

The easiest way of thinking about this is like throwing two normal six sided dice. The most likely result is to score seven, because there are six ways to get that value, one plus six, two plus five, three plus four, four plus three and so on. But there’s only one way to score two, or twelve (one plus one, and six plus six).

If you roll those two dice, add them together and then divide by two, then your lowest value two, gets divided by two to become one, your highest value twelve, gets divided by two to become six, and your most common value gets divided by two to become three point five, you know, in the middle. And that value in the middle is the one most likely to turn up, while the ones at the high and low end are less likely.

We’re doing the same thing here, we’re not picking a random number anywhere within the range of `trianglesPerRow`, which would be spread evenly, we’re rolling randomly on `trianglesPerRow` twice, adding them together and dividing by two, thus picking in the middle.

The stuff with `-4` and `+2` is to avoid picking from triangles along the edge at the two side, which don’t give us complete triangles, it’s a bit of a special case for this design.

The final layer is very similar, but we’re using that technique on both where we’re taking the triangle from, and where we’re copying it to. Again focusing on the middle.

The last bit of decision making is all the palette stuff, you can see the code here…

Very quickly, that’s picking a random palette. `features.colourful` has a 15% chance of being set. This is a bit of an odd way to do things, but it allows me to set the human readable features on fxhash easier.

`subset3Mod` is being used to control how many triangles should be coloured in, by default it’s 20% of the triangles, but if colourful is true, then it’s 100% of them.

`features.tintVsFill` is how likely each triangle is to be either tinted or filled, fifty/fifty (0.5) is the mid point, but we can shift that closer towards tinting as we move towards 0.333, or filled as we move towards 0.666

That’s it for decision making, all that’s left is to draw in the background image, and then throw all the triangles around, which is fairly simple.

It probably looks more complicated that is it…

…we’re basically making a clip mask, where we want our triangle to be. Then we’re using `drawImage` to copy over a rectangle from the “from” location, to the “to” location, but only the area inside the triangle clip mask will appear. If it’s flipped then we use a transformation to, well, flip the canvas, draw the triangle, then flip it back with a restore.

And that, pretty much, give or take a little is how everything works.

I hope that was interesting and now you understand more about the project, this was fun to do, I’m going to try and do one for each project I do. I have some catching up to do for the old projects and I’ll try and keep on top of it for future ones.

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