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.

Generative Design Variations M.2.4 Three-dimensional Lissajous figures

Here is the description of the Generative Design book: ‘An obvious step is to extend these representation into the third dimension. This requires only the addition of a sine wave to control the movement of the points on the z-axis. Many new possibilities arise through the addition of this new axis. The following is an inspiring example in which triangular planes span between the coördinate origin and the Lissajous path. The two outer corner points lie on the Lissajous path: the triangle’s third point is the origin. The plane does not span between all points but rather only between every third point and its second neighbor to the right. In order to access the points more easily, it is advisable to calculate them first and save them in an array.’ This is the program I started to worked with:

I also made a album on Flickr. Here you can find most of the images I made during this assignment. And on the loftmatic page you can find all code I used to make the images. When you click on the previews you get the Processing code I used. The programs do not work in JavaScript.

I renamed the global and local variable names which I could not fully understand. I changed them to names which explain more about what the variable does. I also adjusted some of the word spaces in the code for better readability. Changed the color mode from RGB to HSB. And because this is a 3D sketch I imported the light settings which I created in M_1_6. I also filled the gaps between the planes of the objects. Maybe they come back in a later stage.

Re-introduced the gaps in the objects again but I think it makes the object less clear. I have replaced the magenta light for a blue one.

Experimenting with looking to shapes under different angles. Ooh… I see that TileSaver has made a few mistakes. It saves a file in four parts. And then it positions them in a random order (I think). So it sometimes looks like we have three objects instead of one. But I think that is fine (for now).

But at this time I think it is strange that TileSaver does chop up the images. When you run the program for the first time it does not do that. TileSaver says: 025.00% completed. 1/4 images saved.050.00% completed. 2/4 images saved. 075.00% completed. 3/4 images saved. 100.00% completed. 4/4 images saved. Save: 1_4_2_0_0_1600x1600.png Done tiling.. Ok. Looks good. Now I hit the 2 key. Has this something to do with the function keys? Weird. In fact I can paste the image in the right order together in Photoshop. But that is going to take time. I’ve put ImageSize on 3 but it keeps on tiling and delivering me a complete image in a wrong order. Ok. Than I have to live with that and repair it later in Photoshop.

I think I need a zoom function. Sometimes I would like to get up closer to the object. And other times it better to see it a bit further away. Used the + (plus) and – (minus) keys for that. I tried a few versions with outlines but that did not work. The images are not getting any better. And lines do not accept the color of the lights. Lines ignore lights.

I have noticed that TileSaver is working only properly when you run it once. And than you need to re-run the program. Otherwise it saves the tiles in a wrong order.

Continued with the search for new objects and interesting combinations.

I replaced the TRIANGLE_FAN with TRIANGLES on line 141. That gives a surprisingly smooth object and a totally different expression to the objects.

Added a transparency of 50. But it also gave me a bunch of artifacts which I did not find very attractive. So I lowered the transparency to 10. Which was not a good idea at all. So I set it back to 100. Continuing with looking for interesting shapes.

I have decreased the PointCount from 2000 to 10. That gives very triangular objects. Which are (by the way) not very interesting. Used PointCount 20. Still not very interesting. I try 40. Even 80 is not interesting. What about 8000?

Generative Design Variations M.2.3 Modulated figures

The Generative Design book starts with the following description for this example: ‘The variation of Lissajous figures can be greatly increased by modulating the oscillations. The concept of modulation is used in telecommunications, in which oscillations are used to transmit signals. In order to make simultaneous transmission possible — for instance, many different radio programs — broadcasters need to combine each information signal (e.g. music and speech) with a carrier signal. An information signal is combined with a carrier signal. The result is a curve in which the amplitude of the carrier signal is modulated by the information signal. One therefore also speaks of amplitude modulation. For the implementation of the program, the curve is composed of two oscillations. Here is the first  program I started with (from the Generative Design site).

I made a summary page of containing all images I made during this assignment. Which you can find here as a Flickr album. The loftmatic page has all the programs on it which I changed. They do work in JavaScript using Safari or Firefox. In Chrome it does not work. No idea why that is.

I started with changing the global and some local variable names to names I could better understand. Made the display image 800 x 800. Inverted the background from white to black. It is not really clear to me which line stands for the information signal. Which is the carrier signal. And which line is the modulated signal. So I colored the information signal red. The carrier signal green and the modulated signal blue. I made all signals higher by dividing the height by 2 instead of 4. Hitting the 1, 2 and 7,8 key gives interesting patterns if you keep on hitting them long enough.

Did some examples with signals of less height. Height divided by 4.

Maybe make the height even smaller. I know this is against this principle of explanation but what if I make the signals, independent from each other, lower or higher?

What about attaching a few keys to that idea. Used key 5, 6, 7, 8, 9 and 0  for that.

Now it would maybe a good idea if I could move the oscillations separately from each other. Skipped that idea. I use the up and down arrow keys for increasing and decreasing the line thickness.

The second example to work with has the following description in the Generative Design book: ‘Just as we saw with the unmodulated Lissajous figures, two modulated oscillations can be used to define the point’s x- and y-coordinates.’ Here is the program I started with.

Hmmm… changed the name of modulationPhi variable into ModulationPhaseShift. But it seems that is not being used? So I commented it out. What does w do? Changed its name in WidthDistance. Not sure if that is correct. If it seems not correct I will change it later. Anyway… I don’t see the point of seeing points in a line. So I commented line 96 PointCount = mouseX * 2 + 200 out. I’ve also commented out line 84, 134, 135 and 136. Introduced a new global variable CopyLine. Which copies lines in a for loop. I have always Matt Pearson’s quote in my head from his book Generative Art (page 71): ‘The next step–and I firmly believe that, if in doubt, this should always be your next step–is to multiply it all by 100.’ Did that but 100 seems a bit too much in my for loop on line 137. So I stick with 40 for now.

Uncommented line 96. Made DrawMode 1 almost the same as DrawMode 2. The color is blue and I left the CopyLine variable out only once in line 114.

Added a range of yellow colored triangles to DrawMode 1.

I decreased PointCount from 800 to 10. In line 110 I multiplied Position_X with width. I mean I multiplied Position_X * width. Which means we are very close up to the objects. Although I am not working in 3d it gives a 3d impression.

Decreased PointCount to only 4 points. But added a new for loop on line 12. This reduces the amount of possible figures to less than 10 per DrawMode. Increased it to 12.

Generative Design Variations M.2.2 Lissajous figures

The description from the Generative Design book reads as follows: ‘The step from harmonic oscillations to Lissajous figures is very easy now. Instead of one oscillation, two are calculated, one of which defines the y-coordinates of the point to be drawn (as demonstrated) and the other its x-coordinates. The adjacent image depicts an oscillation with frequency 2, an oscillation with frequency 1, and a 90º phase shift, which together results in a Lissajous figure in the shape of a reclining 8.’ Here you can find the original program I started with.

This time the Processing JavaScript conversion works reasonably well. Except for a few hick-ups which you might read in the following paragraphs. Here is the overview page on the loftmatic site. Remember… these programs will not work in Google Chrome.

As usual I changed the global variable names. The size of the display window and I added some letter spaces to improve the readability of the program. Made the background gray and I filled all curves because the strokes displayed were giving a bad image quality.

Used only primary colors to fill the curves. Still bothered by that font problem of the previous example. Used an .otf-font in JavaScript which seems to work. It works in Safari and Firefox. But it doesn’t work in Chrome. So I stopped working on that problem. I just continue with working on the example. Looking for more info to make the page more interesting. In a later stage I decided to remove all fonts and imported a .png for the header. But even than Chrome does not want to display anything. Checked the content settings of Chrome and JavaScript is set to allow all sites to run JavaScript. On the Processing.js site the following is mentioned: ‘Font support for the Canvas element varies across browsers. Firefox currently has the best support, but still uses a pre-defined set of fonts. (Documentation to follow soon)’.

Added Horizontal and vertical frequency. And a line with phase shift. To avoid problems in JavaScript I added those texts in a background image. Which gives me no opportunity to change the position (except for changing it in Photoshop). But the problem with fonts is than solved for a major part (I hope). I only have to position the otf font at the specific places in the subtitles. Tried that but with no success. It gives the same results as with the Futura.otf. So I stick to that. Programs only work in Safari and Firefox. So I did a bit work for nothing. This is not an ideal solution because the leaguespartan-bold.otf looks a bit like the Futura bold. But it isn’t the same.

Ok. I found a new option. I am going to get rid of the Futura font. I am only going to use it in the background. Furthermore I am going to give more information about the curves at the little circles which are orbiting the curves. Because the zero point have been translated I need to re-calculate the positioning data. But first of all I need to know if this is going to work in JavaScript. And it does (not run in Chrome). The zero position lies now at point 600, 600 but after a while I thought these positions are not relevant. I just display the frequencies and phase shift at the white circle’s positions.

This animation is fine as long as you don’t cranck up the frequency rate of one or both frequency curves to lets say 7 Hz. If it higher everything will be unreadable. So I think its better to make that information static. But it is also more boring. Until here I don’t want to go any further with these examples. I could make more variations but the intention is to understand how Lissajous figures work. And that is clear to me now.

My doubts about the Processing JavaScript conversion is getting greater with every Processing program I convert to JavaScript. And when you start using fonts it is even more worse. During these examples I spend more time on finding out how I could use fonts in JavaScript then I spend time on getting to know Lissajous figures. And beside of that there are several browsers which not fully support JavaScript. But I hope this will getting better in the near future.

Generative Design Variations M.2.1 Harmonic oscillations

I have entered the chapter M.2 Oscillation figures. It starts with an example that explains Lissajous figures. Named after Jules Antoine Lissajous. The basis of all Lissajous figures is harmonic oscillation. In the physical world, a harmonic oscillation is created when, for example, a weight suspended from a spring is pulled down and then released. If the loss of energy through friction is disregarded and the position of the weight over time is recorded, the following oscillation curves are created. The frequency tells us how many oscillations occur per time period. These oscillation systems can easily be described mathematically with a sine curve. This can be imagined as a point that moves along a circular path. If one now measures for each angle the vertical distance between the point and the horizontal axis (this segment is defined as the sine of the angle) and plots this in a coördinate system, a sine curve is created. The curve can be moved horizontally by using a point at an angle other than 0 degrees. This offset angle is commonly referred to as ‘phi’ and the shift of the curve is referred to as phase shift. The following program draws oscillation curves that better describe these relationships. Here is the original program I started with.

But first a word of joy: Hurray! This time JavaScript does work! But now JavaScript replaced the fonts I used with a sans serif font which looks terrible. Also the letter- and word spacing is wrong. JavaScript does not work with .vlw fonts. So I had to download a font which comes close to the Futura Bold and Futura Book I used in Processing. I used LeagueSpartan-Bold from It comes close but it does have only one weight. That worked in a few sketches. But because the font metrics of LeagueSpartan-Bold are different from the font metrics of the Futura my layout gets ruined. So I have to adapt al positions to the LeagueSpartan-Bold font. Or I could leave everything like it is now. Than I can keep my original Processing code clean and I do not have to uncomment all lines where fonts are involved. And it works. But it does look pretty crappy with that font and the wrong word and letter spacing. JavaScript and fonts seem to be horror! Anyway, you find all programs here.

Ok. This example is a graphic representation which explains how oscillation works. What can I do with that. Well… make the background black? Sorry… I just start with renaming some variables to get a better understanding about what the program does. But I came at one variable which is called ‘t’. I really don’t know what ‘t’ stands for. But because frameCount is used to fill the variable I think it has something to do with time. Let’s see what happens if I change the modulo’s value. Changed it to 40 but nothing happens. What about dividing pointCount into 2? Ok! The animation runs now twice as fast. So I change that local ‘t’ variable into a variable which I call theTime. Not really sure about this. I also spend some time to find out which line of code represents which line in the graph. Added comments about those in the code itself. Another thing is that the graphic on the right runs through the right side of the display. I would like to have as much space there as appears on the left side of the circle. I think I am going to strip down the animation. I only keep the most essential things. I have no idea why there are two circles at the beginning of the timeline and at the 0 point of the circle. So I will delete those.

I think this graph needs a title. I just call it: ‘Harmonic oscillations with frequency x.  Would be nice when the frequency is updated (by hitting the 1 or 2 keys) the x in the title updates too.

Beside frequency we also have to deal with phase shift. So maybe its better to include that too and then make it a separate text with the frequency. Frequency is the number of occurrences of a repeating event per unit time. It is measured in Hertz (Hz). Maybe I should add that too. Phase shifts are typically measured in degrees where a complete cycle is 360 degrees. Ah… now I know why there where two lines over each other in the right half of the left circle. One line represents the angle and the other represents the 0-line. So I should bring that line back in the graph. I just color it red.

Another problem which has to be solved is the positioning of the frequency amount and Hz. When the frequency gets higher than 10 or 100 the number is going to run through the Hz characters. Used the utility function nf to display always 3 numbers for Hz. For phase shift I can use the same nf function. Eh… why is that a float by the way? I will make it an int.

As a last step I just put some more explanation to the graphic. Oh… there is a line missing at the right side of the timeline graphic. Used the PointCount variable for that. And I found another useful line which connects the endpoints of the moving lines in the circle and timeline with each other. I will make that yellow. There is something wrong with the degree Celsius sign. If I paste it from my text editor into the Processing pde it has a little line beneath it. But it comes out fine when rendered in the animation.

I am continuing with the design of the graphic. I think there should also be a line from the zero point of the timeline to the moving dot in the timeline. Don’t know if its functional.

Lets see if it works when I display the real degrees next to the moving dots. Ok. It seems that the AngleDegrees variable would do that job. I found that the rather strange number of 57.4 is the amount to be multiplied with AngleDegrees. I have no idea why this works. Now that both numbers are on the moving horizontal line I have one problem left. How to position the degree sign. When the degrees are smaller than 100 containing only two digits the degree sign is way too far from the number itself. I could not find any function which calculates the width of 2 and or sometimes 3 characters. So I solved that problem with the new variable numberOfCharacters. And than it is simple a matter of writing an if statement. If numberOfCharacters is smaller than 100 than position the degrees sign on that position. Otherwise position the degree sign at this position.

I was busy with displaying some other data while I found that there is a much easier way to calculate the width of characters. You just don’t calculate them. You can display the calculations on one line by combining the calculation and the strings you would like to display with the ‘+’ sign. That solves a lot of trouble / work.

I don’t think that small text in the animation will work well. I leave it out and I continue to work on the overall design. Put a grid of points in the background. I don’t know why the point function does not work. Found out that this is due the smooth function. Could use rect or ellipse but that is slowing down the animation. So I have put noSmooth in front of the for loops. Deleted the line which displays the text lines: x amount of orbits and  x times through the circle and timeline. Did not find that very helpful information anyway.

Found those dots in the background pretty distracting. Added a gray background. Replaced all color in the graphics by blue. Made the moving dots magenta. Finally I did not change much in these examples. It also did not lead to many variations. I replaced some colors and positioned some text. But it helped me to get a better understanding of what harmonic oscillations do and how they work.

Generative Design Variations M.1.6 Agents in space

The Generative Design book starts this example with the following text: ‘For the last example in this chapter, the use of the noise () function as a way to determine the direction of agents’ movement is carried into the third dimension. The swarm of agents leaves the flat area and moves in three-dimensional space. An agent is represented by a ribbon composed of its previously executed positions. The agent class is adjusted.’ Here are the two tools which I have changed and used during this assignment.

I have created a Flickr Album with all the images I made during this exercise. There was no JavaScript involved because JavaScript does not support the Processing controlp5 library. So if you click on the previews of the loftmatic page you get the Processing code. Clicking the program numbers under each paragraph will also take you to the Processing code.

First thing that attracted my eye was: hint (ENABLE_DEPTH_TEST); What does that mean? I found some useful information here: Not that it is now clear to me but I know now a bit more of what it does. It allows you to combine 2d and 3d drawing? Anyway… I am using it and maybe I will find out why it is there later. I think I am going to need an on/off-key for the blue box which is around the agents. It might be handy for orientation purposes. But I don’t need to see that box always. Especially when I make screendumps. I define the variable ShowBox for that. And pressing the ‘b’ / ‘B’ key toggles between ShowBox and do not ShowBox. Made the usual adjustments of global variable names and wordspaces. And I have put the menu name outside the display screen. Otherwise that name will show up during the animation or screendumps. I did not change anything in Marius Watz’s TileSaver’s tab. That would take an extra week to find out how it works.  Instead I played with the controlp5 settings for a while. Ah… same problem as the earlier examples with the png’s. It’s creating a transparent file. So I have to import it into Photoshop to make it full color. Make the background a color of my choice and save it as a copy. Or save it as a jpg. Which might lead to lower image quality. Does the TileSaver class make any sense or does it produce the same transparency problem? No it doesn’t. It gives me a perfect 2400 x 2400 pixels png file. No transparency at all. Just a very large screendump. But how do I get it smaller. What does the global variable QualityFactor 3 do? My display window size is 800 x 800. Hmmm… 3 x 800 = 2400. So maybe if I make the QualityFactor just 1 it spits out an 800 x 800 png. And this is the case! So QualityFactor = the size of the image. As a result I have renamed that global variable to ImageSize.

I would like to bring in some color. Where can I do that? I saw that color is used in the next example. And the color is generated in the Agent class. I copied that piece of code and adapted the colors to my needs. Also added transparency. Strange enough the setting does not give me an idea of a 3d environment. Are those lights working? Even if I switch them off the scene seems to be lighted. And because I don’t know why they are on I leave them off (like in te real world).

Cranked up the AgentsCount to 10000. Made a few examples with rectangles.

Slowed down the animation to 10 frames per second. Otherwise it is difficult to get an impression of what is really going on in the display window. Created long rectangles.

In the Agents tab I repeated the ribbon.drawMeshRibbon twice. One with a width of 10 and one with a width of 50 (pixels?). Not sure about that size.

Used very small rectangles. Almost particles size.

I found a few lines of code in the Ribbon3d tab which were commented out. Just put them in again to see what would happen. It creates triangles.

Continuing with replacing PVectors. PuhVector! As Daniel Shiffman mentions it in the accompanying videos of his ‘Nature of code’ book. I did not finish his book yet but I noticed that you can use a lot of methods with PVector. I will try to use some of them. A PVector is a way to store two values. Or in this case three values because I’am working in 3d. Talking about PVector I have thrown away all my vertices and replaced them by curve-vertices.

Made every movement very relaxed and easy. Slow changing lines which render for 3000 pixels. So they render outside the box. Eventually they stop in the box. If you put the box upside down and looking into it you get a total different view of the same object. I let it render for fifteen minutes while cleaning my espresso machine.

1500 AgentCounts. It is still rendering very slow. But it delivers interesting images in the display window (if you let it render for fifteen minutes).

At this point starts the second part of the agents in space. The functionality of the ribbon is summarized in the class Ribbon3d. But at that moment I was so annoyed by the fact that I did not find a way how to control the lights in the previous example. because they just didn’t have any effect. So I tried it once more. Switched off all lights. And created a spotlight. On a certain moment I saw that spotlights light fall on a small part of a ribbon. So I tried to manipulate the spotlight so that it had more effect on every ribbon which was rendered. And… succes! I now have to uncomment the coloring of the ribbons because to get an ideal coloring by light I have to color all ribbons white. So that is my next step.

I have the impression that the lights are not working on lines. In the Agent’s draw block I have changed drawMeshRibon for drawLineRibbon. And I get white lines. Which is the real color of the line. Another thing is that these spotlights do not give enough light. So I used an old trick which I used when I was using Lightwave 3D. I duplicated the spotlights exactly at the same coördinates. And that helped. The brightness of the spotlights is now twice as high.

Just playing with the controlp5 settings for now. Added a green light on the 200, 200, 200 position. It seems that this is not in the middle of the display window. Ok… the light positions are calculated within the display window. Which seems logical to me. I have increased the agents count to 10000. That makes the rendering again very slow. But that is not interesting because I do not make animations (yet). I only have to render one frame.

Increased the noise-scale to 10000. Added one blue light at the top left corner.

Going to put four lights on each cornerpoint. Doubled those lights to increase the brightness.

NoiseSticking? What does that do? Doubled it from 0.9 to 1.8. Hmmm… I did a search through the sketch but NoiseSticking seems to be nowhere else than at the top of the program were all variables are being declared. It is nowhere else being used. Changed angleY for angleX. Which did not deliver anything new of course. Changed offset from 1000 to 1. Played with stepSize.

Uncommented the Arrow mesh code in the Ribbon3d tab.

Reduced the agentsCount to 700. And strokewidthrange to 20. The camera points right into the box!

Increased MaxStroke to 200.

I used the camera to get very close into the box. Weird things are going on in there.

Finally I think that Marius Watz’s TileSaver class worked out very fine. I will use that from now on (if I can). By using it I can always make very large images without losing lots of image quality.

Generative Design Variations M.1.5 Noisy motion

