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.


Comments? Leave a reply.

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s