shuffle a single tile inside its coordinates

• 1st : you should load in setup() once and never in draw() since it runs 60 times a second (so it slows everything down)
  instead of loading anew you want to swap two tiles.
• 2nd: in mousePressed() you show the images. Better show them in draw().
• 3rd: in mousePressed() you really want sonething else. But what? Swap two images? Then you need to store if the programs waits for image 1 or for image 2.
  When it gets image 1, store it. When it has image 2 swap both.

• We load all images once in setup()
• We show them 60 times per second in draw()
• When mouse is clicked we use mouseX and mouseY to check where (in which image)
  
• depending on waitingForImage we know if it is image #1 of two or # 2 of two
• When it is #1 we wait
  
• When it is #2 we swap

• i is x-value for position
• i2 is y-value for position
• count is the index of your image array

1. PImage[] myImageArray = new PImage[6];
2. int waitingForImage = 0; // tells you we wait for #1 or #2
3. int imageWait1; // save both clicked images 
4. int imageWait2;
5. //
6. void setup() {
7.   size(1000, 500);
8.   smooth();
9.   myImageArray [0] = loadImage( "1.jpg");
10.   myImageArray [1] = loadImage( "2.jpg");
11.   myImageArray [2] = loadImage( "3.jpg");
12.   myImageArray [3] = loadImage( "4.jpg");
13.   myImageArray [4] = loadImage( "5.jpg");
14.   myImageArray [5] = loadImage( "6.jpg");
15. }
16. //
17. void draw() {
18.   background(10, 10, 10);
19.   int count = 0;
20.   for (int i=0; i < 2; i++) {
21.     for (int i2=0; i2 < 2; i2++) {
22.       // myImageArray [count].resize(250, 250);
23.       image (  myImageArray [count], i*250, i2*250 )  ;
24.       count ++;
25.     }
26.   }
27. }
28. //
29. void mousePressed() {
30.   int count = 0;
31.   for (int i=0; i < 2; i++) {
32.     for (int i2=0; i2 < 2; i2++) {
33.       if (mouseX>i*250 && mouseX < (i+1)*250 && mouseY>i2*250 && mouseY < (i2+1) *250) {
34.         if (waitingForImage == 0) {
35.           imageWait1 = count;
36.           waitingForImage=1;
37.           return;
38.         } // if
39.         else if (waitingForImage == 1) {
40.           imageWait2 = count;
41.           swap (imageWait1, imageWait2);
42.           waitingForImage=0;// reset
43.           return;
44.         } // else
45.       } // outer if
46.       count++;
47.     } // for
48.   } // for
49. } // func
50. //
51. void swap (int im1, int im2) {
52.   PImage temp = myImageArray [im1];  // save 1
53.   myImageArray [im1] = myImageArray [im2]; // overwrite 1
54.   myImageArray [im2] = temp;   // writing 1 back to 2
55. }
56. //

