Noise edge detection

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

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?