Generative Design Variations M.6.4.1 Visualizing proportions

Here is the summary of the Generative Design book: ‘Until now the nodes have all looked the same, although they represent completely different Wikipedia articles. For instance, it is not apparent if a represented article is long or short, how many left in it refer to other articles, or if the article itself is refered to. It would make sense to draw the larger nodes when the articles are longer. It must be noted that the quantitative information is recognized by the area of the graphic element and not by its radius. A ring is drawn around the node with a width indicating how many links have yet to be displayed with the arrows originating from the node.’ So much for the summary. And here you can find the original program.
M_6_4_01_TOOL

JavaScript does not support the Generative Design library. And I am not sure but I think the Processing XML data class is also not supported. Furthermore, there are some (for me) obscure things imported in this tool: java.io.UnsupportedEncodingException, and some java utilities. And because this program is a tool I did not find it necessary to put the programs online. I have created a Flickr album where all the images can be found that I have made during this exercise.
GDV_M_6_4_1

Extremely annoying to say but to be frank this tool does not work. It displays the keyword Design. And you can add a new node. But that’s all. I started the program several times. That worked sometimes during using the previous program (M.6.3.1). After three times the program than suddenly started. But that does not work now with this program. I have figured out three different ways I can still use this tool. The first way is to import the changes I made in M.6.3.1 (the previous program) and look what happens. The second way is to build on the previous program (M.6.3.1). And then forget about the tool. And the third way is to try to make my version of the tool. That program would have absolutely nothing to do with what is described in the Generative Design book. But that would obviously be sad. Since I have been able to use all the programs so far. I first replaced in the WikipediaNode class all http:// links by https://. And then I was surprised that the program worked normal. I get no more errors in the console. So the problem seems to be solved easily. I reported that on the Generative Design website. Ah … and this could also be one of the causes. I work with a Wacom tablet and a pen. When I start the program with the pen it sometimes does not work. When I start the program with the mouse on the Wacom tablet then it starts most of the times. Sounds very vague. But it is what it is.

As usual I started to type all the book-comments into the code. I also downloaded the complete font family MISO. MISO is an architectural lettering font completed in 2006 by Mârten Nettelbladt. I wanted to test whether any of these fonts (or a combination of them) is also suitable for use in this program. But unfortunately this did not lead to better results. I did not choose for a different keyword. That will happen in the following exercises. The keyword for this exercise is ‘Design’. I am now going to set the first variables. Auto Zoom is true. Invert background is true. I do not know what the variable resultCount represents. So I’m going to increase it from 10 to 50. Ah… resultCount is the number of nodes with which the program starts. I put this back to 1 for now. Then it is much easier to track where all nodes link to. I think a resultCount of 500 is the limit for this program. That number is also as stated in the API lines of the WikipediaNode class. There also occurs a strange side effect in the graphics of this program. The design node begins to vibrate violently when I use high numbers of nodes. I have no idea why. I also removed all color information from the image. Bringing color in the graphics will be the next assignment.
M_6_4_01_GDV_01

Let’s use design related keywords for these exercises. I will use the keyword ‘Designer’ for this exercise. That’s a tiny difference from the previous keyword: Design. But there is a big difference in the end-result when you put the spring length at 10 or 500. I can influence that amount via the GUI. So these differences are even getting bigger. I reduced the minimum setting. And the doubled maximum setting in the GUI. The disadvantage is that the texts in many nodes can no longer be read. So you may have to zoom in. Actually, this typographically not very wise. Perhaps the texts had to decrease more slowly when creating more nodes. Or switch off automatic zoom.
M_6_4_01_GDV_02

Keyword: Industrial Designer. I have put the spring stiffness very low. This way you can make beautiful organic structures. If you want to go that way. The tool can also create unexpected node clusters.
M_6_4_01_GDV_03

Keyword: Design Research. What happens if I double the slider to for the spring stiffness again? Then everything becomes even more interesting. Only the readability goes steps backwards. In this case, I do not care but my clients will appreciate it less.
M_6_4_01_GDV_04

Keyword: Graphic design. Spring strength and spring stiffness are at their maximum. Spring damping is on its minimum. This results in very fancy circles which are formed by the nodes. As you change the settings the circles are getting more organic again.
M_6_4_01_GDV_05

Keyword: Industrial design. I Increased the node radius to its maximum. Once to its minimum and one time half of the slider. I also increased the spring length. At a certain moment all nodes pile themselves up. Therefore it seems that there are fewer nodes present. But by playing with the settings the nodes are getting visible again. M_6_4_01_GDV_06

Keyword: Designer drug. Brought every setting to its maximum. But wait … that’s a reassuring warning in my console: Error during asyncHTMLLoad – but no problem.
M_6_4_01_GDV_07

Keyword: Design Patent. Brought the line weight to an extreme setting. This results graphically in nice images. But I really should do something about the size of the texts. I’m going to try to solve that problem in the next assignment.
M_6_4_01_GDV_08

Keyword: Software design. Just a variation in which I made the line thickness excessively thick. It is less refined but not really wrong. Plus some screen dumps of the moments that I’ve zoomed in really deep on a constellation of nodes and springs.
M_6_4_01_GDV_09

Keyword: User interface design. Actually, the gray text on black rectangles is not readable. Perhaps there is also room for improvement for that issue in the next assignment.
M_6_4_01_GDV_10

Generative Design Variations M.6.1.1 Repulsion of the nodes

I have entered the last chapter of the Generative Design book. Here is the intro of the first assignment: ‘Mathematically speaking, the result of this chapter is a graph—i.e., a set of nodes (the representation of Wikipedia articles) that are sometimes connected. A directed graph is even more precise because the connecting lines between the nodes are depicted as arrows. A fundamental challenge in the depiction of graphs is finding the best possible position in the space around each node that few lines will overlap and space will be left for labeling. A force-directed layout (also called a force-directed graph) elegantly solves this problem. Two opposing forces are needed for force-directed layout: the repulsion of the nodes among themselves, and the attraction of the connections. When these forces are simulated through an iterative process, the grid optimizes itself over time.

Repulsion of the nodes
Until now, we have spoken of nodes in a more-or-less abstract manner. Now, we have to think about how this abstract concept can be translated into a program. In this example, we will build on the familiar node class in the chapter ‘Attractors’, which already contains the most important properties, such as position and velocity. All that needs to be added is the ability for individual nodes to repel each other.’ Until so far the Generative Design book summary. Here you can find the original program:
M_6_1_01

JavaScript conversion from Processing did not work. But I have organized a summary page of all the images I made during this assignment. You can find them in this Flickr album.
GDV_M_6_1_1

A while before I started this chapter I already knew that it would be a difficult one. A few months ago I checked all the files from the chapter. 3 Of the 7 programs did not work. In all 3 cases I got a ‘[Fatal Error]: 1: 1: Premature end of file’ warning in my Processing console. I have tried if I could fix the programs but that worked only partially. I got caught up in XML and XML-related problems. Eventually it had given me an overwhelming amount of possibilities that could perhaps solve the problem but I could not trace what was the best option. I spent a day on the issue. Than I sent an email to the Generative Design colleagues. I have updated them with  my current status. And mentioned that It would be very sad if I have just to drop out in the last chapter. For now, I have not heard anything from them. If I hear something in the future that’s fine. If I hear nothing I’ll go myself to search for solutions. Which could mean that this chapter evolves differently than described in the Generative Design book. Anyway. This is also one of the things you have to consider when doing a self-study. You have to do everything yourself and nobody will help you (in the worst case).

So my plan is now just go and see where I end up. And to be honest that is not really different from how I continued to work from the beginning of October 2013. I have the boundary 100 pixels pushed inwards. And the number of nodes are increased from 200 to 400. It is strange that when everything has stopped a pattern is recognised. It’s not exactly the same pattern every time but it’s pretty similar. I doubled the amount of nodes again from 400 to 800. But the final static pattern remains the same.
M_6_1_01_GDV_01

The diameter of the nodes is now reduced to 3 pixels. The number of nodes is doubled again to 1600. The program is not running smooth but that is not important at this stage. For me, you have to understand a little of the mechanisms and makes nice visualizations. Animation comes later. I reduced the diameter of the nodes to 1 pixel. 3200 Nodes in use. The 1 pixel diameter I find less successful and the strange thing is that the nodes still create a lot of symmetry.
M_6_1_01_GDV_02

What will happen when I change the overall settings of the variables in the Node class? This certainly offers a lot of interesting but then again similar images.
M_6_1_01_GDV_03

The maximum velocity (speed) reduced from 10 to 2. Brought damping, radius, strength and ramp up and down to judge the effect of these variables.
M_6_1_01_GDV_04

What mechanism determines the direction of the nodes? It’s not entirely clear to me. The last image in this range was created after I watched 15 minutes to the Tour de France (the etappe from Lannemezan to Plateau de Beille). It is almost completely symmetrical.
M_6_1_01_GDV_05

I have pushed the boundary just outside the display window. Therefore, the nodes return back into the display window. That’s actually not what you want because it makes the final picture very busy. The damping and scale variables are apparently very decisive for the result.
M_6_1_01_GDV_06

The result of this chapter is (or should be) that a number of Wikipedia nodes are sometimes linked. Perhaps it is worth trying to see if the start position of each node has an influence on the result. The starting position is now the center of the display window. But not exactly the center. There is a random factor of -1 and 1 pixels offset. What happens if I continue to pull those positions further apart? In the x direction it makes only a difference at the starting position. The end result remains the same. It also seems that not much is changed when you increase the offset as far as 1600 pixels for the x and y positions.  Again it turns out that the starting position is shifted from the center. And that is what you might expect. For the end result it doesn’t make a difference.
M_6_1_01_GDV_07

A number of images in which I explored the limits to find out where chaos begins and ends within the nodes.
M_6_1_01_GDV_08

Even more chaos testing.
M_6_1_01_GDV_09

I have spent some time on the float f line in the node class. It emerged that this program is also a nice tool to create flower-like structures. In the context of this assignment that is not really very functional but it delivers me a different result than I had expected at the beginning when I started this task. And I see that as a quality too.
M_6_1_01_GDV_10

Generative Design Variations M.5.4 Sunburst trees

The second part of the sunburst diagrams takes me into the sunburst trees. The description of the Generative Design book is as follows: ‘Thanks to the preparatory work in the two classes FileSystemItem and SunburstItem, it is now easy to create a networked and tree-like representation based on the sunburst diagram. Only the SunburstItem class needs to be extended by the ability to draw a connecting line to the parent element. Bezier anchor points are also required to connect the two instances of SunburstItem with curved lines.’ That is what the Generative Design book learned me. You can find the original code here.
M_5_4_01

Because the program will not work in JavaScript I made a flickr album with all images I created during this assignment. You can find that here.
GDV_M_5_4

I copied all comments of the book version into the program itself. I always do that because that is one way to get into it. Changed the background color to black. I almost changed nothing in the program. Not that I could change much because that FileSystemItem class of Ben Fry looks pretty daunting (or let me call it challenging). This is how my sunburst tree looks now.
M_5_4_01_GDV_01

Oh… I forgot to give the dots a color. In fact they have a color but you wont see them because the dots are the same color as the background. Fixed that. The next thing I am going to do is to update our film directory with three new films. And I will also change the order of the directory. In the earlier version the top-level of the directory was filled with films who received 10 points. I will reverse that. So the top-level (the inner part of the circle) will be filled with films who have scored 0 points and the lower level (the outer part of the circle) will be filled with films which scored 10 points. It makes a minor difference in the shape of the diagram if you compare it with the M.5.3 tree diagrams chapter. Line quality is terrible. Have to find a way to improve that.
M_5_4_01_GDV_02

Spend a lot of time to check how the colors are set. It is still not 100% clear to me how that exactly works. I think I could make a special assignment about that. But I will not. I think also ben Fry’s FileSystemItem class needs some more attention from me. Finally I did manage to improve the line quality.
M_5_4_01_GDV_03

My question is now… why are the outside dots always filled with the same color? Another strange thing are the fileArcScale and folderArcScale variables. Are they in use? I have comment them out and the program behaves normal. I don’t see any change in the diagrams. And the program doesn’t make use of arcs. I kept the brightness of lines and folders on 100. When I put dotBrightnes to zero in the initialization it still displays the same. It doesn’t make any difference. But when I change dotSize during the initializing phase it does make a difference. Setting hueStart to zero and hueEnd to 360 makes everything red except for the lines and the directories and subdirectories. Setting hueStart and hueEnd both to 360 makes  also everything red. Setting hueStart to 359 and hueEnd to 360 gives me the total range of hue’s.
M_5_4_01_GDV_04

I have replaced calcEqualAreaRadius (which should return radii to have equal areas in each depth) for calcAreaRadius (which returns radii in a linear way). It is not clear to me why calcEqualAreaRadius does not returns equal area radii while calcAreaRadius does. This gives more room to see the individual dots. Also increased the size of the diagram. The bezier version of this diagram will be the first version of the diagram which may look nice but is totally not functional.
M_5_4_01_GDV_05

Another totally nonfunctional diagram variation. I only show the bezier version because the line version stayed the same as in the other earlier version. I did not work on that.
M_5_4_01_GDV_06

And because I did not work on the line version I have spent some more time on it. I finally ended up with a variation that shifts all sunburst items in the line version and in the bezier version. Which is again a totally not functional diagram.
M_5_4_01_GDV_07

I adjusted the line thickness and the begin and end of the lines. Modified the transparency a bit. Small adjustments on the size of the diagram to let it better fit into the display window.
M_5_4_01_GDV_08

Pulled everything outside the border of the diagram. Again not very functional because you cannot trace the links between folders files and directories.
M_5_4_01_GDV_09

Default settings of lines and some extravagant adjustment of dots and transparency.
M_5_4_01_GDV_10

Generative Design Variations M.4.2.4 Attractor vortex

This is some of the text from the Generative Design book: ‘It is also fairly easy to change the attractor so the force f no longer has an attracting or repelling effect but rather leads to a vortex effect. Like the node class, this attractor class can be found in a slightly expanded form in the Generative Design Library. The attractor functions just discussed can be configured using the property mode, the value of which is one of the constants: Basic, Smooth and Twirl.’ Here you can find the original program.
M_4_2_04

I could not put my modified programs online because the programs are not supported by JavaScript. JavaScript does not support the Generative Design Library. So I have made a Flickr Album which contains all still images I have made during this assignment. You can find those clicking this link:
GDV_M_4_2_4

The links below the following paragraphs will redirect you to the Flickr page to the image I describe in that paragraph. It is quite interesting to see how these chapters lead you into very complex programs. It all starts very simple and during the making of the assignments you get a better understanding how the final tool does its work. In this assignment I began with inverting the lines and background color. The lines are in fact build by very tiny ellipses. Changed the grid size to 1000 x 1000 pixels. That gives me more headroom to misuse the grid of nodes. Ah… the pdf turns out to be a wrong example of the Processing sketch. It draws the ellipses with black outlines. So I do not worry about that and continue with working with png’s. Made some variations with those swirly lines. In the last variation you can notice the separate dots very well. But its nice that they still behave in line of each other. I also kept everything just black and white. Doing that keeps me concentrate on creating shapes without worrying if it’s a good color combination. If it works in black and white it surely will work in some colors.
M_4_2_04_GDV_01

Made a few variations with the twirl. I think it is too frivolous. I don’t like this series. But still I thought it would be good to show them.
M_4_2_04_GDV_02

I lowered the damping to 0.1. That is giving me the opposite effect of what I would like to see. But maybe this is another opportunity to do something with it. I also replaced the ellipses by a rectangle. That makes the program faster and because the rectangle is only 2 x 2 pixels you don’t notice that it is not an ellipse. I also increased the alpha channel to 32. Start with grey lines and because they are overlapping each other they create white areas. I think the compositions are best when you leave some areas of the horizontal line pattern untouched.
M_4_2_04_GDV_03

