Loading...
Logo
Processing Forum
Programming Questions
paminator
paminator

Creating a simple, interactive shuffle gallery

in Programming Questions  •  6 months ago  
Hey!

I am a very novice programmer, and am creating a simple interactive piece that allows the audience to shuffle between an array of images arranged in tiles (250x250 pixels, 4 on the top and 4 on the bottom). Each tile can only be shuffled when the cursor is hovering over its coordinates, and some tiles are only specific to certain images. This is what I have so far:

PImage[] myImageArray = new PImage[5];

void setup() {
  size(1000,500);
  background(10,10,10);
  smooth();
}

void draw() { 
 
  for (int i=0; i < myImageArray.length; i++) {
   myImageArray [0] = loadImage( "one.jpg");
   myImageArray [1] = loadImage( "two.jpg");
   myImageArray [2] = loadImage( "three.jpg");
   myImageArray [3] = loadImage( "four.jpg");
   myImageArray [4] = loadImage( "five.jpg");
  }
}

void mousePressed(){
  image(myImageArray[(int)random(5)],0,0);
  image(myImageArray[(int)random(5)],250,0);
  image(myImageArray[(int)random(5)],500,0);
  image(myImageArray[(int)random(5)],750,0);
  image(myImageArray[(int)random(5)],0,250);
  image(myImageArray[(int)random(5)],250,250);
  image(myImageArray[(int)random(5)],500,250);
  image(myImageArray[(int)random(5)],750,250);
} 

At this point I need to know how to shuffle a single tile inside its coordinates (as of right now wherever I click inside the sketch all tiles shuffle simultaneously).

Also...how difficult would it be to add a fade in (or out) effect after clicking?

Thanks to anyone in advance. I really appreciate the help I have received on this forum for previous projects. So thank you!

Replies(39)

Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago


what is this:


shuffle a single tile inside its coordinates

to swap with another tile?

Or vibrate?

There are a few things umh... wrong in your sketch.
  • 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.



paminator
paminator

Re: Creating a simple, interactive shuffle gallery

6 months ago
To swap with another tile/image in that 250x250 space.
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago

ok I wrote more in my answer now
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago



here is a solution

I hope this helps.

What it does:
  • 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

to bring them in nice grid form I use a double for-loop:
  • i is x-value for position
  • i2 is y-value for position
  • count is the index of your image array

[edited]


Copy code
  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. //


Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago

new version 4x2 images


Copy code
  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. //

paminator
paminator

Re: Creating a simple, interactive shuffle gallery

6 months ago
Ugh...this is GREAT (really!) but by swap I meant swap an image out and shuffle it with a random one from my collection of images.

To clarify, my project is going to be a kind of mix and match piece. The top 4 tiles are going to be the upper halves of bodies (head/torso), while the bottom 4 tiles are going to be lower halves (legs/feet). Although there can only be 8 images on the screen at a time, my collection of images consists of over 20, so since I can only swap around the 8 images that are displayed in the sketch you wrote, I unfortunately won't be able to use it.

So...instead of Processing looking for a 2nd image (waitingForImage) to swap after the 1st one is selected, the image clicked in those coordinates would simply shuffle/randomize between my collection of images


Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago
ugh...
ok, so swap and exchange for a yet hidden image
and you have 20 for body and 20 for head -and head is always up, legs down 

you could have 4 arrays legsShown legsHidden headShown headHidden

now when swap swap between array 1&2 and 2&3

cheers!
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago
do you want it so that when mouse clicked all images change or only the clicked image?
paminator
paminator

Re: Creating a simple, interactive shuffle gallery

6 months ago
The only image that would change would be the one clicked on
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago


heads are always on the upper side, legs on the lower side?


paminator
paminator

Re: Creating a simple, interactive shuffle gallery

6 months ago
yup!
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago


OK, can you load your images into two arrays "heads" and "legs"
Copy code
  1. PImage[] heads; 
  2. PImage[] legs; 


