5 minute read

You cannot omit xstart and ynoise

LFMP_01_01_01 size (1500, 1500, P3D); background (0); stroke (0, 50); noStroke (); fill (255, 96); float xstart = random (10); float ynoise = random (10); translate (width / 2, height / 2, 0); for (float y = -(height / 8); y <= (height / 8); y += 3) { A for next loop that will determine the y coordinates. That then becomes 1000 : 8 = 125. That comes down to: for (float y = –125; y less than or equal to 125); y + 3. So y = –125 as long as y is less than or equal to height 125. And during that moment, y is incremented by 3 pixels. When you double 8, the grid field becomes twice as high. If you double += 3 that doubles the distances between the elements in height. The moment you change 3 to 12 you get horizontal lines. ynoise += 0.02; ynoise is (a random number between 0 and 10) + 0.02. ynoise in my variation is now very low: 0.00002. In this, the grid becomes even more visible. It seems to become a kind of wall or screen. float xnoise = xstart; The initialisation of the variable xnoise. This is equal to xstart. xstart is a random number out of 10, which in turn is equal to xnoise.

I will use the size 1000 x 1000 pixels for all programmes to come from now on.

Advertisement

I often use a dark background when creating graphic images. In this program, it makes the grid stand out better as a shape.

I commented out the stroke function. Because of the dark background, it is now redundant as you can hardly see it.

Disables drawing the outline. Because I don‘t want outlines at the moment.

A small adjustment to transparency. You sometimes need transparency to achieve more depth in images.

The first variable xstart is an arbitrary floating point number between 0 and 10. This is the initialisation of xstart.

To be sure, I changed the number 10 to 10000. But this makes no difference in the output. So I think xstart and ynoise are variables that need to be initialised. You cannot omit both variables because then you get the error message: ynoise cannot be resolved to a variable.

Specifies an amount to displace objects within the display window. In this case, the translate function positions everything in the centre of the display. Both in the x, y and z direction. It makes little sense to change the width and height because then the image disappears behind the edges of the display window. Perhaps it makes sense to change something in the z direction. 100 Works reasonably well within the display window. Although there must be something somewhere in the program that determines the size of the graph.

Variations

A generative system in 24 lines of code.

for (float x = -(width / 8); x <= (width / 9); x += 3) { This is the for next loop that will determine the x-coordinates. In fact, this is the same loop with pretty much the same variables as the y loop. for x = –125 just as long as x is less than or equal to width (1000 / 9)? Divided by nine? That's 111.111. But maybe there is a deeper meaning to it which I don’t get at the moment. I've changed it to (1000 / 8). And then x is incremented by 3 pixels.

xnoise += 0.02; xnoise (which was equal to xstart) is raised by 0.02. But in this version, xnoise is lowered just like ynoise to 0.00002. There is virtually no xnoise or ynoise.

drawPoint (x, y, noise (xnoise, ynoise)); The programme moves to the drawPoint function.

void DrawPoint (float x, float y, float noiseFactor) { This is the function that constructs the image. It has three variables x, y, and noiseFactor. x and y are the coordinates, noiseFactor is the amount of noise.

pushMatrix (); translate (x * noiseFactor * 4, y * noiseFactor * 4, -y); NoiseFactor is determined by xnoise and ynoise. Suppose xnoise is 1 and ynoise is also 1. Then they are both 1.02 during the first call of the function. This then implies that: x * 1.02 * 4 = 4.08 and y * 1.02 * 4 = 4.08, – y. I replaced 4 with 7, because I suspect this has something to do with the magnification factor. –y is now 0. And then the grid comes into view nicely. float edgeSize = noiseFactor * 26; edgeSize = the noiseFactor 1.02 * 26 = 26.52. But I replaced that with: float edgeSize = noiseFactor * 104. In this format, I actually want all noise out of the image because I want to see the basic shape of the image. popMatrix ();

The pushMatrix () function saves the current coordinate system to the stack.

Restores the prior coordinate system. And then we enter the for next loops of setup again until all conditions are met. Finally, the object is build in the display window. The bottom line is that the grid is now visible and formed by overlapping ellipses. All the chaos is gone. But I will try to bring that back in the upcoming variations.

A generative system in 24 lines of code. LFMP_01_01_02

Which variables affect the controlled form of chaos? At first glance, that seems to be xnoise and ynoise. Hence their names

ynoise += 0.00002; This produces very little chaos in the y-direction.

xnoise += 0.00002; Also, xnoise produces little else in the form of chaos. When I change both xnoise and ynoise to 0.0002 (just one 0 less) you can see that the square gets smaller. However, the grid does not become more chaotic.

ynoise += 0.002; When I change ynoise to 0.002 the grid deforms. A horizontal dent appears at the top.

ynoise += 0.02; This makes it even more mysterious. Accumulations of grid points are now taking place at various places. I reset ynoise to 0.00002.

xnoise += 0.002; Again, this only results in an enlargement of the grid.

xnoise += 0.02; And you see the same thing happening here as with ynoise at 0.02. Accumulation of pixel grids. A wave pattern.

ynoise += 0.2; But what happens if I also bring ynoise to 0.2? That produces a fairly chaotic image. I'm going to try to get that under control.

xnoise += 0.002; This makes the grid almost disappear. The majority of the grid consists of horizontal lines. Some are wavy.

ynoise += 0.002; This produces a grid with a nice quiet wavy pattern. So xnoise and ynoise are responsible for the amount of chaos within the grid. But what happens inside the drawPoint function?

float edgeSize = noiseFactor * 64; The variable edgeSize has been reduced from 104 to 64. It seems to fill the image a bit better. But what determines the size of the surface?

translate (x * noiseFactor * 8, y * noiseFactor * 8, + y); I suspect that this translate function determines the size of the surface. The edgeSize variable is only responsible for the size of an ellipse. When I return to the original program, I see that in the drawPoint translate function that I replaced –y with 0. It is now clear that xnoise and ynoise are responsible for the chaos. I have now enlarged them to 0.02. As in the original program. I think it's now a matter of fine-tuning.

Variations

A generative system in 24 lines of code.

This article is from: