• http://processing.org/learning/objects/
• http://processing.org/reference/beginShape_.html
• http://processing.org/reference/endShape_.html
• http://processing.org/reference/vertex_.html
• http://processing.org/reference/texture_.html
• http://processing.org/reference/mousePressed_.html
• http://amnonp5.wordpress.com/2012/01/28/25-life-saving-tips-for-processing/ (tip17)
  

1. PImage puzzleimagesmall;
   PImage puzzleimagebig;
   PFont font;
   
   
   void setup() {
    
   size (1200,800,P3D);
   puzzleimagesmall = loadImage("d3s.jpg");
   puzzleimagebig = loadImage ("big.jpg");
   
   
   }
   
   void draw() {
   
   image (puzzleimagesmall, 850,0);
   image (puzzleimagebig,0,0);
   
   beginShape();
   texture (puzzleimagebig);
   vertex(0, 0);
   vertex(400, 0);
   vertex(400, 400);
   vertex(0, 400);
   endShape();
   
   }
   

1. size (1200,800,P3D);

1. size (1200,800);

1. PImage puzzleimagesmall;
2. PImage puzzleimagebig;

1. size(100, 100, P3D);

I used beginShape, verted and endShape because you told me "yes, the links are good for that".
So I thought I should use them
What do you mean by "part of the class"?

However, the changed code is this:

1. PImage puzzleimagesmall;
   PImage puzzleimagebig;
   PFont font;
   
   
   
   
   void setup() {
    
   size (1200,800);
   puzzleimagesmall = loadImage("d3s.jpg");
   puzzleimagebig = loadImage ("big.jpg");
   
   
   
   
   }
   
   void draw() {
   
   image (puzzleimagesmall, 850,0);
   image (puzzleimagebig,0,0);
   
   
   texture (puzzleimagebig);
   vertex(0, 0);
   vertex(400, 0);
   vertex(400, 400);
   vertex(0, 400);
   endShape();
   
   }
   

And now an error message sais: texture() is not available with this renderer.

1. texture (puzzleimagebig);
2. vertex(0, 0);
3. vertex(400, 0);
4. vertex(400, 400);
5. vertex(0, 400);
6. endShape();

What do you mean by "part of the class"?

The easiest would then be to make objects of each single piece with the correct and the current coordinates.

• http://processing.org/learning/objects/
• http://processing.org/reference/mousePressed_.html
• http://amnonp5.wordpress.com/2012/01/28/25-life-saving-tips-for-processing/ (tip17)

You can use begin-endShape(), vertex() and texture() to divide the image up in rows/columns

1. Divide the image outside of Processing (for example with Photoshop) into different images.
2. Use PImage's get() method to get segments of the original image and place them into seperate PImage's.
3. Use Shape, a texture, vertices and texture coordinates to basically display textured polygons.

In comparison my proposed method (3) is perhaps the most advanced. As Chrisir suggested, using the get() method (2) may be a better alternative in this case. In hindsight I would agree with Chrisir on this. Of course even option 1 is a possibility, except that it's inflexible, takes much more work and as said, Processing can very well cut up an image (see options 2 and 3) itself so there is really no need do any pre-processing.

So let me give two examples. First a basic example with the get() method. Then an example that shows you what my original intention was when I suggested creating textured polygons. Note that the latter is not the most efficient piece of code, but it shows the use of a single texture and then using texture coordinates to texture QUAD polygons. The grid size changes dynamically in the example. You can also comment out line 10 that changes the grid size dynamically and then set the grid size manually via the global variable DIM.

Example 1 => get()

1. PImage img = loadImage("http://www.hermitageshop.org/store/images/large/0003710A4_3_01_LRG.jpg");
2. PImage[] pieces = new PImage[4];
3.  
4. void setup() {
5.   size(img.width, img.height, P2D);
6.   pieces[0] = img.get(0, 0, img.width/2, img.height/2);
7.   pieces[1] = img.get(img.width/2, 0, img.width/2, img.height/2);
8.   pieces[2] = img.get(img.width/2, img.height/2, img.width/2, img.height/2);
9.   pieces[3] = img.get(0, img.height/2, img.width/2, img.height/2);
10. }
11.  
12. void draw() {
13.   int fc = frameCount/60;
14.   image(pieces[fc%pieces.length], 0, 0);
15.   image(pieces[(fc+1)%pieces.length], img.width/2, 0);
16.   image(pieces[(fc+2)%pieces.length], img.width/2, img.height/2);
17.   image(pieces[(fc+3)%pieces.length], 0, img.height/2);
18. }

