This is the text copied from the ‘Generative Design’ book. ‘Here, too, a new circle (shown by a dashed yellow outline) with a random position and size is generated in each frame. When this intersects with a pre-existing circle, the algorithm starts over. Otherwise, it calculates the closest circle. The distance to this circle and its radius now defines how large the new circle has to be drawn so that it touches its neighbor and the circles can be packed densely.’ And here are two movies of the original sketches
Here are all the sketches I did for this session:
First a general thing. From now on I will try to define global variables starting with uppercase. Local variables start with lowercase. This is a tip I got of Andrew Glassner. I think it makes the distinction between variables better. Another thing is a bit more complicating. sometimes names in the code are not meaningful enough for me. For instance r gives me not a slightest idea of what it stands for. Looking at the code it says that it has everything to do with the radius of an object. So instead of r I call that ObjectRadius. And because it’s a global variable it starts with an uppercase. The same thing I did for newR. I will change that into newRadius. And it is starting with a lowercase because it’s a local variable. This is going to make things more difficult for re-tracing mistakes in the original code but the code itself is more readable (and much more understandable) for me.
In this first sketch I exaggerated some things of the original sketch. I increased the line thickness from 1.7 to 10 pixels for the ellipses and to 20 pixels for the lines.
Here I changed the order of drawing elements. Instead of drawing the ellipses first and the lines second. Now the lines are being drawn first and then the ellipses are drawn. This does not seem to make a big difference in the beginning but if you leave the program running for a while it does.
In this sketch the ellipses are drawn twice over each other. Reduced the strokeweight of the lines to 1.5 pixels. Which sounds ridiculous because how can you address a 1.5 pixel? Beside of that the lines are drawn twice. But for the second line to draw I swapped the x and y positions.
I took a more generative approach here (I think). Instead of 1 ellipse 3 ellipses are displayed on the same x and y positions. Moving the mouse up or down is going to decrease and increase the thickness of the lines and ellipse. Moving the mouse left or right is moving through the HSB color range. But there is a bug in it. If you move your mouse close to the right edge of the display window everything is cleared and only 3 red ellipses are displayed. Just found that out now while typing this paragraph.
Removed the arcs and replaced them by 4 ellipses. They are decreasing in brightness the larger they get. Fortunately the bug is still available.
I have cut every ellipse horizontal and vertical into arcs. Filled them with grey and white by reducing the brightness. To check what is going on I reduced the frame rate to 5 fps. Oh… if you go too far to the right with the mouse it stops working. Just hit the refresh button of your browser.
This is even more difficult to explain in text. Cut the ellipse in half arcs. Vertical and horizontal. Filled the left with white and the right half with grey. Then I made a smaller version of the same ellipse. In fact its a copy of the large version code. But it’s behaving the same as the larger version. Slowed down the animation to 10 fps.
This is the same code as the previous one except for the fact that I introduced four steps between. Instead of halving the ellipses they are now displayed in quarter steps. The arcs may start now on 0º, 45º, 90º, 135º, 180º, 225º, 270º, 315º, 360º (or as you might prefer radians). I did commented out the frame rate in 10 line because after a minute or so the sketch is running very slow anyway.