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

Advertisements

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.