Incremental Development of Dot Circles

To implement an idea you need to break it down into steps, start simple and build up the complexity. These are my initial steps with the dot circles idea. None of them are the final thing, but each one has taught me something about the code. I’m not going to include all the code as it would make this post ridiculously long, just some notes. I’ve written separately here about my influences and inspiration for this idea.

Incidentally, I didn’t save any images of the first steps. I initially was drawing the ellipses in the draw() section and they were coming out very fuzzy edged. I thought it was because of the size of the display being low resolution, but I didn’t remember circles coming out as poor as that previously. I think it was to do with the repeated drawing of them on top of each other in that section. As I am aiming for a static image, there is no need for the repeated drawing so I moved the code to setup() section, for one time only implementation, and the spots became much smoother/sharper edged.

First few steps.

First few steps.

First few steps: Can I make a ring of spots? With spots on spots? Then smaller dots, in the spaces? Then another ring of spots on spots? What margin required to keep it all inside the display? What relationship between dot size and gaps and the radius of the ring? I used a variable numDots for how many in the ring and then used that to calculate the size of the largest dot and then scaled it down slightly so they were not touching.

Second Step

Second Step

Next I played around with smaller dots. How could I make them fit nicely in the spaces? Vary the location size and colour in an alternating way? I opted for drawing more than needed and then doing and if statement making some have noFill(). This seemed the easiest way to me.

Third step

Third step

Very similar to previous with more smaller dots filling the spaces left between the larger spots. There is more playing around with that which could be done. At this stage I got the idea of it working close enough.

Fourth step

Fourth step

Added the background colour for two reasons. One to make it visually more interesting for posting the stages and to be able to see easily which ones I have saved and not. It also shows though how the simple effect of greys against a block colour can be very effective. I would like to introduce some texture/noise to that background though. This step involved putting in a repeating loop decreasing the size as the ring radius decreased. It is an interesting effect and it works OK but as the spots get very small I find that less pleasing. I think I’d like something different to happen in the centre.

Fifth step

Fifth step

Rather than have a linear decrease in size as things move towards the centre, I decided to decrease the number of spots every 2 rings. Interesting playing around with the numbers and damping ratios. The outer 2 rings of larger spots have 32 spots then the next 2 have 26, and so on. So now the spots are not lining up going all the way towards the centre. This isn’t in the golden ratio but I feel it is more visually interesting. Perhaps I can say at this stage that I am not intending this to be a tutorial, it is just a record of the steps as an illustration.

Sixth Step

Sixth Step

Changes here may seem subtle. I started to tidy up the code, put in some variables for the colours so that I could change them from greys – making sure they worked with the greys first. Also changed the larger spots from 3 to 4 layers.

Seventh version

Seventh version

Changed the proportions of the sizes of the 4 spots on top of each other.

Eighth version

Eighth version

Changed colours. This is not the final version, it is just where I stopped for the time being. The things I want to do are:

  1. Do something different with the centre space, not quite sure what yet
  2. Do better colour combinations
  3. Make the background more interesting
719 Total Views 1 Views Today

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *