2D Noise – SOFTlab

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);
 
  cp5.addSlider("Nscale")
    .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))
   ;
  
   cp5.addSlider("speed")
    .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);
 
  cp5.addSlider("Nscale")
    .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))
   ;
  
   cp5.addSlider("speed")
    .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;
}