We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpPrograms › Array of Images into correct array order of boxes
Page Index Toggle Pages: 1
Array of Images into correct array order of boxes (Read 1798 times)
Array of Images into correct array order of boxes
Nov 10th, 2009, 10:05am
 
We have a word game which clicks and drags word images across the screen into certain boxes and then locks into place.

Code:

Sprite[] sprites;      

Box[] boxes;

int bx=500;
int by=600;

int s_size=150;
boolean spritesDragging;

int boxX=630;
int boxY=100;

PImage b;
PImage CorrectImg;





void setup()
{
 size(798, 760);
 
 b = loadImage("EiffelTower.jpg");
 CorrectImg = loadImage("Correct.jpg");
   
 boxes= new Box[7];
 
 sprites = new Sprite[7];
 
 
 for(int i = 0; i < sprites.length; i++)
 {
   sprites[i] = new Sprite(loadImage(i + ".png"),s_size,random(bx), random(by), i);
   
 }
 
 for(int i =0; i< boxes.length; i++)
 {
   boxY+=80;
   boxes[i] = new Box(boxX, boxY, 25, 130);
 }
}







void draw()
{
   
   
   background(b);
   boolean bDragging = false;
   
   //rectangle x, y, w , h
   //rect(boxX, boxY, 140, 30);
   
   
     for (int i=0; i <boxes.length; i++)
     {
       boxes[i].Draw();
     }
   
   for (int i = 0; i < sprites.length; i++)
   {
               
// Check if the user tries to drag it
sprites[i].Update(spritesDragging);



if (sprites[i].IsDragged())
{
// We will remember a dragging is being done
bDragging = true;
// And move it to mouse position
sprites[i].Move();
}
// In all case, we redraw the sprite


               sprites[i].Draw();
               

   }
    spritesDragging = bDragging;
   
}




class Sprite
{
 
 
 float x;
 float y;
 PImage img;
 float SpriteSize;
 int i;
 private boolean m_bIsHovered, m_bDragged;
 private float m_clickDX, m_clickDY;
 
 
 int boxID;
 

 Sprite(PImage img, int SpriteSize,float x,float y, int boxID)
 {
   
   
   this.x = x;
   this.y = y;
   this.img = img;
   this.boxID = boxID;
   this.SpriteSize=SpriteSize;
   
   
 }
 
 
 void Update(boolean bAlreadyDragging)
 {
   
   
     // Check if mouse is over the sprite
m_bIsHovered = mouseX > x && mouseX < x + SpriteSize && mouseY > y && mouseY < y + SpriteSize/10;


if (!bAlreadyDragging && mousePressed && mouseButton == LEFT && m_bIsHovered)
{
        // We record the state
m_bDragged = true;
       
m_clickDX = mouseX - x;
m_clickDY = mouseY - y;
}


     // If mouse isn't pressed
if (!mousePressed)
{
        // Any possible dragging is stopped
                 m_bDragged = false;  
                }
               
               
               //method for locking image in place
               for(int i =0; i< boxes.length; i++)
               {
                 
             //method for locking image in place
               if(x> boxes[i].x && x< (boxes[i].x+boxes[i].w-22) &&y <(boxes[i].y+boxes[i].h-20) && y >boxes[i].y)
               {
                 
                   m_bDragged = false;  
                   
                   if(i == boxID )
                   {
 
                     image(CorrectImg, 78, 590);
                     
                   }
                }
             }
 }    
       
 
 
 

boolean IsDragged()
{
return m_bDragged;
}



   void Move()
   {
if (m_bDragged)
{
x = mouseX - m_clickDX;
y = mouseY - m_clickDY;
}
   }
   
   
   void Draw()
   {
     image(img, x, y);
     
   }
   
 
 
}



class Box
{
 
 float x;
 float y;
 
 float h;
 float w;

 
 Box(float x,float y, float h, float w)
 {
   this.x = x;
   this.y = y;
   this.h= h;
   this.w= w;
 }
 
 boolean checkBox(float spriteX, float spriteY, Sprite theSprite)
 {
   return false;
   
 }
 

 
  void Draw()
   {
     rect(x,y, w, h);
     
   }
}



 


We have the code so that it locks images into place and returns true if one image is in the correct position. For example if image 1 is in box 1 then return 'correct' image and so forth.

Code:

for(int i =0; i< boxes.length; i++)
               {
                 
             //method for locking image in place
               if(x> boxes[i].x && x< (boxes[i].x+boxes[i].w-22) &&y <(boxes[i].y+boxes[i].h-20) && y >boxes[i].y)
               {
                 
                   m_bDragged = false;  
                   
                   if(i == boxID )
                   {
 
                     image(CorrectImg, 78, 590);
                     
                   }
                }
             }


