Variable/Logic Help: Slot Machine Project - Recognize 3 matching images?

mnoble · September 2, 2018, 6:08pm

Hello Processing Forum,

I am working on a project that is similar to a slot-machine. I am running 3 rows of images (animated gifs and I am stumped on whether I can construct a line of code in my current code logic that recognizes when all 3 columns have loaded the same matching gif when I press the space bar. Here is a simple version of my code to show you. (My actual project has sounds and many more gifs - it is busting at the seams in memory use but working!)

I am hoping I can solve this issue simply using a fairly similar structure. I am exhibiting this project as part of an installation in a week. Thank you for your help in dissecting this logic.

import gifAnimation.*;

//button switch variable
boolean toggle = true;


//image variables
PImage[] thumbs = new PImage[3];
float x; 
float y1;
float y2;
float y3;
float thumbSpacing;
float thumbStripLength;
float thumbSpeed1;
float thumbSpeed2;
float thumbSpeed3;
 

 
 
void setup() { 
  size(900,300 ,P2D);
  
//load array of images
     Gif loop0 = new Gif(this, "1.gif");
      loop0.loop();

      Gif loop1 = new Gif(this, "2.gif");
      loop1.loop();

      Gif loop2 = new Gif(this, "3.gif");
      loop2.loop(); 

  
   
      thumbs[0] = loop0;
      thumbs[1] = loop1;
      thumbs[2] = loop2;

  y1=0;
  x=0;
  thumbSpacing = 300;
  thumbStripLength = thumbSpacing*thumbs.length;
}

 
void draw() { 
background(0);
smooth();


//spin 3 arrays at various speeds
if (toggle == true) {
  
  //speeds of 3 spinning decks
  thumbSpeed1 =  25;
  thumbSpeed2 = 30;
  thumbSpeed3 =  335;
  
  y1 = y1 + thumbSpeed1;
    y2 = y2 + thumbSpeed2;
      y3 = y3 + thumbSpeed3;

} else {  
    
    //3 closest images stop in space when key presses
    thumbSpeed1 = 0;
        y1 = (int)(y1/thumbSpacing) * thumbSpacing;
        y2 = (int)(y2/thumbSpacing) * thumbSpacing;
        y3 = (int)(y3/thumbSpacing) * thumbSpacing;

//COULD I PUT A CONDITIONAL HERE TO LOAD A RED TRANSPARENCY RECT
//WHENEVER THE SAME 3 GIFS LOAD AFTER SPACE BAR IS PRESSED??? 
//I AM STRUGGLING ON HOW TO SEE THIS SOLUTION :) 

//if (         ){
//  fill (255,0,0,100);
//  rect (0,0,900,300);
//}


} //<-- closes else  
 

//array of images call
  for (int i =  0; i < thumbs.length ; i++) { 
  image(thumbs[i], x , - (y1 + i * thumbSpacing) % thumbStripLength + height ); 
  image(thumbs[i], x+300 , - (y2 + i * thumbSpacing) % thumbStripLength + height );
  image(thumbs[i], x+600 , - (y3 + i * thumbSpacing) % thumbStripLength + height);
  }
   
   
 
 } // <-- closes draw 

void keyPressed () {
toggle = !toggle;
}

EnhancedLoop7 · September 2, 2018, 8:27pm

That sounds like a cool project!

What I would do, is make all of your animations, or images, into an array of objects. Something like:

SlotMachinePictures pictures = new SlotMachinePictures[however many];

That will allow for you to create as many as you need and stuff like that! I mean, really I’d say anything doing with games would be great using OOP. Now, the main reason why I would tell you to make an object, is so that you can encapsulate all of your variables into each object:

class SlotMachinePictures 
{
  
   public SlotMachinePictures()
  { 
    // default constructor 
   } 

    public SlotMachinePictures(put everything in here )
     { 
     // have simple setters here 
     } 


} //end of example class

And then? Most importantly, you can make a “tag” variable. Each animation will have a tag. You can keep track of making certain numbers equal certain images, like “0 means this picture, and 1 means that picture and so on”. You can set the tags for each animation object as you create it.

Then? You can make a function within your class that will compare the tags every time your slot machine is done spinning. Once it is done doing its thing, and the three images are lined up, then you can pass in those three objects’ tags into a function, and compare them. Something like:

boolean match = false; 

void compareImages(int x, int y, int z) 
 {
  if(x == y && y == z) 
    match = true; 
 }

Or something that fits your liking. And of course, you can add in the space bar key checking part as well.

If you would like more specific help, or more guidance, I would be glad to offer all that I can. You mentioned that you wanted variable and logic help, so in terms of that, this is my answer for now. Variable wise, I would add a tag variable to each animation object you create, and logic wise, I would just have a function checking if the three current tags are equal.

Hope this helps!

EnhancedLoop7

mnoble · September 2, 2018, 9:30pm

Hello EnhancedLoop7,

Thank you for providing a detailed answer to my posted question!!! And, your offer of help!

So, I am a bit out of my league here

I was hoping for a magical conditional that would work in my current program. Theoretically, I understand what you suggest as I have watched OOP tutorial videos several times. In practice, I really struggle with OOP - it hurts

First question, can I make a tag variable and function comparison without OOP?

If no, then could you help me break down my first few steps in moving towards your advice using OOP. I am not a natural at programming and so many details aren’t intuitive for me.

EnhancedLoop7 · September 2, 2018, 9:38pm

@mnoble, you CAN, but I really would not recommend it, because it’s not as compact as an object. I mean, I can walk you through making this with OOP if you would like? If you really wanted to do it without OOP, you could have something like:

PImage thumbs = new PImage[3]; 
int[] tags = new int [3];

And just kind of keep track of the same image with the same tag in the same index in both arrays… but that would be so much, and really not flexible if you want to add more. Like I said, I have no problem leading you through it if you would like. I will actually convert the code you gave in your original question to OOP as like a little tutorial.

EnhancedLoop7

mnoble · September 2, 2018, 9:56pm

Hi @EnhancedLoop7,

Awesome! I am willing to give the OOP a whirl with your guidance and it is much a appreciated!!!

If you made an OOP example out of the simpler version of my project here, I know I would have a better chance at cracking the solution. I have more changes in my original project but this simple version is great place to start.

Thank you!!!

GoToLoop · September 2, 2018, 11:25pm

EnhancedLoop7 · September 3, 2018, 1:22am

So I’ve been writing up the code. But I was thinking, that instead of writing on the example code you gave, I can do it with the your actual code that you are using. If you could also send the gifs you are using, I could take a look with it. What do you think?

EnhancedLoop7

mnoble · September 3, 2018, 3:21am

Enhanced Loop! You are a very kind soul - sending now!

GoToLoop · September 3, 2018, 4:25am

@mnoble, if you’re interested, more about OOP below. This time, straight from Oracle’s Java mouth:
Docs.Oracle.com/javase/tutorial/java/concepts/index.html

mnoble · September 3, 2018, 4:39pm

@GoToLoop - thanks for this link and the other two. I will work things and report back on this thread.

mnoble · September 3, 2018, 5:17pm

Here’s the less flexible solution for the purpose of this thread:

import gifAnimation.*;

//button switch variable
boolean toggle = true;


//image variables
PImage[] thumbs = new PImage[3];
float x; 
float y1;
float y2;
float y3;
float thumbSpacing;
float thumbStripLength;
float thumbSpeed1;
float thumbSpeed2;
float thumbSpeed3;
 

 
 
void setup() { 
  size(900,300 ,P2D);
  
//load array of images
     Gif loop0 = new Gif(this, "1.gif");
      loop0.loop();

      Gif loop1 = new Gif(this, "2.gif");
      loop1.loop();

      Gif loop2 = new Gif(this, "3.gif");
      loop2.loop(); 

  
   
      thumbs[0] = loop0;
      thumbs[1] = loop1;
      thumbs[2] = loop2;

  y1=0;
  x=0;
  thumbSpacing = 300;
  thumbStripLength = thumbSpacing*thumbs.length;

  


}
 
void draw() { 
background(0);
smooth();



//spin 3 arrays at various speeds
if (toggle == true) {
  
  //speeds of 3 spinning decks
  thumbSpeed1 =  25;
  thumbSpeed2 = 30;
  thumbSpeed3 =  335;
  
  y1 = y1 + thumbSpeed1;
    y2 = y2 + thumbSpeed2;
      y3 = y3 + thumbSpeed3;

} else {  
    
    //3 closest images stop in space when key presses
    thumbSpeed1 = 0;
        y1 = (int)(y1/thumbSpacing) * thumbSpacing;
        y2 = (int)(y2/thumbSpacing) * thumbSpacing;
        y3 = (int)(y3/thumbSpacing) * thumbSpacing;
        
   // the if check is being done after image display loop, look ahead for it

} //<-- closes else  
 

//array of images call
  for (int i =  0; i < thumbs.length ; i++) { 
  image(thumbs[i], x , - (y1 + i * thumbSpacing) % thumbStripLength + height ); 
  image(thumbs[i], x+300 , - (y2 + i * thumbSpacing) % thumbStripLength + height );
  image(thumbs[i], x+600 , - (y3 + i * thumbSpacing) % thumbStripLength + height);
  }
  
  if (toggle == false) {
  
  PImage img1 = get(0,0,width/3,height);
  PImage img2 = get(width/3,0,(width/3)*2,height);
  PImage img3 = get((width/3)*2,0,width,height);
  boolean same=true;
  for(int r = 0; r < height; r++)
  {
    for(int c = 0; c < width/3; c++)
    {
      int i1val = img1.get(r,c); 
      if( i1val != img2.get(r,c) || i1val != img3.get(r,c) )
      {
      same=false;
      r=height;
      c=width/3;
      break;
      }
    }
  }
  
   if(same)
   {
    fill (0,100);
    noStroke();
    rect (0,100,900,100);
   }
  
  }
  
   
 
 } // <-- closes draw 

void keyPressed () {
toggle = !toggle;
}

Topic		Replies	Views
Implementing a Processing app inside another one Coding Questions	23	148	August 19, 2024
Processing memory card game Coding Questions homework	11	2953	January 5, 2019
Making multiple of same image Coding Questions	2	630	October 14, 2018
Need help making my code display random set of images Coding Questions	7	287	September 20, 2021
Processing image not showing Coding Questions	9	1686	September 19, 2019

Variable/Logic Help: Slot Machine Project - Recognize 3 matching images?

Related topics