Scrambling an Image

[bcabc]

Hi-

I’d like to rearrange a JPG’s pixels so that they were in random order - preferably in 4x4 blocks.

I’m having a little trouble figuring this out. I was hoping something like the following would work - but it doesn’t. I noticed that people are very good at identifying those sorts of problems here, so I’m posting again with the hope that maybe someone can help me head in the right direction.

PImage img;

size(700, 600);
loadPixels();
img = loadImage("cran.jpg");


// Loop through every pixel column
for (int x = 0; x < width; x++) {
  // Loop through every pixel row
  for (int y = 0; y < height; y++) {
    // Use the formula to find the 1D location
    int loc = x + y * width;
    if (x % 12 == 0) { // If we are an even column
      pixels[int(random(loc))] = pixels[int(random(loc))];
    } 
    
  }}

updatePixels();

Thank you.

[Chrisir]

please consider to use

img.

before all relevant commands (the commands must refer to the image, otherwise they just refer to the screen)

• loadPixels()
• width
• height
• pixels
• updatePixels()

for bigger parts of the image use img.get()

Sketch

// test for img

PImage img;

size(700, 600);

img = loadImage("cran.png");
img.loadPixels(); // !!!!!!!!!!!!!!!

// Loop through every pixel column
for (int x = 0; x < img.width; x++) {
  // Loop through every pixel row
  for (int y = 0; y < img.height; y++) {

    // Use the formula to find the 1D location
    int loc = x + y * img.width;

    if (x % 2 == 0) { // If we are an even column (2 or 12)
      img.pixels[int(random(loc))] = img.pixels[int(random(loc))];
    }
  }
}//for 

img.updatePixels();

image(img, 0, 0);

[hotfooted]

what about

PImage src;
int cellSize,
  columns,
  rows,
  cellCount;

void setup() {
  size(512, 512);
  pixelDensity(1);
  
  //src = loadImage("checkerboardpattern.png");
  src = loadImage("danirojas.jpg");
  
  cellSize = 32;
  columns = src.width / cellSize;
  rows = src.height / cellSize;
  cellCount = columns * rows;
 
  shuffleImage();
}

void mousePressed() {
  shuffleImage();
}

void shuffleImage() {
  src.loadPixels();

  for(int i = rows - 1; i > 0; i--) {
    for(int j = columns - 1; j > 0; j--) {
      int y1 = i * cellSize;
      int x1 = j * cellSize;
      
      int y2 = floor(random(i + 1)) * cellSize;
      int x2 = floor(random(j + 1)) * cellSize;
      
      swapImagePixels(x1, y1, x2, y2);
    }
  }
  src.updatePixels();
}

void swapImagePixels(int x1, int y1, int x2, int y2) {
  int temp = 0;
  for (int i = 0; i < cellSize; i++) {
    for (int j = 0; j < cellSize; j++) {
      int xy1 = (x1 + j) + (y1 + i) * src.width;
      int xy2 = (x2 + j) + (y2 + i) * src.width;

      temp = src.pixels[xy1];
      src.pixels[xy1] = src.pixels[xy2];
      src.pixels[xy2] = temp;
    }
  }
}

void draw() {
  image(src, 0, 0);
}

you can see the original

and the shuffled version

and an alternative version

and the shuffled alternative version

[Chrisir]

impressive

but wouldn’t this be more efficient using src.get() and src.set() (specifically in swapImagePixels) ?

see Reference / Processing.org

[hotfooted]

i don’t think it would be faster but i’m too lazy to test