在处理中创建可扩展的噪声模式

Question

我一直致力于 Processing 3 项目，以创建从普通图像生成的可扩展噪声图像。

该脚本获取普通图像，将其转换为黑白图像，然后生成两个免费的噪声模式，可以将其叠加以获得原始图像。

我的问题是生成的噪声模式无法缩放，即使我使用 Processing 生成 PDF 格式的图像也是如此。而且，当我在 Adobe Illustrator 中使用图像图像跟踪工具时，噪声模式也无法解决。

任何人都可以建议一种方法来生成这些噪声模式作为可扩展的噪声，可以按比例放大而不会使边缘模糊吗？

代码是Processing中的Java模式。（代码通过图像中的所有像素运行一个循环并创建一个黑白互补噪声模式）

//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

你也在问 SVG 吗？您包含了 svg 标签。如果是这样，您应该调查 image-rendering="pixelated"。但是请注意，这是 image-rendering 的 relatively-new 值，目前仅适用于 Chrome 和 Opera。

<svg width="25%" viewBox="0 0 96 96">
  <image href="http://lorempixel.com/g/16/16/" width="96" height="96"/>
</svg>

<svg width="25%" viewBox="0 0 96 96">
  <image href="http://lorempixel.com/g/16/16/" width="96" height="96" image-rendering="pixelated"/>
</svg>

Answer 2

我解决了这个问题。

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.

在处理中创建可扩展的噪声模式

Creating scalable noise patterns in processing

java

processing

svg

image-processing

noise