Code Example 2 => Shape, vertex and texture()

1. PImage img = loadImage("http://www.hermitageshop.org/store/images/large/0003710A4_3_01_LRG.jpg");
2. int DIM = 10;
3.  
4. void setup() {
5.   size(img.width, img.height, P2D);
6. }
7.  
8. void draw() {
9.   background(0);
10.   DIM = int(12+sin(frameCount*0.01)*10); // changes grid size dynamically
    
11.   beginShape(QUAD);
12.   texture(img);
13.   for (int y=0; y<DIM; y++) {
14.     for (int x=0; x<DIM; x++) {
15.       float cx = (float)x/DIM;
16.       float cy = (float)y/DIM;
17.       float nx = (float)(x+1)/DIM;
18.       float ny = (float)(y+1)/DIM;
19.       if (dist(cx*width, cy*height, mouseX, mouseY)>width/DIM) {
20.         vertex(cx*width, cy*height, cx, cy);
21.         vertex(nx*width, cy*height, nx, cy);
22.         vertex(nx*width, ny*height, nx, ny);
23.         vertex(cx*width, ny*height, cx, ny);
24.       }
25.     }
26.   }
27.   endShape();
28. }

1. PImage[] pieces = new PImage[4];

I should write that if mouse is pressed in the area (0, 0, img.width/2, img.height/2), the piece can ben switched with another?

1. void mousePressed() {
   
   // mouse is pressed 
   
   }
   
   

• So when 0 are selected and mousepressed on a tile, select this tile (store its number in a var). Set the counter to 1.
  
• So when 1 is already selected and mousepressed on a tile, select it (store its number in a 2nd var) and swap both images. Then reset the counter to 0.

1. PImage puzzleimagesmall;
   PImage puzzleimagebig;
   PImage[] pieces = new PImage[4];
   
   
   
   void setup() {
    
   size (1200,800,P2D);
    pieces[0] = puzzleimagebig.get(0, 0, puzzleimagebig.width/2, puzzleimagebig.height/2);
    pieces[1] = puzzleimagebig.get(puzzleimagebig.width/2, 0, puzzleimagebig.width/2, puzzleimagebig.height/2);
    pieces[2] = puzzleimagebig.get(puzzleimagebig.width/2, puzzleimagebig.height/2, puzzleimagebig.width/2, puzzleimagebig.height/2);
    pieces[3] = puzzleimagebig.get(0, puzzleimagebig.height/2, puzzleimagebig.width/2, puzzleimagebig.height/2);
   
   
   }
   
   void draw() {
   
   image (puzzleimagesmall, 850,0);
   image (puzzleimagebig,0,0);
   
   
   
   }
   

1. // PImage puzzleimagesmall;
2. PImage puzzleimagebig;
3. // three parallel lists; the first items of each list belong together, the second item belong together etc. 
4. PImage[] pieces = new PImage[4]; // image
5. float [] piecesX = new float[4]; // position X
6. float [] piecesY = new float[4]; // position Y
7. void setup() {
8.   size (1200, 800, P2D);
9.   // load it
10.   puzzleimagebig = loadImage("0.jpg");
11.   // cut it
12.   pieces[0] = puzzleimagebig.get(0, 0, puzzleimagebig.width/2, puzzleimagebig.height/2);
13.   pieces[1] = puzzleimagebig.get(puzzleimagebig.width/2, 0, puzzleimagebig.width/2, puzzleimagebig.height/2);
14.   pieces[2] = puzzleimagebig.get(puzzleimagebig.width/2, puzzleimagebig.height/2, puzzleimagebig.width/2, puzzleimagebig.height/2);
15.   pieces[3] = puzzleimagebig.get(0, puzzleimagebig.height/2, puzzleimagebig.width/2, puzzleimagebig.height/2);
16.   // give them positions
17.   piecesX[0] = 550;
18.   piecesY[0] = 50;
19.   piecesX[1] = 50;
20.   piecesY[1] = 150;
21.   piecesX[2] = 700;
22.   piecesY[2] = 400;
23.   piecesX[3] = 33;
24.   piecesY[3] = 450;
25. }
26. void draw() {
27.   background(0);
28.   // show pieces
29.   image (pieces[0], piecesX[0], piecesY[0]);
30.   image (pieces[1], piecesX[1], piecesY[1]);
31.   image (pieces[2], piecesX[2], piecesY[2]);
32.   image (pieces[3], piecesX[3], piecesY[3]);
33. }

