Painting Ellipses in Java

Question

I have a java program which displays an ellipse on the screen and changes its direction through the use of the arrow keys. I constantly call repaint() on the ellipse using a while loop.

The ellipse moves, but the problem is that it leaves a trail of ellipses on its path. How do I make it so that it removes the old ellipses and then repaint the new one?

Code:

public void run(){
        while (animator != null) 
        {
            setBackground(Color.GREEN);
            repaint();
                            // The direction works and the rest works fine.
            player1.move(player1, player1.direction);
            try  
            {  
                Thread.sleep(100);  
            }  
            catch (InterruptedException e)  
            {  
                break;  
            }  
        }
}

// The paintComponent of my player1 is fine.
public void paint(Graphics g){
        Graphics2D g2 = (Graphics2D)g;
        player1.paintComponent(g2, player1);
}

Answer 1

Here is some basic code which does the very basics (without the use of a continuous while loop):

import java.awt.Color;
import java.awt.Container;
import java.awt.Graphics;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;

import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;


@SuppressWarnings("serial")
public class Ellipses extends JFrame {

    public static void main(String[] args){
        //Ensures application is not run on the main thread 
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                Ellipses myEllipses = new Ellipses();
                myEllipses.init();
            }
        });
    }

    public Ellipses(){
        //Set up the frame
        this.setTitle("Ellipses Example");
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setVisible(true);
        this.setSize(400, 400);
    }

    private Ellipse ellipse1;

    public void init(){
        Container contentPane = this.getContentPane();

        //Create a new ellipse and add to the content pane
        ellipse1 = new Ellipse();
        contentPane.add(ellipse1);


        //Add the keyListener to the contentPane
        contentPane.addKeyListener(new KeyListener() {

            public void keyTyped(KeyEvent e) {}
            public void keyReleased(KeyEvent e) {}
            public void keyPressed(KeyEvent e) {
                if(e.getKeyCode() == KeyEvent.VK_UP){
                    ellipse1.decreaseY();
                }
                if(e.getKeyCode() == KeyEvent.VK_DOWN){
                    ellipse1.increaseY();
                }
                if(e.getKeyCode() == KeyEvent.VK_LEFT){
                    ellipse1.decreaseX();
                }
                if(e.getKeyCode() == KeyEvent.VK_RIGHT){
                    ellipse1.increaseX();
                }

                //Repaint the ellipse

                ellipse1.repaint();
            }
        });

        //Request the focus so key presses can be detected
        contentPane.setFocusable(true);
        contentPane.requestFocus();
    }



    //Create an ellipse which can be drawn to the screen
    public class Ellipse extends JComponent{

        private int x , y; //Coordinates of the oval

        public Ellipse(){
            setCoordinates(100, 100);
        }

        public void setCoordinates(int x, int y){
            this.x = x;
            this.y = y;
        }

        public void increaseY(){
            y+=10;
        }

        public void increaseX(){
            x+=10;
        }

        public void decreaseY(){
            y-=10;
        }

        public void decreaseX(){
            x-=10;
        }

        public void paint(Graphics g){
            //Ensures previous paint is cleared
            super.paintComponents(g);
            g.setColor(Color.RED);
            g.fillOval(x, y, 100, 100); 
        }
    }
}

Answer 2

You should draw the background Color before drawing the ellipse in the game loop :) Also you can call repaint() , it actually calls update() to do the dirty work of clearing the screen and calling paint(). When you use repaint the update method inherit

public void update(Graphics g) {
g.setColor(getBackground());
g.fillRect(0, 0, width, height);
g.setColor(getForeground());
paint(g)
}

so the background return to it's original color and the trail of ellipses will be removed

Answer 3

The problem is likely that your paintComponent(Graphics) overriden method is not calling super.paintComponent(g), which clears the canvas, among other things:

// Bad:
@Override
public void paintComponent(Graphics g) {
    // paint the ellipse, etc.
}

// Good:
@Override
public void paintComponent(Graphics g) {
    super.paintComponent(g);
    // paint the ellipse, etc.
}