I start with a copy of the Generative Design book’s introduction: ‘As you can see, the possibilities of the noise () function’s character are diverse. Until now, the generated values were always applied directly to a visual parameter (curve point, pixel color, or height position of the grid points). In the following examples the noise function is used to control dynamic parameters. The generated values now define the direction of movement of a swarm of agents. This example uses the same principle employed in the previous programs. The only difference is that noise () is applied to the rotation of grid elements. In the following programs, the arrows are no longer drawn but are used to control the movement of the elements.’ Until this point the book’s introduction. Here are the four programs I worked with:

As usual I have created a Flickr Album with most of the images I made during this assignment. Alas there was only a little JavaScript involved because the controlp5 Processing library is not supported by JavaScript. Instead you get the Processing code when you click on the previews of this loftmatic page. The first ten previews (from the top) will work with JavaScript but very slow.

I started with making the background black. That leaves you with an image without an arrow because that is already black. Made it white in Adobe Illustrator. I lowered the TileSize from 40 to 20. That means you can see the noise pattern better. But the arrow symbol is getting less recognizable. I also changed the strokeweight of the arc from 1 to 16. And made the color red with a transparency of 128. I think that arrow is of no use anymore as it is now. So I commented those program lines out. But they might come in later. Slow JavaScript ahead :)

Commented out the nofill in the arc section. I noticed that the arc was not fully closed at a certain point. So I increased the radians of the local angle variable to 450. Tweaked the colors somewhat to green and blue. Changed the background to red. The program runs in JavaScript but the behaviour is very slow.

Introduced some numbers. But because noiseValue produces a float I had to use round to make the number a bit more comprehensible for me. I only need to do something about the calculation. That doesn’t make sense yet. I think that noiseValue is ok but it delivers some non-data. So maybe I can use map to fill a  full circle which is 100% noise value.

Replaced the arrow by a white line. Why is there a stroke and strokeweight command in the Arrow section? I don’t think that has any effect. Maybe I added that in an earlier version. Checked the original program. No. It was already in it before I began working on it. Anyway I commented it out. This program also runs slow in JavaScript.

I doubled the length of the white line. And I think it might be doubled again. Or maybe I can use disableStyle and change the properties of the lines. That worked. Changed the color of the lines until it has a tilesize of 10 pixels. That image has hairy qualities at a certain setting.

Replaced the rectangle with a cross. The pattern is getting more chaotic by hitting the arrow-up-key on your keyboard. The arrow-down-key has the opposite effect.

When you increase the size of one of the two rectangles which make the cross you get totally different end results. But again the pattern is getting more chaotic by hitting the arrow-up-key on your keyboard. The arrow-down-key still has the opposite effect.

Increasing both rectangles (wich make the cross) give almost cloth-like images. Arrow-up and down-keys still have the same functionality.

Putting the cross on its side (in Adobe Illustrator) did not make much of a difference. So I used a rectangle with rounded corners.

Replaced the rectangle with a star-like image. Which makes very subtile nuances in the pattern.

Agents in two-dimensional space
‘In order to animate a swarm of agents in this way, all the agents are moved in the direction defined by the noise () function to assume their positions. The only remaining consideration is what to do with the agents that migrate out of the display window.’

From here on all upcoming programs work with the controlp5 library. Controlp5 is a GUI library written by Andreas Schlegel for the programming environment Processing. Now I did not work much with classes and libraries before. So this could be getting interesting. As usual I start with changing the names of the global variables. And added wordspaces to the program for better readability. And as a result nothing was working. I got a stream of particles on the screen but they did not react on the controlp5 sliders. I found out that the global variable names were the problem. So I replaced those into the program settings of the controlp5 library. Another thing was that saveframe did not work properly. It gave me a kind of grayish screendump. This was because it creates a png-file with transparency. So I changed that to .jpg. And yet another thing is the menu button. When you make a screendump it is captured too. That is not what you (and I) want. So I display the menu button outside the display window. I’ve got a shortcut by pressing the ‘m’ key anyway. I studied the controlp5 library for a while. And I changed the line function into a point. That gives me the possibility to use the full range of strokewidth without losing the speed of the vectors. I also checked if JavaScript supports controlp5. Found this information on the GitHub sojamo/controlp5 site: ‘Currently there is no JavaScript version of controlp5, though I had started implementing a slimmed down version for processing.js but since it is now unclear which JavaScript version – processing.js or p5.js – will become the default js version of processing, controlP5.js is on hold. There is a tendency that p5.js will become the primary JavaScript environment.’ So as a result there is no working version in JavaScript. I will put the code online for the rest of the programs. Just played with the settings for a while.

