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

Generative Design Variations M.1.4 Noisy landscapes

The introduction in the Generative Design book of this assignment reads as follows: ‘The preceding example of cloud textures is easily expanded to include pseudo realistic landscapes with mountains and valley’s. Rather than coloring pixels in levels of gray, the height position of the points on a grid is modulated using the same principles. The resulting grid is only sketched here and is examined in more detail in the chapter ‘Formulated bodies’. And here is the original program:
M_1_4_01

I made a Flickr summary page. Here you can find most of the images I made during this assignment. If you click at the thumbnails of this loftmatic page you can find all programs. It was of no use to do a JavaScript conversion because the programs don’t work in JavaScript. I did not spend any time on finding out what the issue was because I would like to study Processing. Not JavaScript.

Two new things are introduced in this chapter: Processing 3D and the TileSaver class of Marius Watz. The TileSaver class is used for rendering high-resolution images by splitting them into tiles using the viewport. The program is full of public void’s which I never have used. To dive into that is a bit too much work if you ask me. So I will only concentrate on the main program. And I think that is the essence of classes. That you don’t worry about them. Just use them. The Processing 3D part is new for me. I never did anything with it until now. But in the past 15 years I have worked a lot with NewTek’s LightWave 3D. Here is an example of an animation film which Jeanne de Bont and I made with Lightwave. So the first thing I would like to do is to get all color out of this object. After that has been done I need to check what I can do with the lighting settings. But first I have to change the names of the global variables. And I have put some wordspaces in the program for better readability purposes. I Have put the ‘Landscape’ as a top view. Removed the ambient light and replaced it by two spotlights. A blue and a red light. I also removed all wild hills and valleys until I was left with a kind of creasy paper.
M_1_4_01_GDV_01

I increased the tile count to 6000. And than it gives me a kind of Perlin noise. Which might be Perlin noise indeed because the noise function is used. Let’s double that to 12000. That takes 90 seconds to render. And it makes a lot of Perlin noise. Let’s see what TileSaver does with that. The console says ‘TileSaver: 4 tilesResolution: 3200×3200. But there is nothing in my sketchfolder. Than it continues with 006.25% completed. 1/16 images saved. 012.50% completed. 2/16 images saved. 018.75% completed. 3/16 images saved. 025.00% completed. 4/16 images saved. 031.25% completed. 5/16 images saved. 037.50% completed. 6/16 images saved. 043.75% completed. 7/16 images saved. 050.00% completed. 8/16 images saved. 056.25% completed. 9/16 images saved. 062.50% completed. 10/16 images saved. 068.75% completed. 11/16 images saved. 075.00% completed. 12/16 images saved. 081.25% completed. 13/16 images saved. 087.50% completed. 14/16 images saved. 093.75% completed. 15/16 images saved. 100.00% completed. 16/16 images saved. Save: 150106_145725_3200x3200.png Done tiling. But there are still no images left in my sketch folder. It only saved 1 image of 800 x 800 because I pressed the s-key.
M_1_4_01_GDV_02

I increased the octaves amount. And added a green light to it. Tried TileSaver again. This time it works fine. It makes 1 image in 3200 x 3200 pixels by rendering 16 separate parts of the display window.
M_1_4_01_GDV_03

Used 4 lights now. A magenta, cyan, red and orange light (which is in fact yellow).
M_1_4_01_GDV_04

I have cranked up the mesh Z-Scale to 1000.
M_1_4_01_GDV_05

Lowered the NoiseFalloff to 0.01.
M_1_4_01_GDV_06

Increased z_Scale to 2000. And tilecount to a 100. And than it renders architecture like images.
M_1_4_01_GDV_07

Lowered the TileCount to 3.
M_1_4_01_GDV_08

Tile count 6 and z_Scale are now on 2000.
M_1_4_01_GDV_09

This all went very well in the last few hours. So I start once again and maybe I can do even more later.
M_1_4_01_GDV_10