1. //
2. // PImage puzzleimagesmall;
3. PImage puzzleimagebig;
4. // three parallel lists; the first items of each list belong together, the second item belong together etc.
5. // the data of one piece is in three different arrays (lists): the image, the x position and the y position
6. PImage[] pieces  = new PImage[4]; // image
7. float [] piecesX = new float[4];  // position X
8. float [] piecesY = new float[4];  // position Y
9. //
10. //
11. void setup() {
12.   //
13.   size (1200, 800, P2D);
14.   // load it
15.   puzzleimagebig = loadImage("0.jpg");
16.   // cut it
17.   pieces[0] = puzzleimagebig.get(0, 0, puzzleimagebig.width/2, puzzleimagebig.height/2);
18.   pieces[1] = puzzleimagebig.get(puzzleimagebig.width/2, 0, puzzleimagebig.width/2, puzzleimagebig.height/2);
19.   pieces[2] = puzzleimagebig.get(puzzleimagebig.width/2, puzzleimagebig.height/2, puzzleimagebig.width/2, puzzleimagebig.height/2);
20.   pieces[3] = puzzleimagebig.get(0, puzzleimagebig.height/2, puzzleimagebig.width/2, puzzleimagebig.height/2);
21.   // give them positions
22.   piecesX[0] = 550;  // for piece # 0
23.   piecesY[0] = 50;
24.   piecesX[1] = 50;   // for piece # 1
25.   piecesY[1] = 150;
26.   piecesX[2] = 700;  // for piece # 2
27.   piecesY[2] = 400;
28.   piecesX[3] = 33;   // for piece # 3
29.   piecesY[3] = 450;
30.   //
31. } // func
32. //
33. //
34. void draw() {
35.   background(0);
36.   //
37.   // show pieces: 
38.   //
39.   // instead of this:
40.   //  image (pieces[0], piecesX[0], piecesY[0]);
41.   //  image (pieces[1], piecesX[1], piecesY[1]);
42.   //  image (pieces[2], piecesX[2], piecesY[2]);
43.   //  image (pieces[3], piecesX[3], piecesY[3]);
44.   // you can say much shorter this:
45.   for (int i = 0; i<pieces.length; i++) {
46.     image (pieces[i], piecesX[i], piecesY[i]);
47.     // you can see the power of an array, because you can handle all elements the same way now!
48.     // Even with 1000 pieces it would be the same!
49.   } // for
50.   //
51. } // func
52. //

1.   puzzleimagesmall = loadImage("d3s.jpg");
     image (puzzleimagesmall, 800,0)

The thumbnail appears for a second and then it disappear and is shown only the divided big image.

• setup() and
• draw()

1.   puzzleimagesmall = loadImage("d3s.jpg");

1.   image (puzzleimagesmall, 800,0)

• From several variables to arrays
• From several arrays to classes

1.  image (puzzleimagesmall, 800,0);

under "draw".
It's strange because at least I know that to show the picture that code had to be written there
I think I'm really confused today.

1. void swap() {
2.     // .....
   
3. }

1. PImage puzzleimagesmall;
   PImage puzzleimagebig;
   // three parallel lists; the first items of each list belong together, the second item belong together etc.
   // the data of one piece is in three different arrays (lists): the image, the x position and the y position
   PImage[] pieces  = new PImage[4]; // image
   float [] piecesX = new float[4];  // position X
   float [] piecesY = new float[4];  // position Y
   int i;
   int j;
   
    
   void setup() {
     //
     size (1024,768, P2D);
     // load it
     puzzleimagebig = loadImage("big.jpg");
     puzzleimagesmall = loadImage("d3s.jpg");
   
     // cut it
     pieces[0] = puzzleimagebig.get(0, 0, puzzleimagebig.width/2, puzzleimagebig.height/2);
     pieces[1] = puzzleimagebig.get(puzzleimagebig.width/2, 0, puzzleimagebig.width/2, puzzleimagebig.height/2);
     pieces[2] = puzzleimagebig.get(puzzleimagebig.width/2, puzzleimagebig.height/2, puzzleimagebig.width/2, puzzleimagebig.height/2);
     pieces[3] = puzzleimagebig.get(0, puzzleimagebig.height/2, puzzleimagebig.width/2, puzzleimagebig.height/2);
     // give them positions
     piecesX[0] = 0;  // for piece # 0
     piecesY[0] = 0;
     piecesX[1] = 300;   // for piece # 1
     piecesY[1] = 0;
     piecesX[2] = 300;  // for piece # 2
     piecesY[2] = 300;
     piecesX[3] = 0;   // for piece # 3
     piecesY[3] = 300;
   
     //
   } // func
   //
   //
   
   
