# Noisy Grids

Thinking about flow in Processing (more on that to follow) perlin noise visualisation continues to be fascinating. Here are some examples in an x-y grid setting using a basic set of points shown as circles in an arrangement across and down the screen.

### No Noise

First we have the normal grid pattern with some pleasing colour choices:

``````
size(1190, 397)

background_colour = color(36, 36, 36)
background(background_colour)
fill(background_colour)

stroke_colour = color(51, 160, 195)
stroke(stroke_colour)

xspacing = 50
yspacing = 20
noise_increment = 0.01
xoff = 0.0
yoff = 0.0

lastx = -1
lasty = -1

for y in range(yspacing/2, height, yspacing):
lasty = -1
lasty = -1
xoff = 0.0

for x in range (xspacing/2, width, xspacing):
xvalue = x
yvalue = y

xoff += noise_increment
lastx = xvalue
lasty = yvalue

yoff += noise_increment
``````

Note some unused variables lastx, lasty, xoff, yoff, noise_increment are there to make the code work when we introduce some pertubation later.

### X Perlin Noise

Adding perlin noise, we map values we get from the noise function from 0..1 to the width and height of the screen. If we apply noise to the x values:

``````
for x in range (xspacing/2, width, xspacing):
xvalue = map(noise(x, y, xoff), 0, 1, 0, width)
yvalue = y
``````

### Y Perlin Noise

Similarly if we keep x fixed and add noise to the y values:

``````
for x in range (xspacing/2, width, xspacing):
xvalue = x
yvalue = map(noise(x, y, yoff), 0, 1, 0, height)
``````

### X & Y Perlin Noise

And as you might imagine if we add noise to both, the most interesting pattern emerges, something like a photo of the tilt of the milky way.

``````
for x in range (xspacing/2, width, xspacing):
xvalue = map(noise(x, y, xoff), 0, 1, 0, width)
yvalue = map(noise(x, y, yoff), 0, 1, 0, height)
``````