Shifting/re-shuffling pixels of an image

Gene_Webber

Hi, I am new to programming in general. I've just watched Daniel Shiffman's video on pixel arrays, there he changes the [r g b a] values of a pixel and then applies that change to all of the pixels in an image using a nested for loop (code below). So I'm wondering if I could use a similar logic to actually move a whole pixel to a random coordinate in the image - and then apply that to the whole image so that all of the pixels shift into a random order? Many thanks for any advice given

function preload() { img1 = loadImage("Assets/randimage2.png"); }

function setup() { createCanvas(img1.width, img1.height);

}

function draw() { image(img1);

loadPixels();

for (var y = 0; y < height; y++) { for(var x = 0; x < width; x++) { var index = (x + y * width)*4; pixels[index+0] *2; pixels[index+1] = 200; pixels[index+2] = 255; pixels[index+3] = 105; } }

updatePixels(); }

KevinWorkman

Please format your code. Here's how: https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text

What exactly does this code do?

To accomplish what you're describing, I can think of two main approaches:

Approach 1: Randomly swap pixels in your image. You can do this using the get() function to return the color of a particular pixel, then the set() function to set the color of a particular pixel. Make sure to do both get() calls before you do the set() calls.

Approach 2: Convert your image into a data structure that holds the colors, like an ArrayList of color values. Then rebuild the image by pulling colors from that data structure.

The best thing you can do is try something, post an MCVE if you get stuck, and try to ask a more specific question about a particular line of code. Good luck!

Gene_Webber

Thank you KevinWorkman! That's really helpful and cheers for pointing out different directions. I will see where I get to with both methods and will hopefully be back with more specific questions.

jeremydouglass

@Gene_Webber --

Keep in mind that the pixels in an image -- PImage.pixels[] -- is an array of integers. The IntList is a special list of integers that also has a .shuffle() method and an .array() method. If you follow @KevinWorkman's Approach 2:

Load img.loadPixels() to prepare your pixel array, then declare a new IntList based on img.pixels, then shuffle() it, then copy the results as an .array() back into your img.pixels. Save the results back to the img itself with img.updatePixels(), and you have your shuffled result (which will almost certainly look like television static for almost any image).

jeremydouglass

@Gene_Webber -- I've been looking back at your question recently. At the time I wasn't very satisfied with shuffling pixels, because almost any image becomes random static.

/**
 * Shuffling Pixels
 * 2016-11-17 Jeremy Douglass - Processing 3.2.3
 * hold down space for repeated pixel shuffling
 * https:// forum.processing.org/two/discussion/19093/shifting-re-shuffling-pixels-of-an-image
 **/

PImage original;
PImage shuffle;

void setup(){
  size(500,500);
  original = loadImage("https:// processing.org/img/processing3-logo.png");
  shuffle = original.copy();
  imgShuffle(shuffle);
}

void draw(){
  background(128);
  if(!keyPressed){
    image(original, 0, 0);
  } else {
    image(shuffle, 0, 0);
  }
}

void keyPressed(){
  shuffle = original.copy();
  imgShuffle(shuffle);
}

void imgShuffle (PImage img){
  // copy the image pixel array into an IntList, and shuffle it
  img.loadPixels();
  IntList pxList = new IntList(img.pixels);
  pxList.shuffle();
  // copy the shuffled list back into the image pixels
  img.pixels = pxList.array();
  img.updatePixels();
}

---

Notice that in imgShuffle you might be tempted to loop through the pixels array and copy it into the IntList one pixel at a time, but you can just declare the IntList on pixels without a loop.

...and see also https://forum.processing.org/two/discussion/3546/how-to-randomize-order-of-array

However! The visual effect might become more interesting if you swapped pairs of pixels a certain number of times (or a certain percentage of the time)... or if you moved pixels / swapped pixels a certain distance away from their original location (which starts to work like an image filter).