# Scrambling an Image

**URL:** <https://discourse.processing.org/t/scrambling-an-image/33879>\
**Category:** Coding Questions\
**Created:** [December 2, 2021, 8:39am UTC](https://discourse.processing.org/t/scrambling-an-image/33879 "2021-12-02T08:39:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bcabc](https://avatars.discourse-cdn.com/v4/letter/b/6a8cbe/32.png) [@bcabc](https://discourse.processing.org/u/bcabc)\
**Post date:** [December 2, 2021, 8:39am UTC](https://discourse.processing.org/t/scrambling-an-image/33879/1 "2021-12-02T08:39:51Z")

</div>

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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 2, 2021, 11:28am UTC](https://discourse.processing.org/t/scrambling-an-image/33879/2 "2021-12-02T11:28:20Z")

</div>

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

```auto
// 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);

```

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [December 2, 2021, 12:30pm UTC](https://discourse.processing.org/t/scrambling-an-image/33879/3 "2021-12-02T12:30:33Z")

</div>

what about

```auto
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

 ![danirojas](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/291317c79e016dcd8bb2676438e645db807a8407.jpeg)

and the shuffled version

 ![danirojasshuffled](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/45b5a6dc2240098b383afff10084de3cf3180712.jpeg)

and an alternative version

 ![checkerboardpattern](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e16d74545b6f7e9cffd1166a12a7c9b2c4db9c5a.png)

and the shuffled alternative version

 ![checkerboardpatternshuffled](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/85c8792b6d41aa0dd8878939399481177e3ec036.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 2, 2021, 5:03pm UTC](https://discourse.processing.org/t/scrambling-an-image/33879/4 "2021-12-02T17:03:43Z")

</div>

impressive

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

see [Reference / Processing.org](https://processing.org/reference/PImage_set_.html)

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [December 2, 2021, 9:28pm UTC](https://discourse.processing.org/t/scrambling-an-image/33879/5 "2021-12-02T21:28:25Z")

</div>

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