This square I'm animating is leaving a trail behind it, can anyone work out why?

Question

Thanks for checking out this Question. I think I've just about scratched through my skull in frustration. So what I've got is a 'JFrame' containing a 'JPanel'. The 'JPanel' contains a little colored Square which is supposed to move X pixels whenever I click the window.

Well, essentially everything behaves as it should, with one exception. When the blue square moves to the right, it leaves a trail of other squares behind it. It is not supposed to leave the trail, however, when I re-size the window, the trail vanishes.

Catalyst.java

package Prototype;

import java.awt.*;

public class Catalyst {

public static void main(String[] args){
    World theWorldInstance = new World("Prototype", 100,100, 600,100);  /*title,xpos,ypos,width,height*/
}

}

World.java

package Prototype;

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class World extends JFrame  {

Level mainPanel;    

public World(String title, int x, int y, int width, int height) {

    setTitle(title);
    setBounds(x,y,width,height);
    setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
    setBackground(new Color(0x00000000));
    initLevel();

}

public void initLevel(){
    mainPanel = new Level();
    Container visibleArea = getContentPane();
    visibleArea.add(mainPanel);
    setVisible(true);
    add(mainPanel);
}



}

Level.java

package Prototype;

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class Level extends JPanel implements MouseListener, ActionListener {
Square x;


public Level() {
    System.out.println("This is working correctly[JPANEL Cons]");
    addMouseListener(this);
    x = new Square();
}

public void paintComponent(Graphics g){
    x.draw(g);
}

public void actionPerformed(ActionEvent e){
}

public void mousePressed(MouseEvent e){
    requestFocus();
    x.move();
    repaint();
    System.out.println("Focus Acquired");


}

public void mouseClicked(MouseEvent e) {}
public void mouseReleased(MouseEvent e) {}
public void mouseExited(MouseEvent e) {}
public void mouseEntered(MouseEvent e) {}
}

Square.java

package Prototype;

import java.awt.*;

public class Square {

private Point position;
private int size;
private final int displacement;

public Square(){
    position = new Point(10,10);
    size = 20;
    displacement = 5;

}

public void draw(Graphics g){
    g.setColor(Color.blue);
    g.fillRect(position.x-(size/2), position.y-(size/2), size,size );
    g.setColor(Color.black);
    g.drawRect(position.x-(size/2), position.y-(size/2), size,size );

}

public void move() {
    position.x += displacement;
}
}

Those are all my files. I hope I've phrased everything properly and provided all the content required. Whenever I've done something similar in the past this has never happened. I assume I'm missing something small, or I've done something stupid. If you can help me, thanks in advance!

Answer 1

There's another way of doing this. You can simply call the parent object's paintComponent method to clear the panel.

Add this to your constructor in Level :

this.setBackground(Color.BLACK);

And this as the first call in paintComponent:

super.paintComponent(g);

Answer 2

You can use g.clearRect(x, y, width, height), and provide the said coordinates, where you want the painting to be cleared from. Or you can give the dimensions of whole of the JPanel/JComponent where you are drawing, though doing this keep one thing in mind, that the said drawing is not a heavy work, else too much of cleaning will put extra burden on the painting calls.