Background Colour Selection

This is a super specific technical post, but it was something I worked to figure out, and I said I would document how things got done, so here it is.

The generated artwork is done in a certain style. The text and logo remain the same, the big episode number is always there, and a different processed foreground image is used each time to reflect the subject of the episode.

  1. The background colour must change each time.
  2. It must always be a certain brightness and saturation of colour – no dark browns or shocking picks.
  3. Choosing randomly runs the risk of choosing the same colour twice in a row, or too close a choice.
  4. Just incrementing the colour with the episode number wouldn’t change enough.

Here’s what I came up with. ImageMagick uses various colour models, including RGB and CMYK. But I chose HSL. This takes three values, representing Hue, Saturation, and Lightness.

Saturation is the richness of the colour. I didn’t want things too rich or bright, but rather a toned-down level like those on the Penguin paperbacks I was inspired by. After some experimentation, I chose a level of about 50%. It didn’t have to change for each episode.

Lightness is pretty self-explanatory. The colour had to be light enough to show up the processed black artwork, but dark enough to show up the white text. After some experimentation, I chose a level of about 30%. It didn’t have to change for each episode.

Hue is the actual colour, and is a value of 0-360 around a colour wheel. This colour picking website shows it all quite well, and was very useful in figuring this all out. Hue had to change for each episode.

In order to meet all the criteria listed above, this is the calculation used to generate the colour:

CS_Episode_Colour="hsl($(((episode_number*hue_increment) % 360))%,${saturation},${lightness})"


saturation = 50%, lightness = 30%, hue_increment = 171

What this does is create a HSL specification string in the form “hsl(0-360,0-100%,0-100%)” by taking the episode number, multiplying it by a value called “hue_increment”, dividing by 360 and taking the modulus (remainder), and setting the saturation and lightness values to the regular chosen values. Taking the modulus ensured that the value was within the range 0-360.

Where did I get 171 from? Once the other values had been settled, this was the one that took the most deciding. The way the calculation works, the value jumps by 171 each time, and the modulus ensures that it loops round when it’s greater than 360. Experimentation showed that the value of 171 gave a good change each episode, while not being too regular.

And that’s how the episode number dictates the background colour of the artwork.


Climbing The Flange Circus Family Tree

Remember those Rock Family Trees? Pete Frame drew those fantastic detailed diagrams of how bands changed their line-ups, swapped members with each other, and made up whole scenes. Prints were included in remastered albums, they spawned a John Peel-narrated TV series, you can buy books and posters of them, and someone even created a font from Frame’s distinctive hand-lettered text.

So when I interviewed Flange Circus and their parallel project Zirkus in Episode 18, it was clear that the relationships needed to be documented and diagrammed. I love a good diagram.

Frame’s charts are hand-drawn. That was out, obviously. Then I had the idea to try to use Graphviz to draw the chart. Graphviz is “open source graph visualization software. Graph visualization is a way of representing structural information as diagrams of abstract graphs and networks. The Graphviz layout programs take descriptions of graphs in a simple text language, and make diagrams in useful formats, such as images”. Basically you feed it a simple text description of how things are connected, and the program draws the diagram for you, with the boxes and lines drawn in the most tidy and efficient way.

You can have a play with Graphviz online here. Change the code, and see how the diagram changes.

I started writing the text file for the family tree, but it became clear quite quickly that with this amount of information, writing the text manually wasn’t going to work. Graphviz really shines when you generate the input file from another program, as shown in many of the examples in the gallery.

There are various GUIs for Graphviz, and while I was looking at those, I discovered yEd. I LOVE yEd. I use it for so many things now, at home and at work. yEd is not related to Graphviz, but it does perform a similar function. It’s a free Java app that will run anywhere, and it provides a nice graphical interface for drawing linked diagrams. But the most exciting feature is the automatic layout feature, which arranges your diagrams neatly depending on whether you’re drawing a flowchart, swimlane diagram, hierarchy or other style. you just hit the button, and it makes everything tidy – with some tweaking of settings, and a small amount of compromise (it is free, after all).

So I moved the diagram into yEd. I originally used the Pete Frame font mentioned above, but it didn’t look good at all – not the fonts fault, more that it needs a human touch to pack that amount of information into a diagram and make it look good.

Eventually, after much changing around, adding more branches, linking out to other projects, and emailing for more information, this is the result (click for big, or to download).

Good eh? If you have any further info, let me know. Obviously it’s a bit sparse compared to the dense narrative-packed Frame charts, but I think you should always keep a bit of mystery, don’t you agree?


Episode 18: Flange Circus / Zirkus

This episode features the third of several interviews I recorded on my recent trip to the Old Country. It’s like a second go at the Home Counties tour of 2013.


Flange Circus are a Manchester-based band, describing themselves in their Bandcamp tags as “experimental drones electronic music electronica glitch kraut krautrock post-punk post-rock progressive psychedelic rock space rock Manchester”. I met half of the band, Bon Holloway (Guitars, Keyboards, Programming) and Pete Collins (Bass, Keyboards, Programming, Vocals) in Manchester to talk about music, Flange Circus’s music, the music of FC’s spinoff, Zirkus, growing up with bands, the usual.

Newsflash: Bon says, “The album is being written and recorded, and we are fecund in our ideas and diligent with our work rate. Not title as of yet and no release date.”

I was lucky to be able to meet the two members of “experimental doom drone electronic experimental electronic glitch Manchester” combo Zirkus at the same time. ABB (Synths, Machines & Programming) and Pierre (Synths, Machines & Bass) are infamously reclusive, but they emerged from their podules to talk “good noise”.

In common with last episode, this was recorded in the back room of a pub, so you’re getting atmosphere again. You love it.

Episode links