Hey all,

I m busy with a school project and i m stuck with something.
I am busy making a maze and with "WASD" you can move around. Normally when I m clicking, the loaded image should be moving(moving person)
The only problem is that when i m pressing one of these buttons that the image repeats and leaves a big stripe behind it. But I dont want that because the image should be moving in place of repeating.

My code:
Code:

PImage img;
PImage persoon;
int numPixels; // definieer numPixels als int
color trackColor;
int value = 0;
int x = 10;
int y = 10;
int b;
int c;

void setup(){
  img = loadImage("doolhof.bmp");
  persoon = loadImage("persoon.gif");
  size(img.width,img.height);
  trackColor = color(255,0,0);
  img.updatePixels(); // vernieuw pixels
  image(img, 0, 0); // laat afbeelding zien
  image(persoon,x,y);
  frameRate(50);
}

void draw() {
  //omlaag
  if(keyPressed) {
    if (key == 's' || key == 'S') {
      persoon = loadImage("persoon.gif");
      b = y - 30;
      y = y + 1;
      if(img.pixels[x + y * img.width] == trackColor){
        y = y - 1;
      } 
    }
  }

  //omhoog
  if(keyPressed) {
    if (key == 'w' || key == 'W') {
      persoon = loadImage("omhoog.gif");
      b = y + 30;
      y = y - 1;
      if(img.pixels[x + y * img.width] == trackColor){
        y = y + 1;
      } 
    }
  }

  //links
  if(keyPressed) {
    if (key == 'a' || key == 'A') {
      persoon = loadImage("links.gif");
      c = x + 30;
      x = x - 1;
      if(img.pixels[x + y * img.width] == trackColor){
        x = x - 10;
      } 
    }
  }

  //rechts
  if(keyPressed) {
    if (key == 'd' || key == 'D') {
      persoon = loadImage("rechts.gif");
      c = x - 30;
      x = x + 1;
      if(img.pixels[x + y * img.width] == trackColor){
        x = x + 10; 
      } 
    }
    image(persoon,x,y);
  }
}
 

Need to make 5 dummy posts to post an image :/

dummy3

dummy5

You made two mistakes made by most newcomers to Processing:
- Avoid to do loadImage() in draw(), just load the images you need in setup(). It is faster as it will do less disk accesses (even if system put the files in cache...).
- More related to your issue, you just forgot to call background() at the start of draw().
Or, rather in your case, you must call image() with the maze image instead, to restore its pristine state and draw a clean image of character over it.
Of course, all images must be declared before setup().

Additional note: ideally, size() call should have only constant values (and be first instruction of setup()).