Now I have made 10 variations I can start from the beginning. So I open M_1_4_01_GDV_01 and check whether I can see new ways to interpret this sketch. I have moved the hue lights to the rights side of the square. Maybe it good to increase the Z_Scale to 50. Increased the OctavesAmount to 40. And Processing is reacting very slow. Even the refreshing of the display window takes at least 15 seconds.
M_1_4_01_GDV_11

A TileCount of 12000 is of course ridicules. It takes at least more than 90 seconds to render one frame. And the result is not very good. So I lowered that to 1000. OctavesAmount is now also 100. I am going to put two more  lights in it. It seems that the distance of the light to the surface does make a difference. Closer to the surface makes it harsh. Further away from the surface gives soft shadows. Is that true? Let’s check that. All lights have now the same direction angle and concentration. Still not sure how the direction works. Anyway I made all settings for all lights the same. Except for the positions. They are all located on the corners. I did a few changes. All lights are now on the zero-Z position. Going to put them on 100 in the Z-range. Another one will be in the 200-z range. And it seems that I have to increase the concentration when the lights are higher.
M_1_4_01_GDV_12

Imported the light settings of the previous sketch into M_1_4_01_GDV_03. Saved that as M_1_4_01_GDV_13. Surprisingly it works well. We have a kind of sponge-like structure. And the lights are giving a very well representation of that structure. So what happens if I put the lights even further away. Let’s say the double the distance. That gives an interesting mix but I would like to see more black in the middle.
M_1_4_01_GDV_13

What about putting a white light in the middle? interesting. Can I make a loop with lights? I’ll give it a try. I get the following sentence in the message area: ‘java.lang.RuntimeException: java.lang.RuntimeException: can only create 8 lights’. That is weird. Thought it might be the loop itself that creates this problem. So I copy-pasted 5 lights to get 10 lights and I still get the same error message. Ok… I found a OpenGL FAQ: https://www.opengl.org/wiki/FAQ#Why_limit_to_8_lights.3F See FAQ number 29. So there you have it. It is not possible to use more than 8 lights. Hey… but you can use shaders. Fine. But I will not use them now. Did not find the white light in the middle an improvement anyway. Here is another fine discussion: https://processing.org/discourse/beta/num_1118343753.html
M_1_4_01_GDV_14

When opening this one my lights were probably in the surface. I had cranked up the Z-Scale to 200. So the light were on but hidden in the structure itself. I have put them a little higher about 500 pixels? Is this measured in pixels?
M_1_4_01_GDV_15

Variations on M_1_4_01_GDV_06
M_1_4_01_GDV_16

TileCount 1000 and Z_Scale 2000. Light falloff .9, 0, 0.
M_1_4_01_GDV_17

It seems that you can scroll with your mouse or pen on the display window to get other variations. Making variations has never been so easy.
M_1_4_01_GDV_18

The display window is divided into halves. Maybe it has something to do with the fact I only have 6 tiles. I’ll make it 9. Ok… its gone.
M_1_4_01_GDV_19

Variations on M_1_4_01_GDV_10
M_1_4_01_GDV_20

This chapter had ‘Noisy landscapes’ as a title although I did not make any landscape with it. Instead I looked for other things. And I have to admit that I found some usefull approaches which I never had used when I started with this chapter. You never know where you end up when programming. And I see that as a good thing.

GDV M.1.1 Randomness and starting conditions

I have arrived at the ‘Complex Methods’ part of the Generative Design book. So now it’s getting serious (I think). Let’s see what the first assignment is as it is described in the Generative Design book. ‘In Processing the random generator is the function random (). The term ‘random’ usually signifies an unpredictable event. A random generator created with the help of a computer, however, will never be able to create truly random events or actions because the seemingly random sequence of numbers has always been generated by an algorithm. This is called ‘determinism’ in computer science, meaning that the sequence of values is determined by the initial condition. This initial condition can be set using the randomSeed () function. The command randomSeed (42) therefore generates an identical sequence of values when working with the same random generator, which here are 0.72, 0.05, 0.68 etc. In many programming languages the initial condition is set unnoticed in the background, thereby creating the illusion that real random values are created each time the program is started. The y- coördinate of each point is generated by the random () function and all points are connected to a line.’ And here is the original program.
M_1_1_01

I also made an album on my flickr page of the images that were generated during this assignment. At loftmatic.com you can use the programs and check the code if you like.

Maybe it is interesting to start with a question. Why (while you have a random function) would you like to produce the same random numbers in the same order each time? Well… to be honest I really don’t know. But it seems that the random number we get from the random () function are not really random. They are a result of a mathematical function that simulates randomness. They would yield a pattern over time. So its pseudo-randomness. Using random seed gives you the same random values every time you run the program. Set the seed parameter to a constant to return the same pseudo-random numbers each time the program is run. But again, why would you want that? So I commented out all randomSeed related program lines. Than the program keeps on running. So is randomSeed used to stop and run the program? It is just used to get the same pseudo-random number again and again when the program is run. I just exaggerated the amount of lines by putting a line and a dot at every pixel in the width. Where the begin and endpoint of that line is placed is depending on the random factor. Ah… I see. So you use the randomSeed one time for drawing the lines. And a bit further you use randomSeed again to generate the same random numbers to place the points.
M_1_1_01_GDV_01

I lowered the amount of DoRandomSeed from 42 to 5. But I could not see any better or worse results. So if we know the location of the random points it might be easy to add an extra line or dot in its neighbourhood and create an extra position.
M_1_1_01_GDV_02

I have stopped working on this project for a week and I think that what I’ve done until now is not the way to go. I am going to try to make fake graphics with fake graphic representations using the random and randomSeed function. This looks to me a fine moment to start with some very simple data visualisation. It is relatively easy to put some numbers close to the dots. I have roughly ceiling-ed the numbers because otherwise you get a float number and that number is way too large. Now there are a few thing which have to be changed. For instance the graph is now on its side. But maybe that is good. Let’s see if I can control the data from the dots to make lines.
M_1_1_01_GDV_03

What do we need more to make this graphic seems to be convincing. We need labels. Oh, I forgot something. If you look near the left side of the graphic then the numbers are too high. It‘s because the numbers are calculated from zero (the left side of the display window that is). And I added a margin so that has to be subtracted from the amount. In this case its: xCeiling minus DisplayMargin and that gives the right numbers. What we also need are vertical axis labels. I think of years. And every line should stand for one month. So one year should contain 12 lines. Maybe its good to make a separate function for that. I call it VerticalAxisLabels. I also had a problem with the counting. At that moment it counts from the top (2014) down to a certain number. That should be the opposite. So there are now 27 years displayed. 2014 + 26 = 2041. It should start at the bottom with 2014 and count up to an amount of years. Fixed that by introducing the variable yearCounter. That will count down from 2040 to 2014. I also have to map our horizontal values to a percentage. Because I would like to say in the year so and so there is so much percentage of chance that this and that could happen. Don’t know what could happen at a certain year yet but for now I think this is the way to tell a story. So we have to map the numbers zero to 640 map that to 0 to 100%. At least I thought it would work like that. But I had to adjust it a bit just by fiddling with the numbers. And in the end I left out the years labels because I thought it would not make any sense. And I made a title in Photoshop. Had to do that because the font quality within Processing is not good enough in the smaller point sizes. Beside of that Processing (Java?) does not support the total range of the Univers font.
M_1_1_01_GDV_04

Based on this graphic I will try to make different variations. So how does this look like when you leave out all the lines? It doesn’t look boring. But you don’t have an idea about the orientation. Would it help if I double the amount of random numbers? It does help… a little bit.I wonder if it is possible to see a pattern in the random numbers that are generated. Hence the title: ‘How random is randomness’.
M_1_1_01_GDV_05

What if I introduce the dots again? Well they do help but it does not give you more information about what I am trying to communicate. I left out the lines and introduced the vertex from the original program again. Increased the strokeweight from 0.3 to 8 pixels.
M_1_1_01_GDV_06

Doubled everything except the font size. Centered the percentages in the circles.
M_1_1_01_GDV_07

I have now circles which are on the locations where the percentage lines end. It would be interesting  that these circles show the percentage. So… zero percentage is no circle. 100% = full circle. Can use the arc function for that.
M_1_1_01_GDV_08

