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

Generative Design Variations M.1.3 Noise versus randomness

The Generative Design book starts with this description: ‘Until now, only the random () function was used to create random values. The only way to control randomness was set to the initial conditions with randomSeed (). This method, however, simply reproduces or sets a specific sequence of random values; over time, a uniform distribution of values always results. This is not sufficient to mimic natural phenomena such as clouds, water, mountains, hair, smoke etcetera. The random generator ‘Perlin noise’ is needed to produce these kinds of effects. In Processing this function is implemented using the noise() function. In contrast to random(), noise() generates sequences of values with smooth transitions-i.e., values increase and decrease in a seemingly natural way. In Processing the noise () function can be used to create one-, two-, or three-dimensional noise.’ Here you can find the three original programs.
M_1_3_01
M_1_3_02
M_1_3_03

I have made a summary page on Flickr were all the imagery from this chapter is available.
GDV_M_1_3

Further I converted all Processing files into JavaScript. Now these Processing files were slow. JavaScript made them even slower and some of them did not work at all. So I have chosen to show the Processing code only when you click on the previews at the loftmatic page.
GDV_M/M_1_3

As a start I will try to begin where I left off in the previous chapter. So I removed the dots and replaced them by a gradient. Switched to HSB color mode. Mirrored the gradient vertically so its smooths out to both the bottom and the top of the display window.
M_1_3_01_GDV_01

Added some space between the vertical gradients by increasing the x variable.
M_1_3_01_GDV_02

Increased the strokeweight to 16 pixels. There are interesting things going on where the gradients intersect.
M_1_3_01_GDV_03

Using lines to show the noise. At the right side (of the display window) with the mouse the image is not so interesting but close to the left side it’s giving nice flag-like images.
M_1_3_01_GDV_04

I changed the x variable from an int into a float. That gives me better gradients. I Also like the images best when you click on the left side of the display image. This has nothing to do with the contrast between random and noise anymore but it gives interesting images. And that is important (for me).
M_1_3_01_GDV_05

Put everything on a 45 degrees angle. Rectangles of 100 pixels long following the noise pattern.
M_1_3_01_GDV_06

Lowered the length of the lines to 50 pixels.
M_1_3_01_GDV_07

Now I would like to make more of those ribbon-like objects. The simplest thing to do is copy paste the line of code that creates the rectangles.
M_1_3_01_GDV_08

Thats fine but maybe I can bring some noise into the image to make it less predictable and symmetrical.
M_1_3_01_GDV_09

Last thing to make it less predictable is to change the length of the lines.
M_1_3_01_GDV_10

Here starts the second part of the chapter: ‘Texture from randomness. Every pixel in the display is assigned a random gray value between black and white. Since random () distributes the random values evenly, the visual result is always a medium gray. This does not change even if the randomSeed () function is used to generate other random values.’

I found it particularly difficult to make interesting images with this program. It delivers a random gray value between black and white. Which is not very interesting. What can I do to make this structure more interesting. Maybe I can use the random function for that too.
M_1_3_02_GDV_01

The idea is now to enhance the random structure. I added an extra layer on top of the original random gray value.
M_1_3_02_GDV_02

It still is a random generated structure. But it is a bit more interesting to look at.
M_1_3_02_GDV_03

In fact I want the structure to be enhanced. So it has to add a certain new visual value to it.
M_1_3_02_GDV_04

Divided the display window into four squares. Each with a different interpretation of the original noise pattern.
M_1_3_02_GDV_05

Not yet exactly what I think it should be but we are getting closer. Rectangles over the full width of the display. Generating variations in height every time you click the mouse button.
M_1_3_02_GDV_06

I’ve got now a kind of lamppost in the middle of the screen. It would be more interesting if the width would be random.
M_1_3_02_GDV_07

One of the gradients is now sometimes invisible. That gives a better composition. Although it is still some times very symmetrical.
M_1_3_02_GDV_08

One pixel vertical black line gradient.
M_1_3_02_GDV_09

Added one pixel vertical white line gradient.
M_1_3_02_GDV_10

The third part of this chapter: ‘Texture from noise. The gray value of each pixel in the display is determined by its position in relation to the two-dimensional version of the noise () function. Since the random values change only slightly in the vertical and horizontal direction in relation to their neighbors, the result is a cloud-like texture.’

Started to increase the amount of octaves from 4 to 8. As far as I could notice not much changed. So I decreased it to 1. But you can also influence this with the arrow-keys. So I put every starting value back to its original number. Anyway… I don’t like the noise its delivers. Especially the harsh noise when you hit the 2 key. So I switched off noiseY. That gives at least nice curtain-like images.
M_1_3_03_GDV_01

You could do that also in a horizontal way. Just set noiseX to zero.
M_1_3_03_GDV_02

I have put noiseX back but increased the starting FallOff to 0.005. I also removed the mapping to noiseXRange and noiseYRange. That gives even better curtains.
M_1_3_03_GDV_03

Changed noiseX to map to 10, 100. And map noiseY to 1, 10. That gives me a kind of rhythmic pattern. Which is the opposite of Ken Perlin’s idea for generating noise.
M_1_3_03_GDV_04

I have tried to do something else. Almost all code is commented out now. And I adapted some code from Andrew Glasner’s book ‘Processing for Visual Artists’. At this moment this gives very nice cloud like images (which by the way take at least five seconds to render).
M_1_3_03_GDV_05

Experimented with the color settings to get more convincing images.
M_1_3_03_GDV_06

This is now a combination of the two previous programs and the original starting program. The rendering performance is terrible but I think that the images are very refined and subtle.
M_1_3_03_GDV_07

This is a combination of Andrew Glassner’s code and some code from the Processing book of Casey Reas and Ben Fry. It is extremely slow. 8 Seconds to render.
M_1_3_03_GDV_08

Moved the calculated gray to the redValue of the stroke. Tried the greenValue and blueValue too.
M_1_3_03_GDV_09

Some more experiments for which I think some images are succesful and others are not. But the strange thing is that I now used almost no code from the Generative Design book to make these images. And I used a bit changed code from two other books. Which might be a good thing.
M_1_3_03_GDV_10

GDV M.1.2 Randomness and order

To begin with the text from the Generative Design book ‘The random function is not a panacea for a weak visual composition. Although an excess of randomness may sometimes create a surprisingly complex visual effect, on closer inspection this effect will simply appear arbitrary. On the other hand, random processes are indispensable tools that can be used to break up the extreme and sometimes rigid regularity of computer generated work. Since no rule of thumb exists, two extremes should be tested individually for each new composition. The following program attempts to illustrate the two opposing positions.’ Here you can find the original program:
M_1_2_01

I have prepared a GDV_M_1_2 album on Flickr where you can find all images I created with the program. And on this loftmatic page you can find an overview of the working programs from this assignment.

As a start I have removed all the ellipses and replaced them by points. I have also increased the amount of points from 150 to 10.000. I think that slows down my computer a bit so I divided that amount into 5000 points. I also removed all color.
M_1_2_01_GDV_01

Would it be possible to introduce a second circle? That is certainly possible. But its centered in the top left corner. I’ve got now three colored circles and I have exaggerated the strokeweight to 200 pixels. That gives interesting compositions. But it makes the page very slow. Lets call this almost an happy accident for the time being.
M_1_2_01_GDV_02

Removed the two other circles and color. Used rectangles from 400 x 1 pixels. A rectangle with a height of 1 pixels seems not to make any sense. Could have used lines. But for a change I kept the rectangle. It does create two circles though. Well in  fact it is still one circle but due to overlapping of the lines its looks like that there are two circles.
M_1_2_01_GDV_03

Tried to make two vertical circles too. Had to use translate and pop- and pushMatrix to center everything in its place.
M_1_2_01_GDV_04

Seeing this image it is remarkable that you can make circles with rects. What about changing the rect for an ellipse? That does not make much of a difference for the image. But the drawing gets extremely slow and the image itself is not better than the one generated with rectangles.
M_1_2_01_GDV_05

Made a random shape with bezier-curves. Copied that shape three times and gave it different colors. Copied the three shapes 10 pixels to the left and ten pixels up. And copied another shape 10 pixels down and to the right.
M_1_2_01_GDV_06

Something went wrong here. I think I have overwritten this file. So I had to redo this one. But it’s not a real problem because this one is better than the overwritten one.
M_1_2_01_GDV_07

Some circles made with just straight lines.
M_1_2_01_GDV_08

Four bezier curves which make an interesting object though. In fact the basic objects are two half circles. Or 4 quarter circles.
M_1_2_01_GDV_09

It seems that working with circles or half circles gives the nicest objects. The basic shapes of this form are four half circles which are cut through the middle.
M_1_2_01_GDV_10

Copied the same object in a different order. The basic object is still half a circle. You can check this by decreasing the AmountOfObjects variable to 1.
M_1_2_01_GDV_11

The same object. And repeated under an other angle. So in total its 8 half circles. But the object’s shape is getting to complex for my taste now.
M_1_2_01_GDV_12

Four half circles shifted 45 degrees anticlockwise. Not that clockwise or anticlockwise would make any difference.
M_1_2_01_GDV_13

A couple of rects in a square order. interesting that the object has rounded corners.
M_1_2_01_GDV_14

