# 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

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