2. void swap(int i, int j) {
3. PImage dummy = pieces[i];
4. pieces[i] = pieces[j];
5. pieces[j] = dummy;
6. }
7. 
   void draw() {
     background(0);
       image (puzzleimagesmall, 824,0);
     // show pieces:
     //
     for (int i = 0; i<pieces.length; i++) {
       image (pieces[i], piecesX[i], piecesY[i]);
       // you can see the power of an array, because you can handle all elements the same way now!
       // Even with 1000 pieces it would be the same!
     } // for
     //
   } // func
   //
   
   
   
   

1. swap (0,2);

1. swap = random (0,4);

swap( 0,2);
What those numbers stand for?

1. swap(0,2);
2. swap(1,3);

1. swap = random (0,4);

?
Where 0 and 4 are the total indexes of the four pieces?

1. i=5;

1. swap(0,2);

1. swap =

1. swap(0,2);

1. swap (randomA, randomB);

1. int randomA = int ( random (0,4) );
2. int randomB = int ( random (0,4) );
3. swap (randomA, randomB);

1. swap ( int ( random (0,4) ),  int ( random (0,4) ) );

1. swap(0,2);
2. swap(1,3);
3. int randomA = int ( random (0,4) );
4. int randomB = int ( random (0,4) );
5. swap (randomA, randomB);

1. swap(0,2);
2. swap(1,3);
3. int randomA = int ( random (0,4) );
4. int randomB = int ( random (0,4) );
5. swap (randomA, randomB);

1. int randomA = int ( random (0,4) );
2. int randomB = int ( random (0,4) );
3. swap (randomA, randomB);

But instead of A and B, should I used the indexes of my pieces? Something like that?

Copy code

1. swap(0,2);
2. swap(1,3);
3. int randompieces[i] = int ( random (0,4) );
4. int randompieces[j] = int ( random (0,4) );
5. swap (randompieces[i], randompieces[j]);

?

1. int smallWidth = 200;
2. PImage small, img = loadImage("http://www.hermitageshop.org/store/images/large/0003710A4_3_01_LRG.jpg");
3. PImage[] pieces = new PImage[4];
4. int[] positions = { 3, 0, 2, 1 }; // default 'random' order (not actual shuffle method ;-)
   
5. int selectedImage = -1;
6.  
7. void setup() {
8.   size(img.width+smallWidth, img.height);
9.   small = img.get();
10.   small.resize(smallWidth, 0);
11.   pieces[0] = img.get(0, 0, img.width/2, img.height/2);
12.   pieces[1] = img.get(img.width/2, 0, img.width/2, img.height/2);
13.   pieces[2] = img.get(0, img.height/2, img.width/2, img.height/2);
14.   pieces[3] = img.get(img.width/2, img.height/2, img.width/2, img.height/2);
15.   textAlign(CENTER, CENTER);
16. }
17.  
18. void draw() {
19.   background(0);
20.   image(pieces[ positions[0] ], 0, 0);
21.   image(pieces[ positions[1] ], img.width/2, 0);
22.   image(pieces[ positions[2] ], 0, img.height/2);
23.   image(pieces[ positions[3] ], img.width/2, img.height/2);
24.   image(small, img.width, 0);
25.   if (isFinished()) {
26.     textSize(200+sin(frameCount*0.15)*100);
27.     fill(random(255), random(255), random(255));
28.     text("DONE!", width/2, height/2);
29.   }
30. }
31.  
32. void mousePressed() {
33.   if (mouseX < img.width) {
34.     int index = mouseX/pieces[0].width + (mouseY/pieces[0].height) * 2;
35.     if (selectedImage < 0) {
36.       selectedImage = index;
37.     } else {
38.       swapPositions(selectedImage, index);
39.       selectedImage = -1;
40.     }
41.   }
42. }
43.  
44. void swapPositions(int a, int b) {
45.   int temp = positions[a];
46.   positions[a] = positions[b];
47.   positions[b] = temp;
48. }
49.  
50. boolean isFinished() {
51.   boolean done = true;
52.   for (int i=0; i<positions.length; i++) {
53.     if (positions[i] != i) {
54.       done = false;
55.       break;
56.     }
57.   }
58.   return done;
59. }