Reduced the attractor size and the attractor damping. The damping is now so low that it takes almost a minute to end all motion. I think it’s too low so I raised it again.
M_4_2_04_GDV_04

Increased the impact radius of the attractor. Decreased yCount because of the disturbances in the image. And also increased the attractor ramp. The program generates very unusual images. The side effects are also very interesting. Looks like a sound wave has gone through the lines.
M_4_2_04_GDV_05

In the previous sketch I dragged random through the display image with the cursor. In these images I just pointed with the cursor at a few arbitrary places in the display window. I tried not to move or drag with it.
M_4_2_04_GDV_06

Just keeping the cursor still roughly in the middle of the display window.
M_4_2_04_GDV_07

In these examples I made very small  circular movements with the cursor in the middle of the screen.
M_4_2_04_GDV_08

I Changed the force to the node speed. I divided dy and dx by f.
M_4_2_04_GDV_09

Brought everything in to extreme high numbers. Which seems to be a good thing for creating strange images. Not that I like them. But I never thought you could create them. Which is also a good thing.
M_4_2_04_GDV_10

Generative Design Variations M.3.1 Creating a grid

Creating a grid is not a spectacular job but it is very helpful to design things which have to look functional. I use grids all the time. So this example should be familiar to me. The Generative Design book explains it a follows: ‘Before a three-dimensional object can be created, we need a grid of points in a two-dimensional plane to be ‘bent’ to form closed areas. The easiest way to do this is to arrange the points in a regular grid. The first step is to find the most flexible way to draw such a grid. Processing enables tiles to be drawn with QUAD_STRIP or TRIANGLE_STRIP. This is a reasonable choice since the grid points should be individually movable later on.’ You can find the original program here:
M_3_1_01

All the images I have made during this assignment I gathered in a Flickr album. And (some) JavaScript and code can be found on my loftmatic page.

When I first ran the program I got a totally different image than the attached pict-file in the programs folder showed me. Lines were extremely thick. So I checked if there was a strokeWeight involved. And that was not the case. Then I checked if there was something wrong with the QUAD_STRIP parameters. But everything seemed to be fine. I checked the next program (M.3.2). And it had the same extremely thick lines in it. But here there was a strokeWeight involved. So I changed the strokeWeight to 0.01 pixels. And than it seemed ok. So back to M.3.1 I added a strokeWeight of 0.01 pixels too. Changed the global variable names for readability and understanding purposes. Switched the background to black and the lines to white. Added functionality to the s-key for making screen grabs. Started with a .png. But the image quality was poor. Imported Marius Watz ImageTiler. But the image was still not very good. I think that saving as a pdf might help. It helps but it does not render the background black. So I have to restore everything in Photoshop. TileSaver works. Pdf doesn’t. After cranking up the horizontal and vertical tiles to 20 pdf gives me am indexoutofboundserror. So .pdf is no option. Continued with the TileSaver class.
M_3_1_01_GDV_01

The origin is now in the middle of the display window. That is where the coördinate system begins. It evolves down and to the right. But I find it a difficult to handle the grid. It is connected to the top left of the grid-mesh. So I copied the existing for loop with a translation to the left and with the same amount of horizontal and vertical tiles.
M_3_1_01_GDV_02

I have now 4 grids of 40 x 40. To make that clear I added 1 grid-unit in between.
M_3_1_01_GDV_03

I could make the 4 grids of a different size. And put them together as if it was one object. I have to apologize for the terrible image quality JavaScript delivers. In Processing it looks better.
M_3_1_01_GDV_04

JavaScript stopped working after the previous file. From now on you only see the Processing code in the links. And because I can now fill the grids in as if it were 4 different grids I have the idea to make different objects that use the grid as a base. Very simple object of course. I have drawn 16 variations of this system on paper. Would it be possible to import those light settings from M_2_4 again? That sure is possible. It is now just a matter of making those variations. And maybe I find any new ideas during that work. For the rest of the programs go to my loftmatic page. And click on the previews for the Processing code.

