Noise edge detection

#1

Hi all!

Im struggling to put into words what I need help with. Im not sure how best to use noise to effect a grid of shapes.

I’ve included my code which should help clarify…

Basically I have a grid of rectangles and currently Im using a black & white source image to find edges and color the grid accordingly.
I have 4 states… right edge, left edge, single rectangle and middle.

So far this is working exactly how I want it.

The trouble Im having is figuring out a way to use 2D noise (animated in Z) instead of a single source image.

In my “ends detection” code section Im using the source images pixel array to check edges only on the X plane.

when usig noise thhough I dont have an array to compare the current index to the next/prev.

I first considered using “createImage” with the noise… but i’ve not worked with image function much and it was getting ridiculously convoluted.

I hope this makes sense and apologies for the long windedness.
I feel like theres a much simler solution.

PImage source;
PImage small;
int tileSize = 25;
int w,h;
float NoiseInc = 0.2;
float noiseZ = 0;



 void setup () {
   size(500,500);
   source = loadImage("source.jpg"); 
   w = source.width/tileSize;
   h = source.height/tileSize; 
   small = createImage(w,h,RGB);
   small.copy(source,0,0,source.width,source.height,0,0,w,h);
 }
 
 
void draw() {
background (255,221,32);
small.loadPixels();

  float noiseY = 0;
  
  for(int y = 0; y < h; y ++) { 
      float noiseX = 0;
      for(int x = 1; x < w-1; x ++) {

        float value = noise(noiseX,noiseY,noiseZ);
        value = round(value) * 255;
          
        noiseX += NoiseInc;
        
        // ends detection Left & Right
        
        int locCurrent = x    + y * w;
        int locNext =    x+1  + y * w;
        int locPrev =    x-1  + y * w;
        
        float bCurrent  = brightness(small.pixels[locCurrent]);  
        float bNext     = brightness(small.pixels[locNext]);
        float bPrev     = brightness(small.pixels[locPrev]);
        
        float rDiff     = abs(bCurrent-bNext);
        float lDiff     = abs(bCurrent-bPrev);
        
        ends(x*tileSize,y*tileSize,lDiff,rDiff);
        
        //fill(value);
        //stroke(0);
        //rect(x*tileSize,y*tileSize,tileSize,tileSize);
      }
      noiseY += NoiseInc;
  }
  noiseZ += 0.01;
} 
 
 
void ends (int x_, int y_,float lDiff_, float rDiff_) {
  float tS = float(tileSize);  
  
  //ends detection...
  if(rDiff_ > 0 && lDiff_ < 1) {
      //is right end
      fill(255,134,255);
    }else if (lDiff_ > 0 && rDiff_ < 1 ){
      //is left end
      fill(255,0,255);   
    }else if (lDiff_ > 0 && rDiff_ > 0 ){
      //is two edges on top of one another
      fill(25,25,167);  
    }else{
      //is middle
      fill(255,0,0);
    }
  
  pushMatrix();
    translate(x_,y_);
    rect(0,0,tS,tS); 
  popMatrix();
}

source

1 Like
#2

I’m trying to understand this, but I’m not getting it. What does using noise() have to do with generating an image like your source.jpg? Also, what does “animated in Z” have to do with generating a grid of rectangles – or with a 2D sketch?

#3

Hi @jeremydouglass,

Yea apologies for my description.
Coming from an animation background my terminology is a bit skewed.

In my current sketch I am using a “source image” (just a black and white image) to get pixel brightness values to drive various functions on a grid (which find edges basically).

I wanted to find a way to use an “animated/offset/evolving” noise instead of using an image.

The way my code is set-up, it looks thhrough a pixel array. So my thinking was that I might need to generate some sort of temporary image (PImage?) with the noise and then use the pixels from the temporary image.

Sorry again for my convoluted confusing explanations.

#4

I think I’m understanding now. In processing, noise refers to random values, eg perlin noise – the generation of random values. Think crt television static (random()) or clouds (noise()). But you are interested in differential values – so the places where black pixels become white pixels , either within an image (edge detection) or between two frames (motion) – or both, I’m not quite sure. You want your sketch to react to either edge pixels or frame-changing pixels. Is that right?

#5

Sorry, I think I understand now. You want to ditch the image entirely and just use noise as your input, then run it through your edge detector.

One warning – the entire thing that makes perlin noise “organic” is that by its nature it isn’t very edge-y – at every scale and in every direction it tends to gradual transitions until you quantize it. So you may want to tune your edge detection method, which works fine on your input image but not very well on raw perlin at a typical scale. If you want to play around with noise values I recommend modifying the example sketches for noise and noiseDetail to interactively explore what kinds of setting you would need to get the sort of images you want.

For example, here is a minor modification of the noiseDetail sketch. Move your mouse up and down to scale, move left and right to animate through z, as you described.

https://processing.org/reference/noiseDetail_.html

float noiseVal;
float noiseScale;

void draw() {
  noiseScale=map(mouseY, 0, height, 0.001, 1);
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width/2; x++) {
      noiseDetail(3,0.5);
      noiseVal = noise((mouseX+x) * noiseScale, y * noiseScale);
      stroke(noiseVal*255);
      point(x,y);
      noiseDetail(8,0.65);
      noiseVal = noise((mouseX+x) * noiseScale, y * noiseScale);
      stroke(noiseVal * 255);
      point(x + width/2, y);
    }
  }
}
1 Like