GDV P.2.2.5 Structural density from agents

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

In case you are not able to run JavaScript or Processing I have put all images of this session on my summary page at:

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.

Hmm… this sketch is behaving totally different in JavaScript as in Processing. First of all it does not run. It only displays 1 ellipse and 3 arcs. But if you hit the refresh button of your browser it does run. I’ve replaced the 3 ellipses by 1 ellipse and 3 arcs. Removed the thickness change in the y position. And yes, it still has the same bug in it as the previous sketch. And its running very slow.

Removed the arcs and replaced them by 4 ellipses. They are decreasing in brightness the larger they get. Fortunately the bug is still available.

This is the same sketch as the previous one. The objects are now half the width of the height. Does that make sense in English? If the height is 10 than the width is half of it. If the height is 0.7 than the width is 0.35. Anyway… the bug is still working. I checked if it was doing the same in Processing. But it is not giving me the same bug. It doesn’t matter if you put your cursor to the right edge of the display window. So I think it has something to do with the conversion from Processing to JavaScript.

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.

Now the last 10 sketches do not work in JavaScript. I came to that conclusion just yesterday. All these sketches make use of color gradients. And because color gradients including radial gradient and linear gradient are not yet supported in JavaScript. Didn’t know that when I started to work on the last 10 sketches a few days ago. If I had known that at that time I would have restricted myself to use only plain color fills. So instead I added the Processing code only. Although I think it doesn’t make sense to check them because I only changed the names of the variables and replaced the svg-files. But if your curious you can check them here:

I really hope that the next versions of Processing will give better JavaScript support. But the near future of Processing is looking very promising because on March 14 2014 I got an announcement from ‘Work on Processing 3.0 is starting. What is it? The priority is the Processing Development Environment, the PDE. We plan to integrate the work on PDE X to bring code completion, debugging, and more to writing Processing sketches. We’re also working with a small, talented group of people on two other major projects to extend Processing in other directions to better support JavaScript and Python.’

Henk Lamers


Comments? Leave a reply.

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s