We often use noise in our projects to create a random field, generate a dynamic pattern that appears atmospheric, or as simply a starting point. Below are two examples of animated 2D noise fields created with processing. One is a field of rectangles and the other a field of vectors. They both use Perlin noise, an algorithm for procedural gradient noise created by Ken Perlin in 1983.

```
import controlP5.*;

ControlP5 cp5;

float xsize = 12;
float ysize = 12;

float space = 60;

float zcount = 0;
float xcount = 0;

void setup(){
size(1000,1000);

cp5 = new ControlP5(this);

.setPosition(40,40)
.setRange(0,20)
.setSize(200,20)
.setValue(8)
.setColorActive(color(180,180,180))
.setColorLabel(color(255))
.setColorBackground(color(70,70,70))
.setColorValue(color(0,0,0))
.setColorForeground(color(150,150,150))
;

.setPosition(40,80)
.setRange(0,0.01)
.setSize(200,20)
.setValue(0.005)
.setColorActive(color(180,180,180))
.setColorLabel(color(255))
.setColorBackground(color(70,70,70))
.setColorValue(color(0,0,0))
.setColorForeground(color(150,150,150))
;

}

void draw(){
background(0);

noStroke();
for(int x = 0; x < xsize; x++){
for(int y = 0; y < ysize; y++){
float n = noise(x/Nscale + xcount, y/Nscale + zcount);

stroke(255);
strokeWeight(4);
point(x*space + width/2-(xsize*space/2)+space/2,y*space+height/2-(ysize*space/2)+space/2);
float theta = map(n,1,0,0,2*PI);

float r = space;

float xp = x*space + width/2-(xsize*space/2)+space/2 + r * cos(theta);
float yp = y*space + height/2-(ysize*space/2)+space/2 + r * sin(theta);
stroke(255,255);
strokeWeight(1);
line(x*space + width/2-(xsize*space/2)+space/2,y*space+height/2-(ysize*space/2)+space/2,xp,yp);

}
}

zcount = zcount + speed;

}

```
```import controlP5.*;

ControlP5 cp5;

float xsize = 12;
float ysize = 12;

float space = 60;

float zcount = 0;
float xcount = 0;

void setup(){
size(1000,1000);

cp5 = new ControlP5(this);

.setPosition(40,40)
.setRange(0,20)
.setSize(200,20)
.setValue(8)
.setColorActive(color(180,180,180))
.setColorLabel(color(255))
.setColorBackground(color(70,70,70))
.setColorValue(color(0,0,0))
.setColorForeground(color(150,150,150))
;

.setPosition(40,80)
.setRange(0,0.01)
.setSize(200,20)
.setValue(0.005)
.setColorActive(color(180,180,180))
.setColorLabel(color(255))
.setColorBackground(color(70,70,70))
.setColorValue(color(0,0,0))
.setColorForeground(color(150,150,150))
;

}

void draw(){
background(0);

noStroke();
for(int x = 0; x < xsize; x++){
for(int y = 0; y < ysize; y++){
float n = noise(x/Nscale + xcount, y/Nscale + zcount);

stroke(255);
strokeWeight(4);
point(x*space + width/2-(xsize*space/2)+space/2,y*space+height/2-(ysize*space/2)+space/2);
float theta = map(n,1,0,0,2*PI);

float r = space;

float xp = x*space + width/2-(xsize*space/2)+space/2 + r * cos(theta);
float yp = y*space + height/2-(ysize*space/2)+space/2 + r * sin(theta);
stroke(255,255);
strokeWeight(1);
line(x*space + width/2-(xsize*space/2)+space/2,y*space+height/2-(ysize*space/2)+space/2,xp,yp);

}
}

zcount = zcount + speed;
}

```