two image layers

Glitsch

Hello there, the following code loads pictures (background-pictures) to the display. with the mouseDragged function i want another picture to be displayed over the background-picture. this works well but the movable picture leaves a track when being moved because the background-picture is not refreshed. the question is: how do i refresh the backgorund so that the movable picture is just visible on its actual position? thanks a lot!

void keyPressed()
{
if(key == CODED)      
  {
    if(keyCode == RIGHT)  //show next picture 
    {  
    if(index <= 90)
      {  
       index++;  
      }   
    }
    if(keyCode == LEFT)  //show previous picture
    { 
     if(index >= 1)
      {     
      index--;      
      }     
    }    
  }
   image(meinBilderArray[index], 0, 0); 
   fill(50,50,0,80);
   rect(100, 880, index*10 , 20);
}


void mouseDragged()
{
 image(lineal, mouseX, mouseY-400);  //show a second picture 
}                                    //that can be moved over the first one. 
                                     //but because this picture is on top, 
                                     //it always leaves a track that covers 
                                     //the background-picture

_vk

call the base image from draw() (first thing) not from keyPresssed(). (line20)

Glitsch

Thanks! It´s getting better. I want the second picture to be visible all the time, but not leaving a track on the background. Now it does not leave a track anymore, but it´s not visible while the mouse is not moved. For better understanding: Second picture is a ruler and you can place it wherever you want on the background-picture. When you have finally placed it, it shall not disappear.

_vk

You have than to conditionally draw (in draw()) the selected images. Things drawn in callback functions (like mouseDragged()) got erased by things drawn in draw().

Glitsch

It works! Thank you so much!:-) i don´t know why i didn´t try to draw things in draw...