The thought process behind the Concord art project

A little bit of scene-setting to start; Concord is a Tezos based NFT generative art project, with 256 pieces released (by me) on the fxhash platform.

I wrote it at a time where my ArtBlocks "80s Pop: Variety Pack (for experts only)" project was around halfway through, and my "80s Pop: Dancerama" print project had just finished. Both projects were quite resource-intensive, both mentally and time-wise. To get refreshed, I decided I needed to go back to a core principle of art, remove as much as possible (and then some more). I needed a sense of peace, calm and balance.

fxhash seemed to be the perfect place to do it, and I started with a simple concept: have some sticks and circles and then remove some.

I will write two versions of this post. The first version (this one) is about artistic decisions, and the second will have the technical code details. Hopefully, from the first version, you'd have enough information to write your own implementation; the second version will tell you how I did it. I'll link to the second one here once I've written it.

A quick note: there's a lot of words here to essentially try to explain the instinctual process of making art, built on all of my experiences to this point. The truth is most of this happens in a split second of "Oh yeah, I'll put something together that feels right". But it turns out that unpacking "that feels right" takes longer than actually doing it. So please don't for a moment think that I figured out all of the below before I started, but rather this is looking back and trying to explain the decisions that I made in more detail than probably went into them.

It should however be enough for you to "read" each piece in the collection, which is somewhat satisfying.

Artistic version.

The first place to start is the canvas, as trivial as this may sound.

The default canvas shape for NFTs seems to be the square. Purely anecdotally, I put this down to people building web3 stuff quickly, and displaying squares in the UI is the fastest thing to do.

And so form follows function; websites show squares because it's the easiest, so the artwork is designed for that shape.

Let's go through a whirlwind tour of art history, photography and web development. First, we have landscape photos and paintings being the predominant standard because generally, it doesn't involve people, and anything not involving people is easier to set up. After that, we have portrait painting and photography. While square format cameras exist, they are certainly in the minority.

Video was, until very recently, almost exclusively landscape in format.

Instagram kicked off the whole square format, partly because it echoed the nearly square form of Polaroid film (the instant film) and because it made throwing together the layout on the website pretty easy, especially as the focus was mainly on the mobile app.

As phones became the primary method for viewing social media and the creators' demands to take up more screen space, the obvious direction was to get taller rather than wide. Something which pains traditional landscape artists as any wide photo now appears as a thin slither across the mobile screen.

All of the above means the visual language that we often speak on the web is now either square or vertical, and the default for web3 seems square. To the extent that we're now seeing the development and demand for square format monitors and digital picture frames.

With all that said, making a non-square NFT rather than the default square is now an intentional act; there has to be a good reason for it.

In this case, I wanted to blend between print and digital; the code I was writing needed to work on both. In addition, as I primarily use a pen plotter and plot onto standard A4, A3, A2 and A1 paper, it made sense for me to use the 1:1.41 ratio in portrait orientation.

I also wanted the digital version to be evocative of print.

If we look at some of the more popular recent ArtBlocks projects, we can see they all follow the portrait format: Bent, Asemica, Edifice, and Fidenza being four examples, all around the 1:1.25, 1:1.333 and 1:1.41 ratios. With the recent ones even including subtle textures to the background to feel more like the paper used in print.

I'm going to make a very general and exceedingly flawed statement: I feel that portrait orientated NFTs seem "classier" than standard square ones, to me.

This brings me onto...

🎨 🎨 🎨


I'm in the middle of my next ArtBlocks project, "80s Pop: Variety Pack (for experts only)," which is intentionally a throw-the-kitchen-sink-at-it square format project (the later for (hopefully) curated "70s Pop: Deluxe" version will be going for the classier portrait/print orientation), and my recent print/NFT "80s Pop: Dancerama" project was pretty full-on.

So I was looking for something calm, peaceful and elegant to bring a little balance back to my life. I went back to the ancient art adage that less is more and subtract when in doubt.

I also wanted to work on a project that I could complete quickly to remind myself that it was possible, as everything else has been taking months to finish at the moment, and I was started to wonder if I was the problem 😁

