The mathematics of colour in creative coding

Oh creative coding, it’s been a while! The brain cells have a layer of dust and have slowed down that little bit more since last year. This is a quick record. I wanted to try out this shape that I saw on an instagram picture (below). What is this shape called that is the combination of a circle and a square? I want to randomise it so that sometimes the corner is a right angle and sometime it is an arc.

Playing with dots 632… #kyleplayingwithdots #abstract #abstractart #atlanta #meditation 😎💜🙏🏻

A photo posted by KM (@kyleplayingwithdots) on

And another…

Playing with dots 639… #kyleplayingwithdots #abstract #abstractart #atlanta #meditation 😎💜🙏🏻

A photo posted by KM (@kyleplayingwithdots) on

Figured that out. Rejigged some code from last year to make the grid, etc. Then I got into wanting to randomise the fill colour to that the centre is the complementary colour to the outside. Obviously I googled for that relationship and using HSB scale the complementary colour needs to be 180 degrees round. So I got there with this code (just the colour bit as a reminder):

  float sat, bri, col1, col2;

  sat = 100;
  bri = 100;
  col1 = random(0,360);
  if (col1 <= 180) {
   col2 = col1 + 180;
  } else {
   col2 = (col1 +180) - 360;

color shape1 = color(col1, sat, bri);
color shape2 = color(col2, sat, bri);

And this is one of the images:


Further Reading

More colour mathematical relationships to try out in this post:

969 Total Views 3 Views Today

You may also like...

Leave a Reply