How can we edit this code so that it returns true only if all images are in the correct position. We tried adding another loop but it was unsuccessful.

Any suggestions?
Re: Array of Images into correct array order of boxes
Reply #1 - Nov 10th, 2009, 10:44am
 
keep a global count of boxes that have been correctly placed. start it at 0 and increment it each time one is dropped (next to image(CorrectImg, 78, 590)Wink. when this count = total number of boxes you have finished.
Re: Array of Images into correct array order of boxes
Reply #2 - Nov 10th, 2009, 12:07pm
 
We tied it this way with int boxClick declared just before the setup method.
Code:

int boxClick=0;


void setup()
{
 size(798, 760);


Then rewrote the method this way
Code:

//method for locking image in place
               for(int i =0; i< boxes.length; i++)
               {
                 
             //method for locking image in place
               if(x> boxes[i].x && x< (boxes[i].x+boxes[i].w-22) &&y <(boxes[i].y+boxes[i].h-20) && y >boxes[i].y)
               {
                 
                   m_bDragged = false;  
                   
                   boxClick++;
                   if(boxClick == boxes.length)
                   {
                   
                   if(i == boxID )
                   {
           
                     image(CorrectImg, 78, 590);
                     
                   }
                 
                }
             }
           }


Now it doesn't display the correct message even if they are in the right order.
Re: Array of Images into correct array order of boxes
Reply #3 - Nov 10th, 2009, 1:36pm
 
Maybe you should follow the advice given on Geting started:

"Don't start by trying to build a cathedral"

You need to be able to apply some very basic logic to make this work: remember that the outer condition is tested first.  If it is false nothing inside is run.

Look at your two conditions and think about what's going to happen when it gets to:

Code:
if(boxClick == boxes.length) 


At the beginning of the game this is obviously going to be false, meaning nothing inside is run, meaning that:

Code:
if(i == boxID ) 


...won't be run... Meaning that CorrectImg won't be shown.

Also if you want to be able to test if all have been placed correctly you should obviously only add to boxClick if a Sprite has been placed in the correct box - i.e. inside the 'if(i == boxID)' condition.
Re: Array of Images into correct array order of boxes
Reply #4 - Nov 11th, 2009, 6:51am
 
Would the boxClick++ need to be a seperate method before calling the 'correct' image?

Something similar along these line...

Code:

//method for locking image in place
               for(int i =0; i< boxes.length; i++)
               {
                 
             //method for locking image in place
               if(x> boxes[i].x && x< (boxes[i].x+boxes[i].w-22) &&y <(boxes[i].y+boxes[i].h-20) && y >boxes[i].y)
               {
                 
                   m_bDragged = false;  
                   
                   boxClick++;
               
             
               }
                   
               
               }
                if(i == boxID )
                    {
                       if(boxClick == boxes.length)
                       {
                   
                     image(CorrectImg, 78, 590);
                     
                       }
                 
                    }
                 }

Re: Array of Images into correct array order of boxes
Reply #5 - Nov 11th, 2009, 7:38am
 
You've got one closing brace too many in there (hint - you close the for loop too soon).

Otherwise it's making a little more sense except that you should obviously only check if i==boxID if the Sprite has been placed on a box; which isn't what will happen at the moment.

Also it will show CorrectImg regardless of whether the Sprites have all been placed correctly since you add to boxClick when a Sprite is placed on a box; not when it is placed on a correct box.

As I suggested before, you seem to be in way over your head here: you're not dealing with particularly complex logic and if you don't get it you'd do better to figure it out in small separate programmes rather than trying to get it working in a large potentially complex application.

You would also do well to read up on some terminology.  Since you have declared your own Classes I had assumed you would understand what a 'method' is and also understand some other OOP related terminology; so had phrased earlier responses assuming some basic knowledge, but it's clear that you don't have this knowledge and should perhaps not be setting your sights quite so high just yet...
Re: Array of Images into correct array order of boxes
Reply #6 - Nov 11th, 2009, 8:24am
 
How about this?

Code:

//method for locking image in place
               for(int i =0; i< boxes.length; i++)
               {
                 
             //method for locking image in place
               if(x> boxes[i].x && x< (boxes[i].x+boxes[i].w-22) &&y <(boxes[i].y+boxes[i].h-20) && y >boxes[i].y)
               {
                 
                   m_bDragged = false;  
                  if(i == boxID )
                  {
                   boxClick++;
                   if(boxClick == boxes.length)
                   {
                   
                     image(CorrectImg, 78, 590);
                     
                     }
                   
                  }
                   
                 
                  }
             
               }
Re: Array of Images into correct array order of boxes
Reply #7 - Nov 11th, 2009, 8:48am
 
Well... what happens when you put that into your sketch?
Re: Array of Images into correct array order of boxes
Reply #8 - Nov 11th, 2009, 9:00am
 
When one sprite image is placed into the the correct box, then the 'correct' image flashes once for a second.
Re: Array of Images into correct array order of boxes
Reply #9 - Nov 11th, 2009, 10:52am
 
OK...  the logic in the conditions you posted is now fine, but you have an additional problem: Once your Sprite is locked in position it is inside the box i.e.:

if(x> boxes[i].x && x< (boxes[i].x+boxes[i].w-22) &&y <(boxes[i].y+boxes[i].h-20) && y >boxes[i].y) == true

That means that the "if(i==boxID)" condition inside this will return true each frame, meaning boxClick will be increased by one each frame.  So within a few frames "boxClick == boxes.length" will be true and the CorrectImg will be displayed for that one frame.  The next frame boxClick = boxes.length + 1 so the image will no longer be displayed...

Basically if a Sprite has been locked in place you shouldn't add anything to boxClick.  That means adding to the conditions and if need be a suitable property to store the locked state...
Re: Array of Images into correct array order of boxes
Reply #10 - Nov 12th, 2009, 3:59am
 
"OK...  the logic in the conditions you posted is now fine, but you have an additional problem: Once your Sprite is locked in position it is inside the box i.e.:

if(x> boxes[i].x && x< (boxes[i].x+boxes[i].w-22) &&y <(boxes[i].y+boxes[i].h-20) && y >boxes[i].y) == true

That means that the "if(i==boxID)" condition inside this will return true each frame, meaning boxClick will be increased by one each frame."


That's really the whole idea. We trying to create it so that when the sprite is locked into place into the correct box, "if(i==boxID)" it returns true or 'correct image' in our case.

So then if an image is correct the BoxClick increases by one. If it reaches the same number of boxes, ie seven correct boxes, then return true.
Re: Array of Images into correct array order of boxes
Reply #11 - Nov 12th, 2009, 8:38am
 
It seems you're still failing to grasp the concept.  See comments here:

Quote:
// for each Sprite you check all boxes
for(int i =0; i< boxes.length; i++) {
     // Each frame you check if the Sprite is over a box
     if(x> boxes[i].x && x< (boxes[i].x+boxes[i].w-22) &&y <(boxes[i].y+boxes[i].h-20) && y >boxes[i].y) {
           
               // if it's over a box you set this to false
           m_bDragged = false;  

             // then check if the box matches the Sprite's boxID
               // i.e. that it is placed in the correct box

           if(i == boxID ){
                 // if it is you increase boxClick by 1
// This happens every frame from the moment the Sprite is placed over the box.  Consider that you're probably running at the default of 60fps and try and understand what happens to the value of the boxClick variable.

                 boxClick++;
//If you're not sure println it:
println(boxCLick);
                 
/* If you only wanted to show an image when all Sprites have been placed correctly this would be the right construction; but only if you resolve the problem with boxClick increasing every single frame the moment a single Sprite is placed correctly.

Otherwise you'd need to show two different images: one to show a Sprite had been placed correctly, before this condition (which you'd probably want to hide again after a certain duration), and then a different image once/if all Sprites are placed correctly, inside this condition */

                 if(boxClick == boxes.length) {
                       image(CorrectImg, 78, 590);
                 }
           }
     }
}


If you don't understand that then I can only recommend you give up on this project for the moment and start with something much more simple.  Better still invest in some decent reference material - there are plenty of recommended books on the homepage.
Re: Array of Images into correct array order of boxes
Reply #12 - Nov 13th, 2009, 10:35am
 
"/* If you only wanted to show an image when all Sprites have been placed correctly this would be the right construction; but only if you resolve the problem with boxClick increasing every single frame the moment a single Sprite is placed correctly. "

Alright then how does one actually go about solving the problem of it increasing in every single frame?
Re: Array of Images into correct array order of boxes
Reply #13 - Nov 13th, 2009, 11:41am
 
Sorry wrote that in a bit of a hurry before I went out last night.

It should have read more like:

In the highly unlikely event that PhiloHo's solution doesn't work then do as I already suggested: add a suitable property to your Sprite class.  When the Sprite has been dragged over a box set this property to true.  In your conditions only add to boxClick if it is false...
Page Index Toggle Pages: 1