you don't display those directly

instead you have have two arrays storing indices :
Copy code
  1. int[] headsToDisplay;
  2. int[] legsToDisplay;

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

when one image is clicked just change the value
Copy code
  1. heads [count] = int ( random (0,headsToDisplay.length) ) ;



Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago

sorry I am not at home and can't write the thing here...................... 
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago


Do you still need help?

paminator
paminator

Re: Creating a simple, interactive shuffle gallery

6 months ago
Ugh...yea. I'm not sure where to place the example code that you last sent.
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago

you can't really test it with 6 images - you need 20 or 2x20 ?


paminator
paminator

Re: Creating a simple, interactive shuffle gallery

6 months ago
You got 6? I sent 8. When Im done Im probably going to have around 20-25 photos total. I can send more placeholders if you need them.
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago
yes, 8 sorry   

I am on it
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago

like this...

Copy code
  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. //

paminator
paminator

Re: Creating a simple, interactive shuffle gallery

6 months ago
You are seriously amazing. I'm adding you to my special thanks. Ill make sure to show you the end product when Im done. How difficult would it be to add a fan-in/fade-out when you click on an image using transparency? 
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago


Hello!

Thank you!

Please read and understand it, otherwise you don't learn. I say this with all respect.

Please note that both rows are well separated.

If you would load different images in lines 11 to 31 they would stay separate (a head would never occur in the lower row).

You can test if you have a set of cat images and load them in line 22 to 31 (simulating the legs ).

Fading is fairly easy / pretty hard.
See
http://processing.org/reference/tint_.html
and
https://forum.processing.org/topic/fading-images-in-out

so as soon as we have a change (line 66 / 70) you have to trigger the effect.
What you want is:
The old image is shown and gets weaker and the new image gets shown (same place, same size) and gets stronger. Right?
You got two vars fadeStronger and fadeWeaker. one increases in draw() one decreases. From 0 to 255 to use with tint (and with 255 to 0 resp.).

Copy code
  1.     fadeStronger += fadeSpeed;
  2.     fadeWeaker  -= fadeSpeed;

  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 ) ;

  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.     }

But what is the old image?
We have to save it in line 66 / 70
and also save the position of it.
Copy code
  1. oldImage =    headsToDisplay [i];
  2. oldImageX = i*250;
  3. oldImageY = i2*250;

so after line 14 above we say
Copy code
  1. image ( oldImage, oldImageX, oldImageY );

And you have to declare all the new vars globally (before setup() ):
Copy code
  1. PImage oldImage ;
  2. float oldImageX ;
  3. float oldImageY ;
  4. float fadeStronger ;
  5. float fadeWeaker ;
  6. float fadeSpeed = 10.0;