I'd been playing with the idea of sticks and circles for a while and had been thinking about ways to add more to it. This seemed like the perfect opportunity to practice some simplicity, and I decided to stick with just the sticks and circles and apply some straightforward aesthetic rules to it.

πŸ₯’ πŸ₯’ πŸ₯’


All rules are made to be broken, but I think a good starting point for a piece of art is to have a good foundation or skeleton on which you build up more refined details. For example, my foundation for Concord is a grid of sticks; an entire "grid" is a three-by-four layout.

Because I wanted more variety, the first step was to create a rule that there could be one to three vertical lines...

...and one to four horizontal ones...

* * *

By keeping this number low, I tap into two powerful concepts. The first is simple symmetry. A single line down the middle is a solid visual foundation, and I get that with layouts with one or three lines.

Both the advantage and disadvantage of symmetry is that it's very direct, the brain understands it quickly, it makes a bold image, which is good for intentional focus (i.e. looking at to meditate), but doesn't necessarily hold the interest of the viewer for very long if they are casually looking at it. So, in short, it tells the story quickly.

A trick in art and photography is the rule of thirds. If you see a tree on the horizon, instead of centring it in the image, you put the horizon on the one-third or two-thirds line down and the tree one third from the left or right of the frame.

This is such a common rule that photo apps on the phone or cameras will often superimpose a grid divided into thirds to help you form the composition.

Whenever my algorithm picks two lines, it divides the space into thirds. So rather than placing the lines randomly into the scene, I have a win-win situation; it's either down the middle or using the rule of thirds.

Having a good grid foundation means we can subtract from it before doing anything else.

The next step is for the algorithm to throw some of the sticks away. There's a 25% chance of a stick being removed in this case.

By removing a stick here or there, we undo some of the balance and symmetry, making the scene slightly more dynamic. We'll come back to adding balance back in, in a moment.

Here are some examples...

⚫️ ⚫️ ⚫️


We have our skeleton; we can build up and add a little meat onto it. This happens in the form of circles and semi-circles.

There are three parts to this process, position, size and style.

The first is that each circle has to be attached to a stick. So in our code, we first go down the vertical sticks randomly-ish placing circles.

And then we go across the horizontal sticks (randomly-ish) placing them.

Just as we didn't randomly place the sticks, we also have some rules for the placement of the circles. First, they can be centred on the intersections of the sticks and the halfway points between them, as shown here...

It would be too simple to place them just at the intersections, but it'd also be too freeform to place them anywhere. Having the midpoints be anchors gives us a good mix between the two. It also allows for interesting overlaps and offsets in the circles.

If we placed a circle at every possible point, the results would look something like this...

Now we know where we can place the circles; the next question is how big they should be.

The base size of the circle has the radius be the same as the space between the lines, and you can see this on one, two and three line outputs here...

* * *

Having decided where to put them, it's once again time to add some variety to make them more (but not too) dynamic. Again, we do this with controlled randomness, and this is where you are once again making an artistic decision.

With Concord, having decided the radius of the circles, when then modify them to either 25%, 50%, 75% or 100% of that size. I could have chosen for them to be any size randomly from 1% to 100%, or I could have chosen 100%, 64%, 32%, 16%, 8%, 4% to favour the smaller circles, or go the other way of 100%, 96%, 92%, 84%, 68% and 36% (which is 100-4, 100-8, 100-16, 100-32 and 100-64).

Your role as a generative artist isn't to throw everything over to randomness but to shape that randomness in the direction to want things to go. Here I wanted circles at the intersection of two sticks to be able to sit inside each other with a reasonable (and standard) amount of overlap.

Here's a couple of examples.

* * *

The final design choice was having semi-circles and whole circles. I liked the idea of having semi-circles offset on both sides of a stick.

This explanation will overcomplicate things a little, but I think it's an interesting example of how an artist can make choices and apply randomness and chance in slightly different ways.

