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.

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

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.

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.

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

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

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.

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

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

Lowered the length of the lines to 50 pixels.

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.

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

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

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.

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

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

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

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

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.

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.

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

One pixel vertical black line gradient.

Added one pixel vertical white line gradient.

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.

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

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.

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.

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

Experimented with the color settings to get more convincing images.

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.

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.

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

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.


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:

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.

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.

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.

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

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.

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.

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.

Some circles made with just straight lines.

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

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.

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.

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.

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

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

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

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

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.

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.

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

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

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.

I also made an album on my flickr page of the images that were generated during this assignment. At 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.

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.

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.

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.

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

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.

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

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.

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.

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

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.