Wow! I didn't think it was this hard to do......  
(not tested, I am not at home. Maybe it's look better if we show the old image first and then the new on top of it.)


Another idea is to make sure we never see one image twice in the upper row at the same time. Or is this not important for you?

Greetings, Chrisir 

Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago

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

the above description has flaws.....

Copy code
  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. PImage oldImage ;
  9. float oldImageX ;
  10. float oldImageY ;
  11. //
  12. float fadeStronger ; // this image is getting stronger
  13. float fadeWeaker ;  // this one is getting weaker
  14. float fadeSpeed = 1.0;
  15. //
  16. final int  legsFade = 0;
  17. final int  headsFade = 1;
  18. final int  noneFade = 2;
  19. int currentFadingIs = noneFade  ;
  20. //
  21. int currentFadingIsNumber = -1;
  22. //
  23. void setup() {
  24.   size(1000, 500);
  25.   smooth();
  26.   heads [0] = loadImage( "1.jpg");
  27.   heads [1] = loadImage( "2.jpg");
  28.   heads [2] = loadImage( "3.jpg");
  29.   heads [3] = loadImage( "4.jpg");
  30.   heads [4] = loadImage( "5.jpg");
  31.   heads [5] = loadImage( "6.jpg");
  32.   heads [6] = loadImage( "7.jpg");
  33.   heads [7] = loadImage( "8.jpg");
  34.   heads [8] = loadImage( "9.jpg");
  35.   heads [9] = loadImage( "1.jpg");
  36.   //
  37.   legs [0] = loadImage( "1.jpg");
  38.   legs [1] = loadImage( "2.jpg");
  39.   legs [2] = loadImage( "3.jpg");
  40.   legs [3] = loadImage( "4.jpg");
  41.   legs [4] = loadImage( "5.jpg");
  42.   legs [5] = loadImage( "6.jpg");
  43.   legs [6] = loadImage( "7.jpg");
  44.   legs [7] = loadImage( "8.jpg");
  45.   legs [8] = loadImage( "9.jpg");
  46.   legs [9] = loadImage( "1.jpg");
  47.   //
  48.   headsToDisplay[0] = 0;
  49.   headsToDisplay[1] = 1;
  50.   headsToDisplay[2] = 2;
  51.   headsToDisplay[3] = 3;
  52.   //
  53.   legsToDisplay[0] = 4;
  54.   legsToDisplay[1] = 5;
  55.   legsToDisplay[2] = 6;
  56.   legsToDisplay[3] = 7;
  57.   //
  58.   int count = 0; // index
  59.   for (int i=0; i < 10; i++) {
  60.     heads [count].resize(250, 250);
  61.     legs [count].resize(250, 250);
  62.     count++;
  63.   }
  64. }
  65. //
  66. void draw() {
  67.   background(10, 10, 10);
  68.   if (fadeWeaker > 0 && currentFadingIs != noneFade ) {
  69.     // show OLD image
  70.     tint( 255, fadeWeaker ); // Apply transparency without changing color
  71.     image ( oldImage, oldImageX, oldImageY );
  72.   }
  73.   for (int i=0; i < 4; i++) {
  74.     if ( ! (currentFadingIs==headsFade && currentFadingIsNumber==i) ) {
  75.       tint (255, 255); // means full image without fading
  76.       image ( heads [ headsToDisplay [i]  ], i * 250, 0 ) ;
  77.     }
  78.     else {
  79.       tint(255, fadeStronger ); // Apply transparency without changing color
  80.       // show new image
  81.       image ( heads [ headsToDisplay [i]  ], i * 250, 0 ) ;
  82.     }
  83.     //
  84.     //
  85.     if ( ! (currentFadingIs==legsFade && currentFadingIsNumber==i) ) {
  86.       tint (255, 255); // means full image without fading
  87.       image ( legs  [ legsToDisplay  [i]  ], i * 250, 250 ) ;
  88.     }
  89.     else {
  90.       tint(255, fadeStronger ); // Apply transparency without changing color
  91.       // show new image
  92.       image ( legs [ legsToDisplay [i]  ], i * 250, 250 ) ;
  93.     }
  94.   }
  95.   // fading manager
  96.   fadeStronger += fadeSpeed;
  97.   fadeWeaker   -= fadeSpeed;
  98.   if (fadeStronger>255) {
  99.     fadeStronger=0;
  100.     currentFadingIs = noneFade ;
  101.     println ("fade end");
  102.   }
  103.   if (fadeWeaker < 0) {
  104.     fadeWeaker  = 255;
  105.     currentFadingIs = noneFade ;
  106.     println ("fade end");
  107.   }
  108.   //
  109. } // func
  110. //
  111. void mousePressed() {
  112.   for (int i=0; i < 4; i++) {
  113.     for (int i2=0; i2 < 2; i2++) {
  114.       if (mouseX>i*250 && mouseX < (i+1)*250 && mouseY>i2*250 && mouseY < (i2+1) *250) {
  115.         if (i2==0) {
  116.           oldImage =   heads [ headsToDisplay [i] ] ;
  117.           oldImageX = i*250;
  118.           oldImageY = i2*250;
  119.           fadeStronger = 0;
  120.           fadeWeaker   = 255;
  121.           currentFadingIs = headsFade;
  122.           currentFadingIsNumber = i;
  123.           headsToDisplay [i] = int ( random (0, heads.length) ) ;
  124.           return;
  125.         }
  126.         else if (i2==1) {
  127.           oldImage =  legs  [   legsToDisplay [i] ] ;
  128.           oldImageX = i*250;
  129.           oldImageY = i2*250;
  130.           fadeStronger = 0;
  131.           fadeWeaker   = 255;
  132.           currentFadingIs = legsFade;
  133.           currentFadingIsNumber = i;
  134.           legsToDisplay [i] = int ( random (0, legs.length) ) ;
  135.           return;
  136.         }
  137.       } // if
  138.     } // for
  139.   } // for
  140. } // func
  141. //

paminator
paminator

Re: Creating a simple, interactive shuffle gallery

6 months ago
Hi Chrisir Would you be able to help me with that interactive shuffle gallery you coded? I need to make it more intelligent...I guess you would say but am stuck on the variables aspect. You know how you divided the top and bottom tiles using headsdisplay and legsdisplay? I need certain tiles to only shuffle certain pictures...so I tried creating legsleftdisplay/headsleft display and legsrightdisplay/headright display but was confused about what to write in the mousepressed area.
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago

I hope I can take a look tonight....



Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago

it is long ago and my memory is weak...

I am an old man.

We have 2 rows of 3 images each, right?

ok...

what is it that you want?

make certain legs stick to the left part?
make certain legs stick to the right part?
But to which images? The 1st two or only the 1st alone?

Can you post your current code pls?


paminator
paminator

Re: Creating a simple, interactive shuffle gallery

6 months ago
Lol yea I will post the code and Im also going to send a mock up of what it should look like. Thank you
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago

herewith you can tell for each tile which numbers from the image list are allowed.

There is only one big image list.

So now you can assign each tile a different number of numbers which are indices for the allowed images -

This allows to
  • 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

Hope this helps!   


Copy code
  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. //

Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

6 months ago

BTW
my approach starting with


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

the above description has flaws.....



has already different sets for upper and lower row.
(But not for individual tiles)
paminator
paminator

Re: Creating a simple, interactive shuffle gallery

5 months ago
I have a collection of about 40 photos...I tried changing the integer but its not working? Is there something Im missing

//
//
// GridImages1d
PImage[] images = new PImage[35];
//
// indices to point on that array images
int[] headsToDisplay = new int [4]; // those 4 numbers tell which 4 images we have in the upper row
int[] legsToDisplay  = new int [4]; // those 4 numbers tell which 4 images we have in the lower row
//
final int lengthRequired = 10;
int [][][] allowed = new int [2][5][lengthRequired];
//
int [] allowedheads1 = {
  2, 9
}
;
int [] allowedheads2 = {
  4, 5
}
;
int [] allowedheads3 = {
  4, 5
}
;
int [] allowedheads4 = {
  1, 3
}
;
//
int [] allowedlegs1 = {
  23, 24, 25, 26, 27
}
;
int [] allowedlegs2 = {
  29, 8
}
;
int [] allowedlegs3 = {
  7, 8
}
;
int [] allowedlegs4 = {
  9, 8
}
;
//
// 
// fading stuff
PImage oldImage ; // which image
float oldImageX ; // its position
float oldImageY ;
//
float fadeStronger ; // this image is getting stronger
float fadeWeaker ;  // this one is getting weaker
float fadeSpeed = 1.0; // the speed of the fading
//
//
final int legsFade = 0;     // we need to know which kind of fading we have
final int headsFade = 1;
final int noneFade = 2;
int currentFadingIs = noneFade;
//
int currentFadingIsNumber = -1;
//
void setup() {
  size(1000, 500);
  smooth();
  images [0] = loadImage( "1.jpg");
  images [1] = loadImage( "2.jpg");
  images [2] = loadImage( "3.jpg");
  images [3] = loadImage( "4.jpg");
  images [4] = loadImage( "5.jpg");
  images [5] = loadImage( "6.jpg");
  images [6] = loadImage( "7.jpg");
  images [7] = loadImage( "8.jpg");
  images [8] = loadImage( "9.jpg");
  images [9] = loadImage( "10.jpg");
  images [10] = loadImage( "11.jpg");
  images [11] = loadImage( "12.jpg");
  images [12] = loadImage( "13.jpg");
  images [13] = loadImage( "14.jpg");
  images [14] = loadImage( "15.jpg");
  images [15] = loadImage( "16.jpg");
  images [16] = loadImage( "17.jpg");
  images [17] = loadImage( "18.jpg");
  images [18] = loadImage( "19.jpg");
  images [19] = loadImage( "20.jpg");
  images [20] = loadImage( "21.jpg");
  images [21] = loadImage( "22.jpg");
  images [22] = loadImage( "23.jpg");
  images [23] = loadImage( "24.jpg");
  images [24] = loadImage( "25.jpg");
  images [25] = loadImage( "26.jpg");
  images [26] = loadImage( "27.jpg");
  images [27] = loadImage( "28.jpg");
  images [28] = loadImage( "29.jpg");
  images [29] = loadImage( "30.jpg");
  images [30] = loadImage( "31.jpg");
  images [31] = loadImage( "32.jpg");
  images [32] = loadImage( "33.jpg");
  images [33] = loadImage( "34.jpg");
  images [34] = loadImage( "1.jpg");
  
  
  //
  //
  // tell which heads are allowed for each image in the upper row
  allowed[0][0] = insertArray ( allowedheads1 ) ;
  allowed[0][1] = insertArray ( allowedheads2 ) ;
  allowed[0][2] = insertArray ( allowedheads3 ) ;
  allowed[0][3] = insertArray ( allowedheads4 ) ;
  //
  allowed[1][0] = insertArray ( allowedlegs1 ) ;
  allowed[1][1] = insertArray ( allowedlegs2 ) ;
  allowed[1][2] = insertArray ( allowedlegs3 ) ;
  allowed[1][3] = insertArray ( allowedlegs4 ) ;
  //
  println ("===================");
  println ("===================");
  println (allowed[0][1]);
  println ("===================");
  //
  //
  int row = 0;
  headsToDisplay[0] = allowed[row][0] [ 0 ] ;
  headsToDisplay[1] = allowed[row][1] [ 0 ] ;
  headsToDisplay[2] = allowed[row][2] [ 0 ] ;
  headsToDisplay[3] = allowed[row][3] [ 0 ] ;
  //
  row = 1; 
  legsToDisplay[0] = allowed[row][0] [ 0 ] ;
  legsToDisplay[1] = allowed[row][1] [ 0 ] ;
  legsToDisplay[2] = allowed[row][2] [ 0 ] ;
  legsToDisplay[3] = allowed[row][3] [ 0 ] ;
  //
  int count = 0; // index
  for (int i=0; i < 10; i++) {
    //heads [count].resize(250, 250);
    images [count].resize(250, 250);
    count++;
  }
}
//
void draw() {
  background(10, 10, 10);
  if (fadeWeaker > 0 && currentFadingIs != noneFade ) {
    // show OLD image
    tint( 255, fadeWeaker ); // Apply transparency without changing color
    image ( oldImage, oldImageX, oldImageY );
  }
  for (int i=0; i < 4; i++) {
    if ( ! (currentFadingIs==headsFade && currentFadingIsNumber==i) ) {
      tint (255, 255); // means full image without fading
      image ( images [ headsToDisplay [i]  ], i * 250, 0 ) ;
    }
    else {
      tint(255, fadeStronger ); // Apply transparency without changing color
      // show new image
      image ( images [ headsToDisplay [i]  ], i * 250, 0 ) ;
    }
    //
    //
    if ( ! (currentFadingIs==legsFade && currentFadingIsNumber==i) ) {
      tint (255, 255); // means full image without fading
      image ( images  [ legsToDisplay  [i]  ], i * 250, 250 ) ;
    }
    else {
      tint(255, fadeStronger ); // Apply transparency without changing color
      // show new image
      image ( images [ legsToDisplay [i]  ], i * 250, 250 ) ;
    }
  }
  // fading manager
  if (currentFadingIs != noneFade) {
    fadeStronger += fadeSpeed;
    fadeWeaker   -= fadeSpeed;
    if (fadeStronger>255) {
      fadeStronger=0;
      currentFadingIs = noneFade ;
    } // if
    if (fadeWeaker < 0) {
      fadeWeaker  = 255;
      currentFadingIs = noneFade ;
    } // if
  } // if
  //
} // func
//
void mousePressed() {
  // is x-direction, i2 is y-direction in our grid
  for (int i=0; i < 4; i++) {
    for (int i2=0; i2 < 2; i2++) {
      if (mouseX>i*250 && mouseX < (i+1)*250 && mouseY>i2*250 && mouseY < (i2+1) *250) {
        if (i2==0) {
          oldImage  = images [ headsToDisplay [i] ] ; // save old
          oldImageX = i*250;
          oldImageY = i2*250;
          fadeStronger = 0;    // init fading
          fadeWeaker   = 255;
          currentFadingIs = headsFade; 
          currentFadingIsNumber = i;
          // headsToDisplay [i] = int ( random (0, images.length) ) ;  // new image
          int newIndex= int ( random (allowed[i2][i][lengthRequired-1]) );
          headsToDisplay [i] = allowed[i2][i] [ newIndex ] ;  // new image  
          //
          return;
        }
        else if (i2==1) {
          oldImage =  images [ legsToDisplay [i] ] ;
          oldImageX = i*250;
          oldImageY = i2*250;
          fadeStronger = 0;
          fadeWeaker   = 255;
          currentFadingIs = legsFade;
          currentFadingIsNumber = i;
          // legsToDisplay [i] = int ( random (0, images.length) ) ;
          int newIndex= int ( random (allowed[i2][i][lengthRequired-1]) );
          legsToDisplay [i] = allowed[i2][i] [ newIndex ] ;  // new image  
          return;
        }
      } // if
    } // for
  } // for
} // func
//
int [] insertArray (int [] toAdd ) {
  int [] Buffer = new int [lengthRequired];
  for (int i  = 0 ; i < toAdd.length; i++) {
    Buffer [ i ] = toAdd[i];
  } // for
  // save the allowed max for this
  Buffer[lengthRequired-1]=toAdd.length;
  println (Buffer);
  println ("------------------");
  return Buffer;
} // int
//
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

5 months ago


you have to enter all allowed numbers here for heads and for legs (all images have to be written down with their index in the array images[] )

maybe you have to increase this

Copy code
  1. final int lengthRequired = 10;

Please note that for 1.jpg
Copy code
  1.   images [0] = loadImage( "1.jpg");
you have to enter 0 of course (not 1)

you have to enter all allowed numbers here for heads and for legs:

Copy code
  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. ;//





paminator
paminator

Re: Creating a simple, interactive shuffle gallery

5 months ago
All the images are like glitching out. Theyre all so zoomed in that I cant tell which image is what lol. Only happens when I change the these attributes from 10 to whatever. So make   images [0] = loadImage( "1.jpg"); 
 images [0] = loadImage( "0.jpg;?

These are the things I changed

PImage[] images = new PImage[35];
final int lengthRequired = 35;
  images [0] = loadImage( "1.jpg");
  images [1] = loadImage( "2.jpg");
  images [2] = loadImage( "3.jpg");
  images [3] = loadImage( "4.jpg");
  images [4] = loadImage( "5.jpg");
  images [5] = loadImage( "6.jpg");
  images [6] = loadImage( "7.jpg");
  images [7] = loadImage( "8.jpg");
  images [8] = loadImage( "9.jpg");
  images [9] = loadImage( "1.jpg");
  images [10] = loadImage( "10.jpg");
  images [11] = loadImage( "11.jpg");
  images [12] = loadImage( "12.jpg");
  images [13] = loadImage( "13.jpg");
  images [14] = loadImage( "14.jpg");
  images [15] = loadImage( "15.jpg");
  images [16] = loadImage( "16.jpg");
  images [17] = loadImage( "17.jpg");
  images [18] = loadImage( "18.jpg");
  images [19] = loadImage( "19.jpg");
  images [20] = loadImage( "20.jpg");
  images [21] = loadImage( "21.jpg");
  images [22] = loadImage( "22.jpg");
  images [23] = loadImage( "23.jpg");
  images [24] = loadImage( "24.jpg");
  images [25] = loadImage( "25.jpg");
  images [26] = loadImage( "26.jpg");
  images [27] = loadImage( "27.jpg");
  images [28] = loadImage( "28.jpg");
  images [29] = loadImage( "29.jpg");
  images [30] = loadImage( "30.jpg");
  images [31] = loadImage( "31.jpg");
  images [32] = loadImage( "32.jpg");
  images [33] = loadImage( "33.jpg");
  images [34] = loadImage( "34.jpg");
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

5 months ago

that looks ok, apart from loading image 1 twice (slot 9 as well).
You could also do this in a for-loop (3 lines) but never mind.

the important part is my last post: the list of allowed images.
You need to fill all images there in. It's marked bold in my last post.
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

5 months ago

you tell each tile individually what it is allowed to show.

The problem I see that it can happen that he loads the same image again. So he's fading from image 7 to image 7 which looks bad. You can check this of course.

This is especially important when you have only two allowed because then it occurs more often than with 12 or so images allowed.



paminator
paminator

Re: Creating a simple, interactive shuffle gallery

5 months ago
I fixed it!  . This is what I was missing:

 int count = 0; // index
  for (int i=0; i < 34; i++) {
    //heads [count].resize(250, 250);
    images [count].resize(250, 250);
    count++;

Just had to change that from 10 to 34. 

I want to create a rollover effect either using a shape or a 250x250 png image of a square I made that fades in (and/or) fades out from 255 - 0. Where would I implement that into the code?
 
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

5 months ago

Hello!

wait wait...

we got a fade effect between two images if you click an image...

now you want a fading when the mouse hovers over a tile?

A fading between the former image and plain blue? 

Why?

In draw() want to call a function checkMouseHover()

The function looks like this

Copy code
  1. void checkMouseHover() {

  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. }

  11. }


the fading itself must be in draw()
you use fill with 4 parameters to increase the opacity

Cheers!   


paminator
paminator

Re: Creating a simple, interactive shuffle gallery

5 months ago
I just wanted some kind of indication when someone hovers on one of the tiles. Couldnt think of anything else 
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

5 months ago




ok, but why not have a simple not fading thin frame around the tile that the mouse hovers over?

call
Copy code
  1. checkMouseHover();
at the very end of draw()


The function looks like this
[EDITED]
Copy code
  1. void checkMouseHover() {

  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. }

  14. }

you might want to use strokeWeight for a line more thick

paminator
paminator

Re: Creating a simple, interactive shuffle gallery

5 months ago
Nvm...fixed it. thanks for all your help
Chrisir
Chrisir

Re: Creating a simple, interactive shuffle gallery

5 months ago


You did it!

Congratulations!



Top Reply

Statistics

  • 39 Replies
  • 2994  Views
  • 1 Followers

Actions

Related Posts