I found some more ideas. But I think it is better to continue to the next example instead of making more variations on the grid theme.

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:
M_2_5_01
M_2_5_02

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.
M_2_5_01_GDV_01

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.
M_2_5_01_GDV_02

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.
M_2_5_01_GDV_03

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.
M_2_5_01_GDV_04

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.
M_2_5_01_GDV_05

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.
M_2_5_01_GDV_06

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

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.
M_2_5_01_GDV_08

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

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.
M_2_5_01_GDV_10

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.
M_2_5_01_GDV_11

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

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

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.
M_2_5_01_GDV_14

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.
M_2_5_01_GDV_15

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.
M_2_5_02_GDV_01

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.
M_2_5_02_GDV_02

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.
M_2_5_02_GDV_03

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.
M_2_5_02_GDV_04

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.
M_2_5_02_GDV_05

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.
M_2_5_02_GDV_06

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

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.
M_2_5_02_GDV_08

Added some other variations.
M_2_5_02_GDV_09

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

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:
M_2_4_01

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.
M_2_4_01_GDV_01

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.
M_2_4_01_GDV_02

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).
M_2_4_01_GDV_03

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.
M_2_4_01_GDV_04

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.
M_2_4_01_GDV_05

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.
M_2_4_01_GDV_06

Continued with the search for new objects and interesting combinations.
M_2_4_01_GDV_07

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

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.
M_2_4_01_GDV_09

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?
M_2_4_01_GDV_10

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.
M_2_1_01

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 https://www.theleagueofmoveabletype.com 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.
M_2_1_01_GDV_01

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.
M_2_1_01_GDV_02

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.
M_2_1_01_GDV_03

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.
M_2_1_01_GDV_04

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.
M_2_1_01_GDV_05

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.
M_2_1_01_GDV_06

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.
M_2_1_01_GDV_07

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.
M_2_1_01_GDV_08

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.
M_2_1_01_GDV_09

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.
M_2_1_01_GDV_10

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.
M_1_6_01_TOOL
M_1_6_02_TOOL

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: https://www.andrew.cmu.edu/course/60-257/reference/hint_.html 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.
M_1_6_01_GDV_01

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).
M_1_6_01_GDV_02

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

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.
M_1_6_01_GDV_04

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.
M_1_6_01_GDV_05

Used very small rectangles. Almost particles size.
M_1_6_01_GDV_06

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.
M_1_6_01_GDV_07

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.
M_1_6_01_GDV_08

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.
M_1_6_01_GDV_09

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).
M_1_6_01_GDV_10

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.
M_1_6_02_GDV_01

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.
M_1_6_02_GDV_02

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.
M_1_6_02_GDV_03

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

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

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.
M_1_6_02_GDV_06

Uncommented the Arrow mesh code in the Ribbon3d tab.
M_1_6_02_GDV_07

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

Increased MaxStroke to 200.
M_1_6_02_GDV_09

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

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:
M_1_5_01
M_1_5_02
M_1_5_03
M_1_5_04

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 🙂
M_1_5_01_GDV_01

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.
M_1_5_01_GDV_02

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.
M_1_5_01_GDV_03

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.
M_1_5_01_GDV_04

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.
M_1_5_01_GDV_05

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.
M_1_5_01_GDV_06

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.
M_1_5_01_GDV_07

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

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

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

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.
M_1_5_02_GDV_01

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.
M_1_5_02_GDV_02

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

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.
M_1_5_02_GDV_04

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.
M_1_5_02_GDV_05

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.
M_1_5_02_GDV_06

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

Used ColorCounter for the directionAngle.
M_1_5_02_GDV_08

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

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

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.
M_1_5_03_GDV_01

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

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.
M_1_5_03_GDV_03

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

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

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

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

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

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

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

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.
M_1_5_04_GDV_01

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

Used a pill-like shape as the main object.
M_1_5_04_GDV_03

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

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

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

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.
M_1_5_04_GDV_07

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

Another variation but now with arrows.
M_1_5_04_GDV_09

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