Generative Design Variations M.2.5 Drawing Lissajous figures

To begin with here is the original text from the Generative Design book: ‘Extremely attractive forms are created when the points on the Lissajous curve are not connected in the usual manner (i.e. one point only to the next point) but rather when each point is connected with all others. To avoid black clump–after all, many lines have to be drawn–it is necessary to ensure that the farther apart the points are, the more transparent the lines become, as Keith Peters demonstrates in ‘Random Lissajous Webs’ on his website.’ This is what the Generative Design book tells us. In this assignment there are two programs. The first one is a program. The second one is a tool (which is also a program). Here they are:

I have made a collection page on Flickr were (almost) all images are gathered which I have made during the study of the Generative Design book. The first images are from November 3, 2013. They are sorted by album with reference names to the programs which appear in the Generative Design book and on my loftmatic website. And I have made an album on Flickr with all the images I made during this assignment. On the loftmatic site you can find all programs of this assignment. Only the first 15 programs work with JavaScript. The last 10 programs use the controlP5 library and this is not supported by JavaScript. Or controlP5 does not support JavaScript. The final result is the same.

For the first program I’ve cleaned up the code a bit. I don’t mean I made the code better than it is but it’s now more readable to me. I don’t know what the global variable ConnectionRamp does. So I commented that out. Nothing serious seems to happen. I also found the local variable h on line 111. It is not used? I commented that out too. Still everything seems to work. Changed the LineColor to white and the background to black. Made the LineWeight 0.5. Doubled the PointCount. Lowered the PhaseShift to 4. Repeated the code which draws the line (on line 143) 6 times with a for loop. Which makes the program very slow. I will mention the time it takes to render. This one takes 3 seconds to come up.

Because I found the images much to complex I left out 3 loops of the image. On line 143 I added the values of i to the 2.x and 2.y points. This makes the object less cluttered. I set all frequencies and phase-shifts to 0. Wich does not give me any image. Put them on 1 it renders a diagonal line. I’ve changed the initial value for Frequency_X to 7, Frequency_Y to 5 and PhaseShift to 6.0. Rendertime: 2 seconds.

In line 143 I changed point_1.y – i and point_2.y + 1. LineAlpha  is now 16 and I decreased the LineWeight to 0.6. That seems silly. Because that means that the LineWeight is 0.6 pixels. But it really makes a difference compared to a setting of LineWeight 1.0. Rendertime: 2 seconds.

Just for fun I have left out the line connection. Only point_2.x and point_2.y (+ i) are now displayed. Rendertime: 14 seconds. Which is strange because it does not have to connect the points.

Removed the point. Re-introduced the lines again. But I left the for loop in with the same numbers as I used with the points. Every time it renders a frame it takes 18 seconds. But for now I keep the settings like that.

Let’s see if I can introduce some color. Hmmm… this is not what I had in mind but I think its worth to continue. I made a mistake in line 143. I have put the stroke color on 0. Black that is. Rendertime: 5 seconds.

I have removed line 141 and 142 out of the for loop. Rendertime just 2 seconds.

I have the impression that the images are almost always the same. So I used the for loop again to introduce some variations. Rendertime: 6 seconds.

Put an extra line command (on line 145). Rendertime: 10 seconds.

Introduced some colors again. I think I have lost some refinement in the end. Maybe I can get that back in the next examples. Rendertime: 9 seconds.

I just start with the first sketch (M_2_5_01). Checking what I did wrong. And why the image quality got worse during this session. Another point is that all these sketches should work in JavaScript. But they are very slow as I mentioned before. I have to improve that too in one way or another. I see that LineAlpha is 100 in M_2_5_01. That brings a bit more detail into the image. I also removed the for loop which slows the program down. And that solved the problem. What can I do to make the images look different from the original. In the previous sketches I tried one example with points. Maybe I can combine those points with the image I already have. No! Points did not work because they were too prominent. So I replaced them by ellipses. I will not mention the rendertimes because the problem is solved.

I am trying to get away from those symmetrical shapes. On line 103 I replaced the TWO_PI by 90 radians.

Another example to get away from symmetry. Increased the radians to 180 on line 103.

Keeping it as simple as possible. Decreased the radians to 90 again. Translated 0.01 in the x- and y-axes. There is a problem with displaying the images in the middle of the display window. But it also has something nice to it because it’s is not in the center. So i keep it like it is. You can use the left and right keys to get the image a bit in position.

Simple but not too complex. Increased the display size to decrease the image later to keep a good image-quality. And I decreased them back to 800 x 800 for these examples.

