Processing — moving image leaving trail

Question

I'm working on trying to make an image move in processing, but the image is leaving a trail. The important part which is tripping me up is that I cannot declare the background in draw(), because I have other functions which place images. Here is the relevant code:

    void setup()
{
  size(752,500);
  background = loadImage("prairie.jpg");
  background(background);
  noStroke();

  animal = loadImage("squirrel.png");
  bird = loadImage("bird.gif");
  rock = loadImage("rock.png");
  cloud = loadImage("cloud.png");
  jeep = loadImage("jeep.png");
  flower = loadImage("flower.png");
}

  float jeepX = 752;
  float jeepY = 250;
  float size = 100;

void draw()
{
  image(jeep,150,350,125,125);

  image(jeep,jeepX,jeepY,size,size);

  jeepX--;
  jeepY = jeepY + .25;
  size += .25;
  image(jeep,jeepX + 1,jeepY - .25, size -.25, size - .25, 0,0,0,0);


  if(jeepY > height)
  {
    jeepX = 752;
    jeepY = 250;
    size = 100;
  }
        }

This is for lab and the TA didn't know how, and I didn't have a chance to ask the professor yet.

If no one knows the answer and/or it has something to do with other functions (which place images), i'll post the relevant code.

Answer 1

For moving objects not to leave a trail, you must first clear the frame before redrawing the picture.(don't forget to reset the background if you don't have one)

As it is, it draws one jeep, then another on top of it.

Answer 2

If you don't want the trail, you got clear the background. If not completely, at least part of it, or redraw every image not supposed to move every frame. Like this:

Sample Code

PImage bg, still, moving;

void setup() {
  while ( bg == null) {// got wait as size depends on this...
    println("loading bg image...");
    bg = loadImage("http://dc489.4shared.com/img/f9EaWk5w/s3/13757197c08/Black_Background_Metal_Hole_-_.jpg");
  }
  size(bg.width, bg.height);
  still = loadImage("http://www.renderosity.com/mod/bcs/photos/Thumb85619.jpg");
  moving = loadImage("https://cdn1.iconfinder.com/data/icons/humano2/128x128/apps/alienblaster.png");



}

void draw() {

  background(bg);
  image(still, 100, 100);
  image(moving, 200,  frameCount%height);

}

Answer 3

You need to redraw your background in the 'draw' method. To do this, simply add the following line of code to your 'draw' method:

background(red,green,blue);

You can use the Colour Selector in Processing (found under Tools) to find the correct rgb code for the colour you want.

The reason for this is that the draw method is run 60 times a second, whereas the 'setup' method is only run once when the program is executed. As such, when you move the image, if the background colour is not in the 'draw' method, then it will not be redrawn when the image is moved, thus leaving a trail.