1. int[] positions = { 3, 0, 2, 1 };

1.   // Generate a list of random indices
2.   // http://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle
3.   // inside-out algorithm
4.   for (int i = 1; i < positions.length; i++)
5.   {
6.     int j = int(random(0, i+1));
7.     swapPositions(i, j);   
8.   }

1.   // Generate a list of random indices
2.   // http://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle
3.   // inside-out algorithm
4.   for (int i = 1; i < positions.length; i++)
5.   {
6.     int j = int(random(0, i+1));
7.     int dummy = positions[i];
8.     positions[i] = positions[j];
9.     positions[j] = dummy;
10.   }

1. PImage small, img = loadImage("d3s.jpg");

1. PImage small;
2. PImage img = loadImage("d3s.jpg");

1. int temp = positions[a];    // put the value in my list positions in row a into temp
2. positions[a] = positions[b];  // put the value in my list positions in row b into list, row a
3. positions[b] = temp; //put the value of temp (which was positions[a]) in my list positions in row b

swapping complete!

Since we overwrite values we need temp to store the old value.


Remark

The = is not an equation but a command saying "put the value of the right side variable into the left side variable"

leftsidevariable  = rightsidevariable;

Test it:

(this is a full functioning program, not a part of your puzzle program)

1. int a = 3+5;
2. println (a);

or
(this is a full functioning program)

1. int a = 4;
2. println ( a )  ;
3. int b = 5;
4. a = b;
5. println ( a )  ;

prints 4, then 5


Greetings, Chrisir    

1.     int smallWidth = 200;
       PImage small;
       PImage img = loadImage("d3s.jpg"); //the file is obviously in "data" folder with this exact name
       PImage[] pieces = new PImage[4];
       int[] positions = { 3, 0, 2, 1 }; // random order
       int selectedImage = -1;
       
       void setup() {
         size(img.width+smallWidth, img.height);
         small = img.get();
         small.resize(smallWidth, 0);
         pieces[0] = img.get(0, 0, img.width/2, img.height/2);
         pieces[1] = img.get(img.width/2, 0, img.width/2, img.height/2);
         pieces[2] = img.get(0, img.height/2, img.width/2, img.height/2);
         pieces[3] = img.get(img.width/2, img.height/2, img.width/2, img.height/2);
        
     for (int i = 1; i < positions.length; i++)
     {
       int j = int(random(0, i+1));
       swapPositions(i, j);  
     }     
         textAlign(CENTER, CENTER);
       }
       
       void draw() {
         background(0);
         image(pieces[ positions[0] ], 0, 0);
         image(pieces[ positions[1] ], img.width/2, 0);
         image(pieces[ positions[2] ], 0, img.height/2);
         image(pieces[ positions[3] ], img.width/2, img.height/2);
         image(small, img.width, 0);
         if (isFinished()) {
           textSize(200+sin(frameCount*0.15)*100);
           fill(random(255), random(255), random(255));
           text("DONE!", width/2, height/2);
         }
       }
       
       void mousePressed() {
         if (mouseX < img.width) {
           int index = mouseX/pieces[0].width + (mouseY/pieces[0].height) * 2;
           if (selectedImage < 0) {
             selectedImage = index;
           } else {
             swapPositions(selectedImage, index);
             selectedImage = -1;
           }
         }
       }
       
       void swapPositions(int a, int b) {
         int temp = positions[a];
         positions[a] = positions[b];
         positions[b] = temp;
       }
       
       boolean isFinished() {
         boolean done = true;
         for (int i=0; i<positions.length; i++) {
           if (positions[i] != i) {
             done = false;
             break;
           }
         }
         return done;
       }

1.    void setup() {
2.       size(img.width+smallWidth, img.height);
3.       img = loadImage("d3s.jpg"); //the file is obviously in "data" folder with this exact name

1. PImage small;
2. PImage img;