The second part of M.2.5 Drawing with Lissajous figures is about using ‘The Lissajous Tool’. I quote the Generative Design book: ‘All the possible ways of working with two-dimensional Lissajous figures can be combined in one program, which also contains additional parameters used to modify the figures. The value randomOffset offsets the x- and y-coordinates of all points by a random value between -randomOffset and +randomOffset. The parameters modFreq2X, modFreq2Y, and modFreq2Strength are a bit more difficult to understand. These parameters modulate the frequencies of the harmonic oscillations. This means the frequencies freqX and freqY are no longer constant, but sometimes higher or lower.’

During the changing of the variable names I came across the variable i1 or it could also be il. What does that do? Ok… I found out by doing a search whitin the program that il is as in illustration. But search did not find it als a variable. So it must be i1 (aai-one that is). And I found an i2 too. It is used in a while and a for loop. And it has a connection with creating .pdf files? I just create a .pdf file. It says: saving to pdf – step 954/1500… saving to pdf – step 1500/1500 – saving to pdf – finishing – saving to pdf – done. I’m not sure but I think that i1 stands for the begin or starting points and i2 is the total amount of points (which is the same number as the global variable PointCount). So I rename i1 to StartingPoints and i2 to totalPoints (with a starting lowercase because i2 is a local variable). I leave the controlP5 variables as they are. I have to study the controlP5 library first before I make any changes. But that’s for a later occasion. I think when you enter the calculateLissajousPoints function the variable names are getting to abstract for me. Float t, x, y, rx, ry. What do they do? What does t do? It seems it is not used. So I comment it out. In the drawLine function there are also 3 variables of which I do not know what they are doing. But I found out that d is the distance between points, a is the transparency/alpha value and h is the hueValue. Changed their names to make the program more clear to me. Ok. Now all what is left is to change the names in the controlP5 interface according the global variable names. Otherwise the user interface will not react on any input. In this example I started exploring the different parameters. To begin with I will only work with the Frequency_X, Frequency_Y sliders. Oh… and if you follow the links under the paragraphs from now on you will see the Processing code.

I started to create these images by using the Frequency_X, Frequency_Y and PhaseShift sliders only but it seems that adding PhaseShift makes not much difference for the global image. It just shifts the image. So I added ModulatedFrequency_X and ModulatedFrequency_ Y to it. And that does make a lot of difference. The best images are generated when Frequency_X and Frequenc_Y are very low in their numbers. PhaseShift can be used to make the image a-symmetrical. ModulationFrequency_X and ModulationFrequency_Y ar also best in their lows from what I have seen until now.

If you use ModulationFrequency_X2 and ModulationFrequency_Y2 with a very low Frequency_X and Frequency_Y setting it has almost no influence. It works only if you pull the ModulationFrequency_2Strength slider. And it results in chaotic images if you ask me.

Used RandomOffset. It spreads points from a straight line to random positioned points in the neighborhood of the original positions. It makes fluent and straight lines rougher. The other sliders I have tried but in the end I did not use them very much. It seems that using very low numbers in all frequencies and modulationfrequencies and combined with a full modulation_2Strength gives interesting images.

It turns out that I almost never use Frequency_X and Frequency_Y above 5. ModuationFrequency_X and Modulation Frequency_Y are always between 1 and 5. ModulationFrequency_X2 and ModulationFrequency_Y2 are always on 1. And ModulationFrequency_2Strength is always on 1.00. RandomOffset is always off. LineWeight is always on 1. LineAlpha on 100. The HueRange is on 100, 200. SaturationValue and BrightnesValue are always on 100. And finally ConnectionRadius is always on 125.

I would like to check if it is possible to change the ranges of the controlP5 sliders to match them better with my preferences. If that is possible I can have more possibilities within my preferences range. Sounds complex but if I never use a higher point count as 1500 why should my slider then go until 8000? It would be better to let the slider cover the range from 0 to 1500. Fortunately that is easy in controlP5. Just enter the number range in the lines which cover the sliders in the GUI tab. Another thing is that I now can decrease the length of the sliders which gives me more space to judge my image.

Made some more variations with the smaller controlP5-slider version.

I made a program change in line 214. Replaced TWO_PI by 90 radians. But that was not a good idea. So I changed it to 180 radians. Nope. No improvement. I bring TWO_PI back in line 214. But I think I increase Frequency_X and Frequency_Y to a 10 steps slider.

Added some other variations.

And finally I did make some color variations. Why did I not think of that before?

ControlP5 is a very interesting library. It gives you a lot more possibilities on top of the things I ever might learn about programming with Processing. But it also makes the images more general. You might say: ‘Hey! Anyone can pull a slider or check a checkbox!’ Then I think you are right. But to solve that problem I think you just have to define more sliders and checkboxes. Still these examples were very helpful to learn more about the controlP5 library. I will certainly use controlP5 again in de future.


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