Creating scalable noise patterns in processing

Question

I have been working on a Processing 3 project to create scale-able noise images generated from a normal image.

The script takes a normal image, converts it into a black and white image then generates two complimentary noise patterns that can be overlaid to get the original image.

My problem is that the generated noise patterns are not scale-able, even when I use Processing to generate the images in a PDF format. An, the noise patterns do not work out ether when I used the image Image Tracing tool in Adobe Illustrator either.

Could anyone suggest a way to generate these noise patterns as scale-able noises that can be blown up in proportions without getting the blurred edges?

The code is the Java mode in Processing. (The code runs a loop through all the pixels in the image and creates a black and white complimentary noise pattern)

//library for exporting pdf files
import processing.pdf.*;

// Processing Image objects to hold different versions of images
PImage normalSrc;
PImage blackSrc;
PImage des1;
PImage des2;

// Width and Height of all images
float imgW = 500;
float imgH = 500;

// x_position var of movable image
float x_pos = (imgW + (imgW/20))+10;

PFont tahoma;

void setup () {

  //change this to normal size syntax (i.e. size(1800, 800);) to enable images to be moved around
  size(1800, 800, PDF, "Output pdf image.pdf");

  //Creating font for instructions
  tahoma = createFont("Tahoma", 40);
  textFont(tahoma);

  normalSrc = loadImage("bb.jpg");
  blackSrc = createImage( normalSrc.width, normalSrc.height, RGB );
  des1 = createImage( blackSrc.width, blackSrc.height, RGB );
  des2 = createImage( blackSrc.width, blackSrc.height, RGB );

  int dimension = blackSrc.width * blackSrc.height;
  blackSrc.loadPixels();
  colorMode(HSB, 255, 100, 100);

  //Iterating through all pixels in blackSrc
  for ( int i=0; i < dimension; i+=1) {
    float opacity = 150;
    // if brightness of normalSrc pixel is over 50%, set blackSrc pixel to a white pixel
    if ( brightness( normalSrc.pixels[i] ) > 50 ) {
      blackSrc.pixels[i] = color(255);
    // For white pixels in blackSrc, generate random white pixels in des1 and des2
      if ( random(2) > 1) {
        des1.pixels[i] = color( 0, opacity);
        des2.pixels[i] = color( 0, opacity+50 );
      } 
    // For white pixels in blackSrc generate random black pixels in des1 and des2
      else
      {
        des1.pixels[i] = color( 255, opacity );
        des2.pixels[i] = color( 255, opacity );
      };
    } 
    // if brightness of normalSrc pixel is below 50%, set blackSrc pixel to a black pixel
    else 
    {
      blackSrc.pixels[i] = color(0);
     // For black pixels in blackSrc, generate complimentary black/white pixels in des1 and des2
      if ( random(2) > 1) {
        des1.pixels[i] = color( 0, opacity );
        des2.pixels[i] = color( 255, opacity );
      }
     // For white pixels in blackSrc generate complimentary black/white pixels in des1 and des2
      else
      {
        des1.pixels[i] = color( 255, opacity );
        des2.pixels[i] = color( 0, opacity+100 );
      };
    };
  }
  blackSrc.updatePixels();
  des1.updatePixels();
  des2.updatePixels();
}


void draw () {
  clear();
  //background(135);



  //displaying instructions
  textSize(36);
  text("Instructions:", 10, imgH+30);
  textSize(24);

  text("Drag the noise pattern using the mouse", 10, imgH+60);
  text("Press RIGHT or LEFT to move noise pattern around", 10, imgH+85);
  text("Press Ctrl+C to center the overlay the noise pattern on top of each other", 10, imgH+160);


  image(des1, 10, 0, imgW, imgH);
  image(normalSrc, (3*imgW)+(imgW/5.5), 0, imgW, imgH);
  image(blackSrc, (2*imgW)+(imgW/8), 0, imgW, imgH );


  // Controls for movement of des2 with mouse and keyboard
  if ( keyPressed && key==CODED && keyCode==RIGHT  ) {
    x_pos += 1;
    image(des2, x_pos, 0, imgW, imgH);
  }
  else if ( keyPressed && key==CODED && keyCode==LEFT) {
    x_pos -= 1;
    image(des2, x_pos, 0, imgW, imgH);
  }
  else if ( mousePressed && (mouseButton==LEFT)) {
    x_pos = mouseX;
    image(des2, x_pos, 0, imgW, imgH);
  }
  else if ( keyPressed && key=='C') { //Automatically centers the second noise on the first noise image to generate image
    x_pos = 10;
    image(des2, 10, 0, imgW, imgH);
  }
  else {
    image(des2, x_pos, 0, imgW, imgH);
  };

  // exit() used for quitting program after saving a PDF capture
  // REMOVE THIS PART OUT IF THE IMAGE IS TO BE MOVED
  exit();

}

Answer 1

I solved the issue.

Instead of generating a final pixel for each source pixel, I create a rect() processing object for each pixel in the source image that is by default a scalable and vector object when exported from processing in a .pdf format.