1. //
2. PImage[] myImageArray = new PImage[10];
3. int waitingForImage = 0; // tells you we wait for image #1 or #2
4. int imageWait1=-1; // save both clicked images 
5. int imageWait2;
6. //
7. void setup() {
8.   size(1000, 500);
9.   smooth();
10.   myImageArray [0] = loadImage( "1.jpg");
11.   myImageArray [1] = loadImage( "2.jpg");
12.   myImageArray [2] = loadImage( "3.jpg");
13.   myImageArray [3] = loadImage( "4.jpg");
14.   myImageArray [4] = loadImage( "5.jpg");
15.   myImageArray [5] = loadImage( "6.jpg");
16.   myImageArray [6] = loadImage( "7.jpg");
17.   myImageArray [7] = loadImage( "8.jpg");
18.   myImageArray [8] = loadImage( "9.jpg");
19.   myImageArray [9] = loadImage( "1.jpg");
20.   //
21.   int count = 0; // index
22.   for (int i=0; i < 4; i++) {
23.     for (int i2=0; i2 < 2; i2++) {
24.       myImageArray [count].resize(250, 250);
25.       count++;
26.     }
27.   }
28. }
29. //
30. void draw() {
31.   background(10, 10, 10);
32.   int count = 0; // index
33.   for (int i=0; i < 4; i++) {
34.     for (int i2=0; i2 < 2; i2++) {
35.       // myImageArray [count].resize(250, 250);
36.       image (  myImageArray [count], i*250, i2*250 )  ;
37.       fill(255);
38.       if (imageWait1==count)
39.         text ("x", i*250+22, i2*250+22);
40.       count ++;
41.     }
42.   }
43. }
44. //
45. void mousePressed() {
46.   int count = 0;
47.   for (int i=0; i < 4; i++) {
48.     for (int i2=0; i2 < 2; i2++) {
49.       if (mouseX>i*250 && mouseX < (i+1)*250 && mouseY>i2*250 && mouseY < (i2+1) *250) {
50.         if (waitingForImage == 0) {
51.           imageWait1 = count;
52.           waitingForImage=1;
53.           return;
54.         } // if
55.         else if (waitingForImage == 1) {
56.           imageWait2 = count;
57.           swap (imageWait1, imageWait2);
58.           waitingForImage = 0;// reset
59.           imageWait1 = -1;
60.           return;
61.         } // else if
62.         else
63.         {
64.           println ("########### not allowed value for waitingForImage ###############################");
65.         } // else
66.       } // outer if
67.       count++;
68.     } // for
69.   } // for
70. } // func
71. //
72. void swap (int im1, int im2) {
73.   if (im1==im2)
74.     return;
75.   PImage temp = myImageArray [im1];  // save 1
76.   myImageArray [im1] = myImageArray [im2]; // overwrite 1
77.   myImageArray [im2] = temp;   // writing 1 back to 2
78. }
79. //

1. PImage[] heads; 
2. PImage[] legs; 

1. int[] headsToDisplay;
2. int[] legsToDisplay;

1. for loop.......
   
2. image heads [ headsToDisplay [i]  ] , 0, i * 250 ) ;

1. heads [count] = int ( random (0,headsToDisplay.length) ) ;

1. //
2. PImage[] heads = new PImage[10];
3. PImage[] legs  = new PImage[10];
4. //
5. int[] headsToDisplay = new int [4];
6. int[] legsToDisplay  = new int [4];
7. // 
8. void setup() {
9.   size(1000, 500);
10.   smooth();
11.   heads [0] = loadImage( "1.jpg");
12.   heads [1] = loadImage( "2.jpg");
13.   heads [2] = loadImage( "3.jpg");
14.   heads [3] = loadImage( "4.jpg");
15.   heads [4] = loadImage( "5.jpg");
16.   heads [5] = loadImage( "6.jpg");
17.   heads [6] = loadImage( "7.jpg");
18.   heads [7] = loadImage( "8.jpg");
19.   heads [8] = loadImage( "9.jpg");
20.   heads [9] = loadImage( "1.jpg");
21.   //
22.   legs [0] = loadImage( "1.jpg");
23.   legs [1] = loadImage( "2.jpg");
24.   legs [2] = loadImage( "3.jpg");
25.   legs [3] = loadImage( "4.jpg");
26.   legs [4] = loadImage( "5.jpg");
27.   legs [5] = loadImage( "6.jpg");
28.   legs [6] = loadImage( "7.jpg");
29.   legs [7] = loadImage( "8.jpg");
30.   legs [8] = loadImage( "9.jpg");
31.   legs [9] = loadImage( "1.jpg");
32.   //
33.   headsToDisplay[0] = 0;
34.   headsToDisplay[1] = 1;
35.   headsToDisplay[2] = 2;
36.   headsToDisplay[3] = 3;
37.   //
38.   legsToDisplay[0] = 4;
39.   legsToDisplay[1] = 5;
40.   legsToDisplay[2] = 6;
41.   legsToDisplay[3] = 7;
42.   //
43.   int count = 0; // index
44.   for (int i=0; i < 4; i++) {
45.     for (int i2=0; i2 < 2; i2++) {
46.       heads [count].resize(250, 250);
47.       legs [count].resize(250, 250);
48.       count++;
49.     }
50.   }
51. }
52. //
53. void draw() {
54.   background(10, 10, 10);
55.   for (int i=0; i < 4; i++) {
56.     image ( heads [ headsToDisplay [i]  ], i * 250, 0 ) ;
57.     image ( legs  [ legsToDisplay  [i]  ], i * 250, 250 ) ;
58.   }
59. }
60. //
61. void mousePressed() {
62.   for (int i=0; i < 4; i++) {
63.     for (int i2=0; i2 < 2; i2++) {
64.       if (mouseX>i*250 && mouseX < (i+1)*250 && mouseY>i2*250 && mouseY < (i2+1) *250) {
65.         if (i2==0) {
66.           headsToDisplay [i] = int ( random (0, heads.length) ) ;
67.           return;
68.         }
69.         else if (i2==1) {
70.           legsToDisplay [i] = int ( random (0, legs.length) ) ;
71.           return;
72.         }
73.       } // if
74.     } // for
75.   } // for
76. } // func
77. //