At each potential point, one approach would be to have a percent chance of each side turning up. For example, if you said, "At each point, each side has a 50% chance of showing up", then the code is easy. You get to a point, and there's a 50% chance one side shows up, then a 50% chance the other side shows up. This means 25% of the time, no sides show up, 25% of the time both sides show up, and the rest of the time, either one side or the other shows up.

If I decided that made the final design too busy, I could tune those numbers downwards. For example, if they came down to 20%, then each time there's a 4% chance a whole circle shows up, a 32% chance that only one side shows up, and a 64% chance there's no circle.

Instead, the approach I took was to have a base percentage chance that something would show up, allowing me to control how many points I wanted a thing to show up, which I set at around 20%. Then once having decided that something was going to show up, there was a 20% chance that something was a full circle. If it wasn't a full circle, then there's a 50/50 chance of it being one side or the other.

I felt that, in this instance, the second way of working things out gave me a bit more control than the first way. But there are instances where using the first method may have made more sense.

The main point is that there can be several similar ways of doing something, but it's up to the artist and their experience to decide which is most suitable in each situation. The more ways an artist knows how to do something, which comes from experience and playing, the more tools they have at their disposal.

This doesn't make it any better; someone starting out could hit on the very first thing, and it be amazing. But as with most art, the greater the understanding of all the available tools, the more flexibility the artist has to adapt to the challenges an artwork may throw up.

πŸ”΄ πŸ”΄ πŸ”΄


With Concord, I took the approach that less is more, subtracting and removing things where possible. Throwing away sticks, having only half a circle instead of a whole one, keeping the number of circles added pretty low. Now it was time to add something back in to restore a little bit of the balance.

This is the part most likely to raise an "Oh yeah, I see that now" reaction.

The "Dots": red circles that are generally smaller are placed along the removed sticks.

I wanted the dots to be slightly more controlled, and I wanted them to often float in the negative space left behind by the removed sticks. The sticks formed the skeleton, and sometimes a void was left.

The code is basically the same as the circles above, but instead of running down and across the sticks that were there, we run along where the removed sticks were and only at the intersections, no half points here.

Finally, instead of a 20% chance of a circle appearing, I opted for an 80% chance for a dot (or another way, an equal chance of a dot appearing as there was of a circle being missing). Restoring the balance while keeping the dynamism we introduced removing the sticks in the first step.

In the spirit of show don't tell, here are some examples, where now you know what to look for, you can see the red dots appearing along the missing sticks.

It's kinda fun to go look at the whole collection to see how the layout rules are being applied now you know how they work.

πŸ–‹ πŸ–‹ πŸ–‹

Background and Ink

Up until this point, everything I was doing could (and would) work with a pen plotter, which was the intent. However, one difference between pen plotting (and print) is the chances of the pen plots being seen together as a collection is slim. Instead, they will be mainly viewed as individual pieces, so the background of the pen plot won't be presented along with hundreds of others.

The digital versions would be displayed together, and I wanted to think about how they would look as a collection. Utilising background colour is an excellent way to do that and break up the "grid" a little bit.

There's not too much to go into here. I already knew I wanted an off-white background as I had some off-white paper I wanted to pair those digital/physical ones up with.

Inverting things to have a black background doesn't always work, and I nearly didn't here. So I rejected the black background until I added the red "dots", which tipped me back over the other way.

"World on Fire" was inspired by this image...

While "parchment" was snagged from somewhere in here...

The pink, blue, green backgrounds are a nod to the ArtBlocks project EnsΓ΅ by Matto, which I've always loved. EnsΓ΅ is (according to Wikipedia) "The ensΓ΅ symbolises absolute enlightenment, strength, elegance, the universe, and mu (the void). It is characterised by a minimalism born of Japanese aesthetics".

Because Matto's EnsΓ΅ and my Concord are both working in a similar space and aesthetics, I thought making a slightly stronger parallel between them would be interesting.

There's a chance that the background would get converted to a gradient fill instead of the standard solid fill with each of the above three colours or the parchment style.

Summertime is, of course, a link back to my own 70s Pop Super Fun Summertime Bonus Pack 🍸 ArtBlocks project.