I could be going on changing settings but what can I do to change the images the program delivers. Added two different colors, blue and yellow for each mode as a start.

Switched off noisestrength for a while. Saved frames during mode switching.

Would it be possible to define another group? Ok… I have made a mistake in my if structure. But it gives an interesting image because it now triggers two blocks of code instead of 1. But key 2 and key 3 are now behaving the same. Except for the color. What to do to change that behaviour? Added a new group under the 3-key.

I changed the color behaviour for the three modules. They are now using the HSB colormode. Although brightness is not so relevant because there is an alpha channel used.

Made a function called colorCycler. It cycles very slowly through the HSB colormode. in fact it does the same thing as the previous version of this program. Added a new DrawMode variation under the 4-key.

Added some growing corn-fields under the 5-key.

Used ColorCounter for the directionAngle.

Defined the 7-key for some concentrated ellipses. hitting the space bar creates a new noise seed.

The 8-key makes one great wave. Swiping all information to one side.

Three dimensional noise
‘The complexity of the agents behavior can be further increased when the three-dimensional variation of the noise () function is used to generate angle values. This three-dimensional noise can be thought of as a large cube of random numbers in which the individual values differ only slightly from their neighbors. If the agents still move about in the area, but the random numbers for their movement are selected from the different layers of this random number cloud they are no longer bound to the same paths. The closer these virtual z-coordinates lie to each other, the more they cluster together. The image becomes even more dynamic when the z-coordinates are changed slightly but continuously. The agent class has to be modified slightly to perform this new action.’

One of the first things I noticed that this 3D noise program is running in the P2D render mode. Strange. I thought P2D was 2D space and P3D was 3D space. So I looked that up. There are four render modes: the default renderer, P2D, P3D, and PDF. Switching to P2D or P3D is switching to 3D space? Default (‘slow’ but very accurate 2D render mode). P2D (OpenGL, faster but less accurate 2D render mode). P3D (OpenGL and well, 3D). PDF (for PDF output). Found this information on the GitHub Processing site. Meanwhile due to the changes in Processing 2.0, P2D and P3D have been replaced with variants of the OpenGL renderer. ‘We’ve removed the software-based (but speedy for some circumstances) versions of P2D and P3D. We feel that OpenGL rendering is probably the future for most Processing work, so we’re focusing our efforts there.’ So it is still unclear if P2D is the same as P3D but it might be better to run everything in OpenGL. I have changed the background color again. And did the same adjustments I did for the previous range of GDV’s. I also noticed that the space bar functionality for triggering the noise seed has disappeared in this range of programs. But I found that quite useful so I have put that back again. Tried the settings.

Played with the settings and introduced a blue color for DrawMode 2.

Did some testing with different file formats. The tif-format gives the best result. But also the largest file size. About 1.8 Mb per 800 x 800 pixels image. So I stick with jpg.

Made pairs of the points. A white and a blue point that work together.

Tripled the points and made them red, white and red.

Made flag-like objects. Assembled by red and blue lines.

The same thing but with more horizontal lines and blue, yellow and white colors.

Used the three RGB colors Red, Green and blue (although I am working in HSB). These images make you see things unclear and double.

Instead of enlarging the y-side I enlarged the objects on the x-side.

Finally put everything under an angle of 45 degrees by giving the same numbers to the x and y coördinates.

The bonus program
There was one more bonus program in the directory. It is not being discussed in the Generative Design book. But I’ve made some variations with it anyway.

Used a very small rect to create movements.

Replaced the rectangle by a bezier curve wave symbol. This makes the program behave very slow. But it delivers interesting images.

Used a pill-like shape as the main object.

Used a stairs like (could also be roof like) image as the main object.

That looks like sheets of paper running off a printing press.

Used text to make the structure. The program is reading the x-position and is dropping that information into the noise-stream.

Used the year, month, day, hour minute and second function as input. Something strange happened here. I defined the time and dat variables in the top of the program. But when I runned it the program did not refresh the seconds. After a while it was clear to me that you should initialize the date and time functions in the draw block of Processing. Otherwise the date and time functions will not update.

800 white swans. It’s not completely foolproof because some reflections overlap the real swans.

Another variation but now with arrows.

And one with red and colorized circles which might look more like tubes. But they are just circles.