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 › Image flashing
Page Index Toggle Pages: 1
Image flashing (Read 595 times)
Image flashing
Dec 2nd, 2009, 7:41am
 
We have a piece of code which displays a small image when an image is in place. The problem is it only flashes once.

Code:

void move(int xc, int yc)
 {
   x += xc;
   wx += xc;
   y += yc;
   hy += yc;
   
 
    for(int i =0; i< boxes.length; i++)
     {
       if(dragged && x> boxes[i].x && x< (boxes[i].x+boxes[i].w) &&y <(boxes[i].y+boxes[i].h) && y >boxes[i].y)
       {
         dragged = false;
         
         if((!dragged) &&(i == boxID))
         {                  
IncreaseBoxClick(i);

 }

       }

     }
 }
     


 
 int IncreaseBoxClick(int j)
 {        
    CorrectY =(150+(j*60));
    println(CorrectY);
    DrawRightImage(CorrectY);
    return j;    
             
 }
 

   
   int DrawRightImage(int CorrectY)
   {
     image(RightImage, 720, CorrectY);
     return CorrectY;
   }
 }




The whole code:
Code:

ArrayList buttons = new ArrayList();
PFont buttonFont;
String[] words = { "The", "Quick", "Red", "Fox", "Jumped", "Over", "The", "Lazy", "Brown", "Dog"};


//boxes array
Box[] boxes;

int boxX=750;
int boxY=100;

int colourIndex=255;

PImage RightImage;

void setup()
{
 size(1024, 768);
 smooth();
 buttonFont = createFont("FFScala", 12);
 int yPos = 100;
 int xPos = 20;
 int wordIndex = 0;
 
 //for(int xPos = 20; xPos < width - 20; xPos += 100)
 for(int i=0; i< words.length; i++)
 {
   yPos+=20;
   buttons.add(new Button(xPos, yPos, xPos + 90, yPos + 20, words[wordIndex++],i));
 }
  //boxes array
   boxes= new Box[words.length];
   
   RightImage=loadImage("right.gif");
   
   
   for(int i =0; i< boxes.length; i++)
   {
   boxY+=60;
   boxes[i] = new Box(boxX, boxY, 22, 90);
   }

}


void draw()
{
 background(255);
 
 for (int i=0; i <boxes.length; i++)
 {
       boxes[i].Draw();
  }
     
     
 for(int i = 0; i < buttons.size(); i++)
 {
   Button b = (Button)buttons.get(i);
   b.draw();
 }
 
 
}

void mousePressed()
{
 for(int i = 0; i < buttons.size(); i++)
 {
   Button b = (Button)buttons.get(i);
   if(b.detect(mouseX, mouseY) == true)
   {
     b.dragged = true;
     return;
   }
 }
}

void mouseDragged()
{
 for(int i = 0; i < buttons.size(); i++)
 {
   Button b = (Button)buttons.get(i);
   if(b.dragged == true)
   {
     b.move(mouseX - pmouseX, mouseY - pmouseY);
     return;
   }
 }
}

void mouseReleased()
{
 for(int i = 0; i < buttons.size(); i++)
 {
   Button b = (Button)buttons.get(i);
   b.dragged = false;
 }
}







class Button
{
 int x, y;
 int wx, hy;
 boolean dragged = false;
 String textButton;
 
 int CorrectY;
 
 int colourChange=150;

 int boxID;

 public Button(int x, int y, int wx, int hy, String textButton, int boxID)
 {
   this.x = x;
   this.y = y;
   this.wx = wx;
   this.hy = hy;
   this.textButton = textButton;
   this.boxID=boxID;
 }

 void draw()
 {
   textFont(buttonFont);
   //textAlign(CENTER);
   pushMatrix();
   
   for(int i =0; i< boxes.length; i++)
   {
     if(dragged)
     {
       fill(255);
       stroke(255, 0, 0, 200);
     }
     else
     {
       fill(200);
      stroke(0, 0, 255, 200);
     }
     
     
     
     }
     strokeWeight(3);

     beginShape();
       vertex(x, y);
       vertex(wx, y);
       vertex(wx, hy);
       vertex(x, hy);
     endShape(CLOSE);    
     fill(0, 0, 0);
     text(textButton, x + 20, y, wx, hy);
   popMatrix();
 
 }

 boolean detect(int mx, int my)
 {
   if(mx >= x && mx <= wx && my >= y && my <= hy)      
   
  return true;

   return false;
 }

 void move(int xc, int yc)
 {
   x += xc;
   wx += xc;
   y += yc;
   hy += yc;
   
 
    for(int i =0; i< boxes.length; i++)
     {
       if(dragged && x> boxes[i].x && x< (boxes[i].x+boxes[i].w) &&y <(boxes[i].y+boxes[i].h) && y >boxes[i].y)
       {
         dragged = false;
         
         if((!dragged) &&(i == boxID))
         {                  
IncreaseBoxClick(i);

 }

       }

     }
 }
     


 
 int IncreaseBoxClick(int j)
 {        
    CorrectY =(150+(j*60));
    println(CorrectY);
    DrawRightImage(CorrectY);
    return j;    
             
 }
 

   
   int DrawRightImage(int CorrectY)
   {
     image(RightImage, 720, CorrectY);
     return CorrectY;
   }
 }









class Box
{
 float x;
 float y;
 
 float h;
 float w;
 
 int i=255;
 
 int boxID;

 Box(float x,float y, float h, float w)
 {
   this.x = x;
   this.y = y;
   this.h= h;
   this.w= w;
 }
 
 boolean checkBox(float ButtonX, float ButtonY, Button theButton)
 {
   return false;  
 }

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

 }
   
}



Any suggestions on how to set the image so that it displays permanently when the correct image is in place?
Re: Image flashing
Reply #1 - Dec 2nd, 2009, 10:56am
 
The problem is here:

background(255);

The draw() runs repeatly and each time it clears screen with background(255). As a result your image gets erased everytime draw runs so it only appears between two draw() cycles. I would not put image() inside of a click button response. I will put correctPosition=true, a flag to indicate correct action is achieved in place of where you display image. Then in my draw, I put if (correctPosition==true) image(...). This way draw always draws the image every time it repeats.
Page Index Toggle Pages: 1