The same can be done with rectangles? No. Not really. I used rectangles with a size of 5 x 5 pixels. Lines are being drawn from right to left.
M_1_1_01_GDV_09

The same variation but now lines are running from the top to the bottom.
M_1_1_01_GDV_10

So I made only ten varieties? That is not much. But I think I now have a better idea what the randomSeed function can do for me. That is the most important thing. Not the amount of variations you can make with it.

GDV P.4.2.1 Collage from image collection

This assignment is described in the Generative Design book as follows: ‘Your archive of photographs now becomes artistic material. This program assembles a collage from a folder of images. The cropping, cutting and sorting of the source images are especially important, since only picture fragments are recombined in the collage. All the pictures in a folder are read dynamically and assigned to one of several layers. This allows the semantic groups to be treated differently. The individual layers also have room for experimentation with rotation, position, and size when constructing the collage. Note the layer order; the first level is drawn first and is thus in the background.’ Until so far the description in the Generative Design book. Here are links to the original programs.
P_4_2_1_01
P_4_2_1_02

I started this assignment with a few photo’s I took in Denmark during our last holiday in April 2014. But after a while working with them I thought that it would be also interesting to try something else. A few years ago I went to the local bookstore. Bought five international newspapers: ‘De Volkskrant, De Morgen, Le Monde, The Times and La Gazzetta dello Sport.’ Selected hundred words or full headers and ripped them from the newspapers. I was specially interested in those words which came from Dutch, France, English and Italian languages but were still understandable in English. Scanned them. And made hundred collages with them which you can find here. I will use the same scans in this assignment. I also prepared a Flickr page with all the images which I have made during this assignment.

When I was running the program for the first time I did not notice how it got to the image files. After commenting the program I came across the word ‘sketchPath’. Checked the Processing reference but I got a ‘Not found’. I did not see the function ‘sketchPath’ before. What does it do? Checked the forum. Found a post from binarymillenium with an answer of JohnG: Re: Get directory of current sketch? Reply #1 – Dec 16^th, 2008, 5:31pm sketchPath(“”); will give you the path to the sketch, dataPath(“”); will give you the path to the data directory. You can put things into the method to give a file, e.g. sketchPath(“foo.txt”); will give you the path to a file called “foo.txt” in the sketch directory. Ok. Clear. So it does the same thing as selectInput does. Only with selectInput you have to find the image files yourself.

Now this is not going to work in JavaScript. If you run this program as a JavaScript file in Safari then Safari’s Error Console says: [Error] Processing.js: Unable to execute pjs sketch: ReferenceError: Can’t find variable: sketchPath. Ok! Then I exchange the sketchPath variable with SelectFolder () or selectInput (). But that is not going to work either because these variables are not yet implemented in JavaScript. I could add my images to the data folder but that means that I have to upload at least 3.8Mb per program x the 20 programs I have adjusted = 76 Mb images. That seems not a good idea. For the time being I just add the Processing code to the loftmatic website and leave the finished images on Flickr.

So I changed a few global variable names. I think its hard to read the variable ‘layer1Items, layer2Items and layer3Items’. Changed those names in Layer1_Items, Layer2_Items and Layer3_Items. This is a rather complex program (for me). A lot of things are still a bit mysterious. But I will start with changing the images to images of my own. I think that the first results are a bit too chaotic. Although a collage should be a bit chaotic. Let’s see what I can do to prevent that chaotic look. Made a copy of the footage folder. Changed the sketchPath link and removed all files until I had only three of them left. Does the program still work? It does. And the image looks less cluttered. I even wonder if I need those three layers. But I leave them in for the time being. I will only use the scans from the newspapers. I have put all settings on default (almost). And no rotation. I used only 3 scanned newspaper headers. Clicking on the next (and following links) will show Processing code only.
P_4_2_1_01_GDV_01

In the beginning I thought that those layers would not make any sense. But if you work a while with it than you know which layer has a good composition. So you keep that layer and change the other ones until they are fine too.
P_4_2_1_01_GDV_02

Lets see what rotation brings. Works fine. And I am not sure how the rotation works. Used radians to put layer 1 vertical. Also decreased the scaling factor a bit.
P_4_2_1_01_GDV_03