Almost back to the beginning of the first sketch. I replaced the circles by six horizontal lines. All 10 pixels long and 1 pixel thick. The brightness is lowered every time a line is displayed. It’s very stupid programmed because I should have used a loop. I try to do that in the next program. And maybe it’s also better to use the HSB color mode (which is easier to understand for humans).
M_1_2_01_GDV_15

The loop is ready and I added a second loop for a similar object in a red color.
M_1_2_01_GDV_16

Added two more objects. But to keep everything centered in the display I subtracted the positions of these two objects. Hmmm… now it would be a fine moment to make those loops a function.
M_1_2_01_GDV_17

Put everything under a 45 degrees angle. Increased the amount of objects and scaled the total object 0.6 times. I have no idea why this object gets into a rectangle on its corner when you slide the mouseposition to the left. It’s a nice one though.
M_1_2_01_GDV_18

Expanded all the lines in the positive direction. Removed the angle because it delivers bad image quality.
M_1_2_01_GDV_19

In this last program I got back to the original and replaced all dots by gradients. Added a yellow and white gradients.
M_1_2_01_GDV_20

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.3.3 Real time pixel values

This is the last assignment of the Generative Design’s Book ‘P’ part. ‘P’ as in basic principles. As always I start with copying the summary of P.4.3.3. ‘The color values of pixels can again be translated into graphic elements, but with two important differences: first, the pixels are constantly changing because the images come from a video camera, and second, pixels are translated sequentially by dumb agents that are constantly in motion rather than simultaneously. The motion captured by he camera and the migration of the agents thus can paint a picture right before our eyes. A dumb agent moves across the display. The color value of the current real-time video image is analyzed at each position and serves as a parameter for each color and stroke value. The mouse position defines the stroke length and the speed of the agent.’ Until so far the introduction. Here you can find the original programs.
P_4_3_3_01
P_4_3_3_02

As usual I prepared a Flickr summary page of all images I have created during this session. And on the loftmatic page you can find the programs if you click on the previews. I did not put any video material on the site. And you will never get the same results of images which I have because when you run the program it must be connected to a video device. Which in turn shows your environment instead if my habitat.

When I let the program run for the first time it gave me a ‘There are no capture devices connected to this computer.’ And that was certainly true. So I connected a Sony DCR-PC110E PAL to the MacPro. That did not work. I tried a Sony DCR-PC100 PAL which did not work either. And I connected a Canon HDV XL H1 to the Mac Pro. In short they all gave me a NullPointerException in Processing. In the console it says 2014-11-09 13:39:30.148 java[41089:1646798] Error loading /Library/Audio/Plug-Ins/HAL/DVCPROHDAudio.plugin/Contents/MacOS/DVCPROHDAudio: dlopen(/Library/Audio/Plug-Ins/HAL/DVCPROHDAudio.plugin/Contents/MacOS/DVCPROHDAudio, 262): no suitable image found.  Did find: /Library/Audio/Plug-Ins/HAL/DVCPROHDAudio.plugin/Contents/MacOS/DVCPROHDAudio: no matching architecture in universal wrapper 2014-11-09 13:39:30.148 java[41089:1646798] Cannot find function pointer NewPlugIn for factory C5A4CE5B-0BB8-11D8-9D75-0003939615B6 in CFBundle/CFPlugIn 0x7f87e9430100 (bundle, not loaded). Which is very impressive poetry indeed. I have no internal camera on my MacPro. So I checked the same program on my MacBookPro and that worked fine with the internal iSight camera. And that is what I had to use during this assignment. To begin I changed all variable names to get a better understanding of how the program works. And I made the line length very short. Its giving me strange remarks in the Console. For instance: DVFreeThread – CFMachPortCreateWithPort hack = 0x1876e330, fPowerNotifyPort= 0x1876cfe0. DVFreeThread – CFMachPortCreateWithPort hack = 0x17817030, fPowerNotifyPort= 0x17816f00. DVFreeThread – CFMachPortCreateWithPort hack = 0x18774ca0, fPowerNotifyPort= 0x1876ddb0. No Idea what this means but three times the word ‘hack’ worries me a bit.
P_4_3_3_01_GDV_01

Commented out the CurvePoint_X. That gives me a random drawn vertical line on the left side of the display window. Changed it to CurvePoint_X * 1.2 in the curveVertex line which gives me horizontal lines only.
P_4_3_3_01_GDV_02

Changed CurvePoint_Y * 1.2. Set CurvePoint_X back to its original state. This gives me vertical lines only.
P_4_3_3_01_GDV_03

If you multiply CurvePoint_Y * 1.2 before the endShape command you get a slightly bended horizontal line at the end. Changed that. Brought all variables back to their original state. Added an ellipse after every shape is being drawn.
P_4_3_3_01_GDV_04

Replaced the ellipse by a rect. Weird. I got a NullPointerException in the message area and a lot of red messages in the console. But the program started anyway. Is this possible? Started the program again and now it seems to be fine. No errors.
P_4_3_3_01_GDV_05

