# Display PImage array elements in specific locations

**URL:** <https://discourse.processing.org/t/display-pimage-array-elements-in-specific-locations/29979>\
**Category:** Coding Questions\
**Created:** [May 9, 2021, 9:40am UTC](https://discourse.processing.org/t/display-pimage-array-elements-in-specific-locations/29979 "2021-05-09T09:40:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![12345](https://avatars.discourse-cdn.com/v4/letter/1/ec9cab/32.png) [@12345](https://discourse.processing.org/u/12345)\
**Post date:** [May 9, 2021, 9:40am UTC](https://discourse.processing.org/t/display-pimage-array-elements-in-specific-locations/29979/1 "2021-05-09T09:40:50Z")

</div>

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:

```auto

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 9, 2021, 9:57am UTC](https://discourse.processing.org/t/display-pimage-array-elements-in-specific-locations/29979/2 "2021-05-09T09:57:42Z")

</div>

> [@12345](#):
>
> ```auto
> for (int i = 0; i < slice.length; i++) 
> //drawing the current "slice" at x and y
> { 
> image(slice[9], x, y);
> }
> 
> ```

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.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/87a708283a1258d409070bc5759cb1df2b52907f.jpeg)

I encourage you to review the resources available here:

> **Open sesame!**
>
> - The Processing website has references, examples, tutorials, etc.  
> [https://processing.org/](https://processing.org/)
> - Processing has lots to offer!  
> An exploration of the tabs will reveal what is available; libraries, tools, _ **examples** _ and more.  
> ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1d6a45100f4930df324acb8966086c8eaa28eee4.png)
> - The Coding Train  
> [https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1\_aw](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw)  
> [https://thecodingtrain.com/](https://thecodingtrain.com/)
> - Happy Coding  
> [Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/)

Reference:  
_[for / Reference / Processing.org](https://processing.org/reference/for.html)_

`:)`

---

<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:** [May 9, 2021, 10:20am UTC](https://discourse.processing.org/t/display-pimage-array-elements-in-specific-locations/29979/3 "2021-05-09T10:20:36Z")

</div>

> [@12345](#):
>
> `image(slice[9], x, y);`

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