A small update of the Code but I always get the Error: Cannot invoke get(int,int,float,float) on the array type PImage... dont know if this is the right way...?

1. PImage[] fragment;
   
   int tileCountX = 2;
   int tileCountY = 2;
   float tileWidth, tileHeight;
   int imageCount = tileCountX*tileCountY;
   int gridX = 0;
   int gridY = 0;
   PImage[] imageTiles = new PImage[imageCount];
   
   
   void setup() {
    size(400, 400);
    smooth();
    background(0);
    noLoop();
    fragment=new PImage[imageCount];
    for(int i=0;i<fragment.length;i++){
    fragment[i]=loadImage(str(i) + ".jpg");
   }
     tileWidth = width / (int)tileCountX;
     tileHeight = height / (int)tileCountY;
   }
   
   void draw(){
     float posX = tileWidth*gridX;
     float posY = tileHeight*gridY;
     imageTiles = new PImage[imageCount];
    
     gridX++;
     if(gridX >= tileCountX) {
       gridX = 0;
       gridY++;
     }
     for(int i=0;i<fragment.length;i++){
       for(int gridX = 0; gridX < width; gridX += tileWidth){
         for (int gridY = 0; gridY < height; gridY += tileHeight){
           image(fragment[i], gridX, gridY, width, height);
           i++;
           imageTiles[i++] = fragment.get(gridX, gridY, tileWidth, tileHeight);
   }
   }
     }
     println(fragment);
   
   }
   

You have to specify an index to access an element referenced by an Array!

Hi,

thanks for your quick reply. After adding:

Thanks a lot! It went in the right direction! The only problem that occured... again another ArrayIndexOutOfBoundsException

As the code is now, my croped image is always the first grid cell, but I would like to go to the next grid cell in the 2nd

image.

1. PImage[] fragment;
   
   int tileCountX = 2;
   int tileCountY = 2;
   int tileWidth, tileHeight;
   int imageCount = tileCountX*tileCountY;
   int gridX = 0;
   int gridY = 0;
   PImage[] imageTiles = new PImage[imageCount];
   
   
   void setup() {
    size(400, 400);
    smooth();
    background(0);
    noLoop();
    fragment=new PImage[imageCount];
    for(int i=0;i<fragment.length;i++){
    fragment[i]=loadImage(str(i) + ".jpg");
   }
     tileWidth = width / (int)tileCountX;
     tileHeight = height / (int)tileCountY;
   }
   
   void draw(){
     float posX = tileWidth*gridX;
     float posY = tileHeight*gridY;
     imageTiles = new PImage[imageCount];
    
     gridX++;
     if(gridX >= tileCountX) {
       gridX = 0;
       gridY++;
     }
     for(int i=0;i<fragment.length;i++){
       for(int gridX = 0; gridX < width; gridX += tileWidth){ //I think here I have to replace gridX += tileWidth to gridX++) But exactly that causes another ArrayIndexOutOfBoundsException
         for (int gridY = 0; gridY < height; gridY += tileHeight){ //same here gridY++
           image(fragment[i], gridX, gridY, width, height); //after placing gridX++ and gridY++ above I get a ArrayIndexOutOfBoundsException in this line
          
           imageTiles[i] = fragment[i++].get(gridX, gridY, tileWidth, tileHeight);
   
   }}
     }
     println(fragment);
   
   }
   

I daresay your problem lies w/ the outermost loop!

Sorry but I thought all the loops are increasing by 1 if I program it like this. Could you give me please another hint? Sorry for my stupidity.

Thanks a lot

Sorry after thousands of tests I´m a bit desperate... with this change my fragments are all the same in the result:

1. void draw(){
     float posX = tileWidth*gridX;
     float posY = tileHeight*gridY;
     imageTiles = new PImage[imageCount];
    
     gridX++;
     if(gridX >= tileCountX) {
       gridX = 0;
      gridY++;
     }
    
       for(int gridX = 0; gridX < width; gridX += tileWidth){
         for (int gridY = 0; gridY < height; gridY += tileHeight){
           for(int i=0,j=0;i<fragment.length&&j<fragment.length;i++,j++){
           image(fragment[i], gridX, gridY, width, height);
          
           imageTiles[j] = fragment[j++].get(gridX, gridY, tileWidth, tileHeight);
   
   }}
     }
     println(fragment);
   
   }
   