I have commented out all lines of the beginShape. Replaced the CurveVertex line with a rect. And that seems to work fine. I get a more structured and less chaotic image.
P_4_3_3_01_GDV_06

Hmmm… would type work? It does. Need to add color. Changed stroke for fill to change the color of the typeface. And it works only with one character. I think it has something to do with the fact that counter is not updated. Left out the textSize random value. Found it too chaotic. Need to experiment later for using the right text. My point is that I am writing pieces of the program on my MacPro. Share the file with my MacBookPro. Check if the program works. If it does and it looks good I skip to another variation. In a later stage I will make the final visuals by taking my MacBook Pro to a more lively location.
P_4_3_3_01_GDV_07

I am going to remove almost all randomization except for the positioning of the objects. Used two arcs for creating the objects. Radians (90), radians (180) and radians (270), radians (360).
P_4_3_3_01_GDV_08

Made an asterisk-ish object using arcs only. Used a for loop for that. That seems to work fine too.
P_4_3_3_01_GDV_09

Used two triangles to make a kind of flattened square on one of its sides. Compass needle maybe? And that is the end of the first program.
P_4_3_3_01_GDV_10

In the second program I renamed all global variables. Just for a start I replaced noFill with noStroke. That fills every object with white. Replaced all stroke commands with fill commands.
P_4_3_3_02_GDV_01

Added an alpha channel of 50 for each fill. But maybe that is too much. What about 10? That gives very transparant objects. What about 1? That is too less. 5 Maybe? That looks fine.
P_4_3_3_02_GDV_02

What about introducing the stroke again. But a very thin one? Looks good. In addition I made the stroke color the same color as the fill but without the alpha channel.
P_4_3_3_02_GDV_03

Reduced the length of CurvePoint_X and CurvePointY form -50, 50 to -10, 10. Time to remove the fill. Used the stroke with a 50 percent alpha.
P_4_3_3_02_GDV_04

Let’s make another variation by exaggerating one of the curvepoints in each line. Strange enough it doesn’t do anything. I’ve put CurvePoint X to – 100, And curvePoint_Y to 100. I reduce it to 50. Still nothing happens. Maybe I have to make the minus part the same number as the plus-part. That works. Increased it to 400. But that is way too big. 100 Maybe? Put the alpha of the line on 10. That gives me (after a while (5 minutes)) a cloud like image which is quiet nice. It is abstract but I don’t mind.
P_4_3_3_02_GDV_05

Replaced the first line object with a rect. It is definitely too large at this moment. Changed the random factor to -10, 10. It is still not clear to me how this randomization is handled.
P_4_3_3_02_GDV_06

Replaced the rects with ellipses.
P_4_3_3_02_GDV_07

Ellipses combined with curves. Maybe its better to do one with curves only. One with ellipses and one with rects. Ok. Lets exaggerate this by doing an and thing. Every line gets a rect, ellipse and a curve. Switched off the strokes and used fills. But I think it is a bit too harsh. So I need to make the objects smaller. Finally I ended up with using three different objects. All operating at separate places of the display screen. Sometimes they mix sometimes they do not.
P_4_3_3_02_GDV_08

I am going to get rid of these scribbled lines. I will replace them all with ellipses. Time for some structured chaos (within the chaos).
P_4_3_3_02_GDV_09

Used the objects of P_4_3_3_01_GDV_09 to create new images.
P_4_3_3_02_GDV_10

Now I was not really satisfied about the results until now. I started to create simple objects in Processing. But on a certain moment I made a swoosh-like object which was too large if you compare it with the earlier examples. For the color I used a 10 percent alpha. Suddenly I got a kind of strange structure on my screen. I had to wait for it for at least 10 minutes. So it takes a lot of time.
P_4_3_3_02_GDV_11

The next variation I will use a wavy object. In fact it’s just one line. It’s not correctly positioned. But that doesn’t matter. I like it this way. It also got a kind of silk-like or rough paper quality in it. And it takes also about 10 minutes to render.
P_4_3_3_02_GDV_12

I have gone totally abstract now. Not with bright colours but with very soft layers of alpha. It still gets its color from the iSight camera. But by rendering the images this way it gives the images also a kind of 3d-ish look.  I have no idea how this works but it does. And that’s fine by me.
P_4_3_3_02_GDV_13

Let’s see what happens if I make the waves longer. So its less waves but longer waves.
P_4_3_3_02_GDV_14

Some very loose line objects.
P_4_3_3_02_GDV_15

And that finishes this part of the Generative Design book. It took me one year to make all the examples. Sometimes I even did not know why something happened but if it looked good it was fine by me. I am thinking of making a book with the best examples. But for now I will continue with ‘Complex Methods’.