Random rearrange parts of image with Processing

Question

I am trying to cut an image through a grid in four squared parts and then random rearrange them. I thought I could use the copy(); function for achieving this – to cut the image in four parts – then load these parts into a PGraphics array. Next step would be to take them out of the array and and to distribute them randomly into the grid. I thought for this the grid should be built out of an two dimensional array…

This is with what I came up so far:

PImage src;

int[][] grid = new int[2][2];
PGraphics[] pgs = new PGraphics[4];

void setup() {
  size(1080, 1080);
  frameRate(5);
  src = loadImage("dog.jpg");
  src.resize(width, height);
  
          for (int i = 0; i < pgs.length; i++) { 
    pgs[i] = createGraphics(width, height);
  }
}
void draw() {
  background(255);
  //image(src, 0, 0, width, height);

  // Variables for the grid  
  int tilesX = grid.length;
  int tilesY = grid.length;  
  int tileW = int(width/tilesX);
  int tileH = int(width/tilesY);

  // Build the grid
  for (int y = 0; y < tilesY; y++) {
    for (int x = 0; x < tilesX; x++) {


      // These build the coordinates we copy from 
      int sx = x * tileW;
      int sy = y * tileH;
      int sw = tileW;
      int sh = tileH;

      // These build the coordinates we copy to

      int dx = grid[x][y];
      int dy = grid[x][y];
      int dw = tileW;
      int dh = tileH;       

      for (int i = 0; i < pgs.length; i++) {    
        pgs[i].beginDraw();
        pgs[i].copy(src, sx, sy, sw, sh, dx, dy, dw, dh);
        pgs[i].endDraw();
      }

      int selector = int(random(pgs.length));
      grid[x][y] = selector;
      push();
      translate(selector*tileW, selector*tileH);
      image(pgs[grid[x][y]], 0, 0);
      pop();
    }
  }
}

So I managed to built the code from scratch through different steps – but the replacement is all over crazy – and I am not sure anymore If I am on the right track anymor! Is it possible to load the copied parts from the copy function as individual PGraphics into an array?

Thank your for any hint or kind of help!

Answer 1

Here is one way using PGraphics:

PImage src;

PGraphics[] pgs = new PGraphics[4];

void setup() {
  size(1080, 1080);
  frameRate(5);
  src = loadImage("dog.jpg");
  src.resize(width, height);

  for (int i = 0; i < imgs.length; i++) {
    pgs[i] = createGraphics(width/2, height/2);
    pgs[i].beginDraw();
    pgs[i].copy(src, (i % 2) * width/2, floor(i/2) * height/2, width/2, height/2, 0, 0, width/2, height/2);
    pgs[i].endDraw();
  }
}

void draw() {
  background(255);
  for (int i = 0; i < pgs.length; i++) {
    image(pgs[int(random(pgs.length))], (i % 2) * width/2, floor(i / 2) * height/2);
  }
}

You could also use PImage:

PImage src;
PImage[] imgs = new PImage[4];

void setup() {
  size(1080, 1080);
  frameRate(5);
  src = loadImage("dog.jpg");
  src.resize(width, height);

  for (int i = 0; i < imgs.length; i++) {
    imgs[i] = createImage(width/2, height/2, RGB);
    imgs[i].copy(src, (i % 2) * width/2, floor(i/2) * height/2, width/2, height/2, 0, 0, width/2, height/2);
  }
}

void draw() {
  background(255);
  for (int i = 0; i < imgs.length; i++) {
    image(imgs[int(random(imgs.length))], (i % 2) * width/2, floor(i / 2) * height/2);
  }
}

You could also do this without an array of images and just copy straight from the source every frame:

PImage src;

void setup() {
  size(1080, 1080);
  frameRate(5);
  src = loadImage("dog.jpg");
  src.resize(width, height);
}

void draw() {
  background(255);
  for (int i = 0; i < 4; i++) {
    int j = int(random(4));
    copy(src, (j % 2) * width/2, floor(j / 2) * height/2, width/2, height/2, (i % 2) * width/2, floor(i / 2) * height/2, width/2, height/2);
  }
}

Though this final method is more resource intensive and harder to manipulate after the fact.