While showing up just once is '80s', which is a link forwards to the upcoming "80s Pop: Variety Pack (for experts only)" project, because the colour scheme is very reminiscent of the black, white & red wallpaper and stylings you got around in that era.

Meanwhile, the "Ink" colours are very subtle, with just four main types; black, ink, wash, and off-white.

There's a bit of coding behind the scenes to adjust the ink colour when a dark background is selected to make sure something shows up. But, again, I'll cover that in the coding post.

Also, the shade of red on the black background, which was initially chosen from this image... sometimes changed into a brighter red or the same colour as the parchment background.

γ€° γ€° γ€°

Wobbly lines

The wobbly lines serve both an aesthetic and practical purpose.

Because one of the rules of generative NFTs on both ArtBlocks and fxhash is that they have to be resolution-independent. The need to work at any scale and on any display. While that could be a high-resolution screen, and heading into the future probably will be, they also often show up as thumbnails and sometimes on large outdoor displays that are big but have low resolution.

They also get viewed in online galleries where they'll often start small in the distance or VR headsets which again are relatively low resolution.

When you display several straight lines on a display that doesn't have many pixels, and the number of pixels doesn't cleanly divide by the number of lines you have, the display starts to cause weird interference patterns to appear as attempts to smear your straight lines between pixels.

For example, a tiny display with 64 pixels can easily display 32, 16 or 8 lines...

But when you try and display something like 13 or 21, things can start to get a bit weird.

By adding a wobble to my lines, I'm not only simulating the pen on rough paper effect I like so much when pen plotting, but I'm reducing the problem of the artwork being shown at smaller scales.

The interference/banding is still there with the wobbles, but it smooshed together into more of an overall texture, which fits the design better. Of course the above images being scaled down to display on whatever you're viewing this on will introduce even more issues πŸ˜†

πŸ’Έ πŸ’Έ πŸ’Έ


It may seem a bit odd to throw price in here too but, aside from a whole other blog post about "Being a working artist, NFTs and Money", I think the price can also be an artistic choice that can fit in thematically with the project as a whole.

In this case, 7 tez is, of course, a reflection of 7 being (generally) a lucky number. But also in a layout with one central vertical line and four horizontal numbers, there are 7 points (four intersections, three mid-way points) onto which a circle could be placed, similar to the seven Chakra.

I'm not saying you have to make price part of the artwork itself, but given a chance, and if the maths makes sense, I'll give it a shot.

πŸ—‚ πŸ—‚ πŸ—‚

Feature script

Beyond the project's visual aspect, there are two last places to tell the story; in the description...

"An experiment between pen-plotter, ink, paper and digital. A visual Koan in which our brain finds balance. In a sometimes overwhelming digital world, this art is an attempt to a respite."

...and in the features script.

The features script is where the artist takes code elements, which can often be numeric and turns them into something human-readable. This is one last chance to guide the viewer in their interpretation of your art; after this, it's all down to them.

Some of my features are just factual; background, line colour and circle colour. While others are part of the "story".

The mood is connected to the foundation structure, the sticks that stabilise the whole piece. Anything less than six lines (out of a maximum of seven) gives you Harmony, Tranquility or Calm, while the high numbers provide a good solid structure, Shelter and Sanctuary.

Honestly, what was going on for me, was imagining one of those survival shows where people build a shelter from bamboo and then cover them for leaves for protection. An entire grid of three-by-four is a Sanctuary, where the handful of three-by-three and four-by-two forms are enough for Shelter from the rain.

The number of circles and semi-circles is the Season, with the range running from sparse Winter through Autumn and Spring to bountiful Summer.

I wanted all of the features to be positive; I didn't want a good vs bad feature. So the default Tension was "Relaxed", but if you had only full circles, no semi-circles, and no single circle, then the Tension feature became "Balance".

While a single full circle gave us a Full Moon.

πŸŒ— πŸŒ— πŸŒ—


And all of the above is how I came to create Concord. Starting with balance, subtracting to add dynamism, then adding to restore symmetry.

Hopefully, this allows you to "read" your own Concord a little better and see the echoes of the code behind the scenes.

❀️ ❀️ ❀️