Rotated layer 3 270 degrees.
P_4_2_1_01_GDV_04

Now using 15 images. But I have ready more of them. I will add 3 per version. So I think in the end we will use 60 newspaper headers (if I make 20 variations) (not sure about that yet).
P_4_2_1_01_GDV_05

I think I have to reduce the image size of my footage. Some of them are more than 800 pixels in width. So that folders file size will increase with Mb’s during the next sessions. Ah… found out that the resolution is 150 pixels per inch. I can reduce that to 72 pixels per inch and they will all getting smaller. But it is also reducing the file size. Lets see how this new set works. The folder size shrinks almost a quarter. Ok. All images are smaller so I can set the largest randomized size factor back to 1.0. And that looks good.
P_4_2_1_01_GDV_06

Maybe its a good idea to add some primary colors to the compositions. Added a red, blue and yellow piece of paper. Ah… because my footage folder is increased with images I can never get the same compositions back again which I had in the beginning. Than I had only 3 images. If I load that file again it will be using all images instead of the 3 which I used in the first program. Anyway… I just continue. Its part of the learning process.
P_4_2_1_01_GDV_07

I wondered why my last newspaper headers were not in the final image. Forgot to update image count. It was still on 8.
P_4_2_1_01_GDV_08

What happens if I make it 20 for instance? The composition will just have more items in it. But also more of the same items.
P_4_2_1_01_GDV_09

I have removed the randomized loading of images. I like a certain amount of images which are just enough to make the composition fine. No more and no less. It’s now on 20. But what about 100? That isn’t any good because only the top layer will be visible. So You have to reduce the scale. If you keep it between 0.2 and 0.4 it might be good. Just try to make it as small as possible. Between 0.1 and 0.2. That isn’t too bad but it is lacking a bit of contrast. What about 200 items per layer? Great. 400 Maybe? Even that is not bad. lets push up the scale to 0.1 to 0.3. And now something silly: 0.01 to 0.09. Ok its going to be a pattern. And you cannot read the headlines anymore. I made a mistake. Instead of a 100 items I typed 11100. Even than it works. It doesn’t look good but it works. brought the amount back to 50. Layer1 is scaled between 0.1, 0.9. Layer2: 0.1, 0.6. Layer3: 0.1, 0.3.
P_4_2_1_01_GDV_10

Just added the code and let the program run. Why do I not like this? I think because it is way too chaotic. What can I do to make it less chaotic.
P_4_2_1_02_GDV_01

Changed the imageMode to corner. That gives me a kind of spiral-ish composition. Changed the imageMode to corners. It does not make very much difference (I think). I switch back to imageMode center.
P_4_2_1_02_GDV_02

I start with putting every variable to a basic setting. Hmm… that is not too bad. But when I hit the 1, 2, 3 keys it’s getting chaotic again. Have to change that. But it looks promising.
P_4_2_1_02_GDV_03

Ok. I fixed the keys 1, 2 and 3. They all have the same settings now. Because the circle looks fine I would like the images a little larger so you can read the headlines better.
P_4_2_1_02_GDV_04

That seems better. Made the circle a bit bigger. So I have more room to enlarge the headlines. I have adjusted the sizes. I think these settings are better than the ones I had in the beginning.
P_4_2_1_02_GDV_05

What happens if I increase the amount of headlines from 100 to 500 per layer? It fills the circle. It is also too large. The image is hitting the boundaries of the display window. That is not too bad. 500 Images per layer is too much. I try 300 for layer1, 200 for layer2 and 100 for layer3.
P_4_2_1_02_GDV_06

Until now I did not visit ‘den zufälligen Rotationswinkel’ (random rotation angle), but by using those variables you can easily make nice images which are slightly chaotic but not too much.
P_4_2_1_02_GDV_07

Increased the rotation from 45 to 90.
P_4_2_1_02_GDV_08

From 90 to 100. Higher numbers will make circles only (if you do not use radians).
P_4_2_1_02_GDV_09

But if you do use radians they will make a difference. Here I used radians 90.
P_4_2_1_02_GDV_10

Henk Lamers