Display PImage array elements in specific locations

Hi! I’ve written a sketch that loads one PImage then slices this image into 16 equal (200px x 200px) “slices”. I have then created an array of PImage “slices” with 16 slots. I have written a for loop to look through the array and display a slice from the array at (0, 0).

What I would like to do: Be able to display all the “slices” at their .get locations. E.g for slice[9] it would be displayed at (x:200, y:400) of the sketch canvas.

The overall aim: Is to be able to split my PImage img (800px x 800px) into smaller (200px x 200px) “slices” displayed in a 4x4 grid format, at their appropriate locations - so I can control each “slice” independently.

I can’t figure out how to display the PImage array elements at their .get locations, any advice on how to go about this would be greatly appreciated - thanks!

This is my code currently:


// creating a 4 x 4 grid
int numColumns = 4;
int numRows = 4; 
//creating a PImage array of "slices" with 16 slots
PImage img;
PImage[] slice = new PImage[16];
// setting the value of x and y
// need to make these two variables increment (possibly)
float x = 0;
float y = 0;
 
void setup() 
{
  size(800, 800);
  //loading the main image
  img = loadImage("img.png");
  // assign the slots in the array with pixels from the image
  // could try with copy() also set more arguments
  slice[0] = img.get(0, 0, 200, 200);
  slice[1] = img.get(200, 0, 200, 200);
  slice[2] = img.get(400, 0, 200, 200);
  slice[3] = img.get(600, 0, 200, 200);
  slice[4] = img.get(0, 200, 200, 200);
  slice[5] = img.get(200, 200, 200, 200);
  slice[6] = img.get(400, 200, 200, 200);
  slice[7] = img.get(600, 200, 200, 200);
  slice[8] = img.get(0, 400, 200, 200);
  slice[9] = img.get(200, 400, 200, 200);
  slice[10] = img.get(400, 400, 200, 200);
  slice[11] = img.get(600, 400, 200, 200);
  slice[12] = img.get(0, 600, 200, 200);
  slice[13] = img.get(200, 600, 200, 200);
  slice[14] = img.get(400, 600, 200, 200);
  slice[15] = img.get(600, 600, 200, 200);
}
  
void draw() 
{
  background(0);

 //looking through all the images in the array 
 for (int i = 0; i < slice.length; i++) 
 //drawing the current "slice" at x and y
  { 
   
   image(slice[9], x, y);
 }
  
 noFill();
 stroke(255);
 strokeWeight(2);
 rect(x, y, 200, 200);
 
}

This will always display slice[9] at location 0, 0 in your for() loop.

Consider using the i in the for () loop to select the image.
You must also increment x and y in the loop and reset values to 0,0 after the for() loop for the next cycle of draw().

Once you get that working you can work on displaying them as you wish; random locations, a grid, etc.

I encourage you to review the resources available here:

Open sesame!

Reference:
for \ Language (API) \ Processing 3+

:)

Good start!

increment x by the width of a slice (200)

When x is close to the width of the screen

start a new line: x =0; and y = y + height of a slice (200)

With this you display the slides the same way you made them