Drawing a dodecagon of cubes in Processing

I saw and liked the image below on tumblr. It appears to have been hand-drawn and coloured, but maybe it is clever coding. I thought it was a good challenge, anyway, to try to reproduce it myself using Processing.


I had to look very carefully. There are 12 overlapping hexagons in a ring that form a dodecagon. What I realised is how much easier it would be to just draw the thing with pencil, ruler and a pair of compasses. An example of how to draw a dodecagon is in video below. It took a long time to get the right geometry of the vertices but once I did I was able to simplify it down for easier reading.

The way I decide to approach this was as a greyscale 2D image, not overlapping shapes but drawing a cut out shape based on a hexagon that could be rotated. This may not be the best way. That was because I didn’t want to actually overlap shapes just make it look like they were, because I want to use transparency (this was my thought for later to add colours).

First I tried to work out the geometry to make one shape as in the image below, so that I could then rotate it.


I need to draw shapes point by point so I can see what I am doing, so I used the points shown in the diagram below.


This is the final image that I have got to with the greyscale. The code for this image is on pastebin and I have tried to put in comments to make it as helpful as possible to anyone wanting to learn from it.


My methodology is to make my images using a display size that fits on my screen (600 x 600) and then when I get it right, I want to be able to scale it up to a larger size (at least 1600 x 1600) to make a decent image to print.

I posted a message in the Creative Coding Facebook group asking for any suggestions and Paolo Čerić did a full version of it with colours and noise and posted his code here, which I still haven’t managed to understand. I used the code on my computer and it took a long time to output the image which I don’t understand but I assume is because of the processing required for the noise. That makes it difficult for me to remove bit to see what they do as it takes too long to show the effect. The image is what the code produces on my computer.


Things I have learnt:

If you want to scale up a drawing so that you can print it, you need to increase the strokeWeight for the larger version as that doesn’t scale.

If you increase the strokeWeight, you need to think about how lines are joined as you can get sticking out bits for acute angles, because the default join is strokeJoin(MITER). To fix that use strokeJoin(BEVEL).

The ring is drawn clockwise, if you want to see it drawn just part of the way around, alter the limit on the for loop, eg theta < TWO_PI*0.75 will give three quarters of the ring.

I noticed that the first drawn cube seemed to be darker than the others since I am using transparency, I suspected that the last shape was being drawn on top of the first shape. So just to be sure this wasn’t happening I adjusted the limit of the for loop (multiplied by 0.95).

I don’t know if there are conventions about labelling points, but I have decided to have my own convention for this kind of geometry shape. I’m going to always use capitals, as I seem to remember capitals for vertices and lower case for sides from school lesson. The centre point will always be P. Then for regular shapes I will start with A at the nearest positive point to (0,0) and then label alphabetically in a clockwise direction. Then for any additional points like I have in this shape they will have a double letter relating to the vertex they are replacing. So in this case A, B, C, D, E, F, FA, FB (as in the diagram further up this post). I didn’t do this when I started this exercise and I found I had to have a diagram and keep referring back to it, and I got a bit mixed up at times. Changing the code that I had already written to this new system was a bit fiddly too, but now I have done it, it works and makes sense, and will be much better if I come back to look at it and wonder what was going on.

What next?

I’d like to add colour, which should be relatively easy using colorMode(HSB), but then I need to sort out how to do the mirroring that is on the second medium size ring of cubes where the colours and the shapes are in the other direction.

Finally, I want to add texture/noise, but I need to leave that for a while as I have a lot of other courses taking up my attention at the moment.

Further Reading

  1. This page has a lot of information about 3-dimensional geometry that may be useful http://www.maths.surrey.ac.uk/hosted-sites/R.Knott/Fibonacci/phi3DGeom.html
  2. Names of Geometric Shapes – With Pictures
  3. Patterns of Visual Math
1446 Total Views 3 Views Today

You may also like...

Leave a Reply