Each loop has its own iterator:

I made a small sketch to show where I would like to get...

Looking at those blueprints, I've come up w/ a possible solution!     Hope you can learn from it.

Thanks a lot for the code, but like this I have again the complete images resized and ordered in the grid of the result image... I need to have the fragments of each image in the size of the grid and arranged in the end of the image... Isnt it in your code here:

  img = get(col*tileW,row*tileH,tileW, tileH); //but if I type this I get the error cant find anything named col }

Usually this should work with any image collection that have the same size of pixel in this case 400x400

If I understood right what I was trying to do before in my code, was in fact that by having done a step in the grid I always went back to the image to get the fragment and place it in the result. Thats why I had all these loops.... so again I need to find a method to get the fragments of the pictures and place them in the result

The resize issue I solved by changing the following in your code:

1.   for (int idx=0; idx!=NUM; imgs[idx++] = loadImage(idx + ".jpg"));
   
     for (int idx=0, row=0; row!=GRID; ++row)  for (int col=0; col!=GRID;
         image(imgs[idx++], col++*tileW, row*tileH, width, height));
   
     img = get();

Nevertheless it gives the following result as I sketched here, which is significant different from what I had in mind in the sheme I sketched before... now the result is:

> like this I have again the complete images resized and ordered in the grid of the result image...

could you change your example to reflect this? having the sample images as solid colours probably doesn't really help.

anyway, GoToLoop's example is, imo, overcomplicated and full of tricksy syntax tricks that just confuse people, the sort of thing we frown upon at work - they don't make the code any quicker, just harder to read / maintain.

i'd just replace your triple nested loop with this double nested one - you don't need to iterate over your fragments as they just increment one per box (all your problems are due to overuse of the ++ increment thing)

(this is your second example. all my changes are from line 30 onwards)

1. PImage[] fragment;
2. int tileCountX = 2;
3. int tileCountY = 2;
4. float tileWidth, tileHeight;
5. int imageCount = tileCountX*tileCountY;
6. int gridX = 0;
7. int gridY = 0;
8. PImage[] imageTiles = new PImage[imageCount];
9. void setup() {
10.   size(400, 400);
11.   smooth();
12.   background(0);
13.   noLoop();
14.   fragment=new PImage[imageCount];
15.   for (int i=0;i<fragment.length;i++) {
16.     fragment[i]=loadImage(str(i) + ".png");
17.   } 
18.   tileWidth = width / (int)tileCountX; 
19.   tileHeight = height / (int)tileCountY;
20. }
21. void draw() { 
22.   float posX = tileWidth*gridX; 
23.   float posY = tileHeight*gridY; 
24.   imageTiles = new PImage[imageCount];   
25.   gridX++; 
26.   if (gridX >= tileCountX) {   
27.     gridX = 0;   
28.     gridY++;
29.   } 
30.   int i = 0;      // i got rid of outer loop
    
31.   for (int gridX = 0; gridX < width; gridX += tileWidth) {     
32.     for (int gridY = 0; gridY < height; gridY += tileHeight) {       
33.       image(fragment[i], gridX, gridY); // got rid of width and height
    
34.       imageTiles[i] = fragment[i].get(gridX, gridY, (int)tileWidth, (int)tileHeight);  // added [i] to fragment
    
35.       i++;       
36.     }
37.   }
38. }

not sure what line 34 does to be honest. it doesn't add anything to the picture.

(also, if you hit the Insert Code button after pasting code samples you get line numbers for each line, makes it easier to reference and to cut and paste into processing)

ok, try this. it uses a temporary pimage to do the cropping

1.   int i = 0;
2.   for (int gridX = 0; gridX < width; gridX += tileWidth) {     
3.     for (int gridY = 0; gridY < height; gridY += tileHeight) {
4.       // get the right part of the source image
5.       PImage tmpImage = fragment[i].get(gridX, gridY, (int)tileWidth, (int)tileHeight);
6.       // put it in right place in destination image     
7.       image(tmpImage, gridX, gridY);       
8.       i++;       
9.     }
10.   }

So sorry; but I've ended up misunderstanding what you wanted!