1.     fadeStronger += fadeSpeed;
2.     fadeWeaker  -= fadeSpeed;
3. 
   
4.     if (fadeStronger>255)
   
5.          fadeStronger=255;
6.     tint(255, fadeStronger ); // Apply transparency without changing color
7.     // show new image
8.     image ( heads [ headsToDisplay [i]  ], i * 250, 0 ) ;
9. 
   
10.     if (fadeWeaker  <0)
    
11.         fadeWeaker  = 0;
12.     tint(255, fadeWeaker  ); // Apply transparency without changing color
13.     if (fadeWeaker > 0) {
    
14.     // show OLD image
15.     }
    

1. oldImage =    headsToDisplay [i];
2. oldImageX = i*250;
3. oldImageY = i2*250;

1. image ( oldImage, oldImageX, oldImageY );

1. PImage oldImage ;
2. float oldImageX ;
3. float oldImageY ;
4. float fadeStronger ;
5. float fadeWeaker ;
6. float fadeSpeed = 10.0;

• tell the upper row only the heads
• tell the lower row only the legs
• tell the first tile in the upper row to use only head 1 and 4

1. //
2. //
3. // GridImages1d
4. PImage[] images = new PImage[10];
5. //
6. // indices to point on that array images
7. int[] headsToDisplay = new int [4]; // those 4 numbers tell which 4 images we have in the upper row
8. int[] legsToDisplay  = new int [4]; // those 4 numbers tell which 4 images we have in the lower row
9. //
10. final int lengthRequired = 10;
11. int [][][] allowed = new int [2][5][lengthRequired];
12. //
13. int [] allowedheads1 = {
14.   1, 2
15. }
16. ;
17. int [] allowedheads2 = {
18.   0, 1, 2
19. }
20. ;
21. int [] allowedheads3 = {
22.   3, 4
23. }
24. ;
25. int [] allowedheads4 = {
26.   5, 6
27. }
28. ;
29. //
30. int [] allowedlegs1 = {
31.   3, 4
32. }
33. ;
34. int [] allowedlegs2 = {
35.   0, 1
36. }
37. ;
38. int [] allowedlegs3 = {
39.   5, 6
40. }
41. ;
42. int [] allowedlegs4 = {
43.   3, 4
44. }
45. ;
46. //
47. // 
48. // fading stuff
49. PImage oldImage ; // which image
50. float oldImageX ; // its position
51. float oldImageY ;
52. //
53. float fadeStronger ; // this image is getting stronger
54. float fadeWeaker ;  // this one is getting weaker
55. float fadeSpeed = 1.0; // the speed of the fading
56. //
57. //
58. final int legsFade = 0;     // we need to know which kind of fading we have
59. final int headsFade = 1;
60. final int noneFade = 2;
61. int currentFadingIs = noneFade;
62. //
63. int currentFadingIsNumber = -1;
64. //
65. void setup() {
66.   size(1000, 500);
67.   smooth();
68.   images [0] = loadImage( "1.jpg");
69.   images [1] = loadImage( "2.jpg");
70.   images [2] = loadImage( "3.jpg");
71.   images [3] = loadImage( "4.jpg");
72.   images [4] = loadImage( "5.jpg");
73.   images [5] = loadImage( "6.jpg");
74.   images [6] = loadImage( "7.jpg");
75.   images [7] = loadImage( "8.jpg");
76.   images [8] = loadImage( "9.jpg");
77.   images [9] = loadImage( "1.jpg");
78.   //
79.   //
80.   // tell which heads are allowed for each image in the upper row
81.   allowed[0][0] = insertArray ( allowedheads1 ) ;
82.   allowed[0][1] = insertArray ( allowedheads2 ) ;
83.   allowed[0][2] = insertArray ( allowedheads3 ) ;
84.   allowed[0][3] = insertArray ( allowedheads4 ) ;
85.   //
86.   allowed[1][0] = insertArray ( allowedlegs1 ) ;
87.   allowed[1][1] = insertArray ( allowedlegs2 ) ;
88.   allowed[1][2] = insertArray ( allowedlegs3 ) ;
89.   allowed[1][3] = insertArray ( allowedlegs4 ) ;
90.   //
91.   println ("===================");
92.   println ("===================");
93.   println (allowed[0][1]);
94.   println ("===================");
95.   //
96.   //
97.   int row = 0;
98.   headsToDisplay[0] = allowed[row][0] [ 0 ] ;
99.   headsToDisplay[1] = allowed[row][1] [ 0 ] ;
100.   headsToDisplay[2] = allowed[row][2] [ 0 ] ;
101.   headsToDisplay[3] = allowed[row][3] [ 0 ] ;
102.   //
103.   row = 1; 
104.   legsToDisplay[0] = allowed[row][0] [ 0 ] ;
105.   legsToDisplay[1] = allowed[row][1] [ 0 ] ;
106.   legsToDisplay[2] = allowed[row][2] [ 0 ] ;
107.   legsToDisplay[3] = allowed[row][3] [ 0 ] ;
108.   //
109.   int count = 0; // index
110.   for (int i=0; i < 10; i++) {
111.     //heads [count].resize(250, 250);
112.     images [count].resize(250, 250);
113.     count++;
114.   }
115. }
116. //
117. void draw() {
118.   background(10, 10, 10);
119.   if (fadeWeaker > 0 && currentFadingIs != noneFade ) {
120.     // show OLD image
121.     tint( 255, fadeWeaker ); // Apply transparency without changing color
122.     image ( oldImage, oldImageX, oldImageY );
123.   }
124.   for (int i=0; i < 4; i++) {
125.     if ( ! (currentFadingIs==headsFade && currentFadingIsNumber==i) ) {
126.       tint (255, 255); // means full image without fading
127.       image ( images [ headsToDisplay [i]  ], i * 250, 0 ) ;
128.     }
129.     else {
130.       tint(255, fadeStronger ); // Apply transparency without changing color
131.       // show new image
132.       image ( images [ headsToDisplay [i]  ], i * 250, 0 ) ;
133.     }
134.     //
135.     //
136.     if ( ! (currentFadingIs==legsFade && currentFadingIsNumber==i) ) {
137.       tint (255, 255); // means full image without fading
138.       image ( images  [ legsToDisplay  [i]  ], i * 250, 250 ) ;
139.     }
140.     else {
141.       tint(255, fadeStronger ); // Apply transparency without changing color
142.       // show new image
143.       image ( images [ legsToDisplay [i]  ], i * 250, 250 ) ;
144.     }
145.   }
146.   // fading manager
147.   if (currentFadingIs != noneFade) {
148.     fadeStronger += fadeSpeed;
149.     fadeWeaker   -= fadeSpeed;
150.     if (fadeStronger>255) {
151.       fadeStronger=0;
152.       currentFadingIs = noneFade ;
153.     } // if
154.     if (fadeWeaker < 0) {
155.       fadeWeaker  = 255;
156.       currentFadingIs = noneFade ;
157.     } // if
158.   } // if
159.   //
160. } // func
161. //
162. void mousePressed() {
163.   // is x-direction, i2 is y-direction in our grid
164.   for (int i=0; i < 4; i++) {
165.     for (int i2=0; i2 < 2; i2++) {
166.       if (mouseX>i*250 && mouseX < (i+1)*250 && mouseY>i2*250 && mouseY < (i2+1) *250) {
167.         if (i2==0) {
168.           oldImage  = images [ headsToDisplay [i] ] ; // save old
169.           oldImageX = i*250;
170.           oldImageY = i2*250;
171.           fadeStronger = 0;    // init fading
172.           fadeWeaker   = 255;
173.           currentFadingIs = headsFade; 
174.           currentFadingIsNumber = i;
175.           // headsToDisplay [i] = int ( random (0, images.length) ) ;  // new image
176.           int newIndex= int ( random (allowed[i2][i][lengthRequired-1]) );
177.           headsToDisplay [i] = allowed[i2][i] [ newIndex ] ;  // new image  
178.           //
179.           return;
180.         }
181.         else if (i2==1) {
182.           oldImage =  images [ legsToDisplay [i] ] ;
183.           oldImageX = i*250;
184.           oldImageY = i2*250;
185.           fadeStronger = 0;
186.           fadeWeaker   = 255;
187.           currentFadingIs = legsFade;
188.           currentFadingIsNumber = i;
189.           // legsToDisplay [i] = int ( random (0, images.length) ) ;
190.           int newIndex= int ( random (allowed[i2][i][lengthRequired-1]) );
191.           legsToDisplay [i] = allowed[i2][i] [ newIndex ] ;  // new image  
192.           return;
193.         }
194.       } // if
195.     } // for
196.   } // for
197. } // func
198. //
199. int [] insertArray (int [] toAdd ) {
200.   int [] Buffer = new int [lengthRequired];
201.   for (int i  = 0 ; i < toAdd.length; i++) {
202.     Buffer [ i ] = toAdd[i];
203.   } // for
204.   // save the allowed max for this
205.   Buffer[lengthRequired-1]=toAdd.length;
206.   println (Buffer);
207.   println ("------------------");
208.   return Buffer;
209. } // int
210. //

that's the fading..................

the above description has flaws.....

1. //
2. int [] allowedheads1 = {
3.   2, 9
4. }
5. ;
6. int [] allowedheads2 = {
7.   4, 5
8. }
9. ;
10. int [] allowedheads3 = {
11.   4, 5
12. }
13. ;
14. int [] allowedheads4 = {
15.   1, 3
16. }
17. ;
18. //
19. int [] allowedlegs1 = {
20.   23, 24, 25, 26, 27
21. }
22. ;
23. int [] allowedlegs2 = {
24.   29, 8
25. }
26. ;
27. int [] allowedlegs3 = {
28.   7, 8
29. }
30. ;
31. int [] allowedlegs4 = {
32.   9, 8
33. }
34. ;//

1. void checkMouseHover() {
2. 
   
3.   for (int i=0; i < 4; i++) {
4.     for (int i2=0; i2 < 2; i2++) {
5.       if (mouseX>i*250 && mouseX < (i+1)*250 && mouseY>i2*250 && mouseY < (i2+1) *250) {
6.         // start a fade for the tile
   
7. }
8. }
9. }
10. 
    
11. }

1. checkMouseHover();

1. void checkMouseHover() {
2. 
   
3.   for (int i=0; i < 4; i++) {
4.     for (int i2=0; i2 < 2; i2++) {
5.       if (mouseX>i*250 && mouseX < (i+1)*250 && mouseY>i2*250 && mouseY < (i2+1) *250) {
6.         // frame for the tile
   
7.         noFill();
8.         stroke ( 0,0,255 );
   
9.         rect ( i * 250, 250, 250, 250 ) ;
   
10. }
11. }
12. }
13. 
    
14. }