super.paintComponent() with an unexpected behavior

[Joaquim Amorim]

Good afternoon,

I'm trying to draw a single shape on different YY positions several times on a JPanel (to mimic an animated shape).

The final result i expected to be was that, after i click on the shape, only one shape should be visible in the screen (moving across as it is being redrawn).

Nevertheless, what i am getting right now is a bunch of shapes drawn in different YY positions, visible in the screen.

I am using the super.paintComponent() method while overriding the paintComponent() class.

I know that this is the correct approach, as super.paintComponent() is responsible for redrawing JPanel's background and thus, only one shape should be visible moving across the screen.

The following code is what i have right now:

public class DBLauncher extends JApplet
{
    public static void main(String args[]) 
    {
        JFrame frame = new JFrame();
        
        frame.setTitle("Database Launcher v1.0");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        
        JApplet applet = new DBLauncher();
        
        applet.init();
        frame.getContentPane().add(applet);
        frame.pack();
        frame.setLocation(new Point(430, 150));
        frame.setVisible(true);
        frame.setResizable(false);
        frame.setSize(500, 500);
    }
    
    @Override
    public void init()
    {
        DBPanel panel = null;
        
        try 
        {
            panel = new DBPanel();
        } 
        catch (IOException ex) 
        {
            Logger.getLogger(DBLauncher.class.getName()).log(Level.SEVERE, null, ex);
        }
        
        getContentPane().add(panel);
        
        panel.setBackground(Color.lightGray);
    }
}

class DBPanel extends JPanel implements Runnable, MouseListener
{   
    int musicShapePosX = 85;
    int musicShapePosY = 100;
    int SEGMENT_SHAPE_LENGTH = 50;
    int SHAPE_HEIGHT = 10;
    int IMAGE_FACTOR_X = 1 ;
    int IMAGE_FACTOR_Y = 49;
    
    int musicImagePosX = musicShapePosX + IMAGE_FACTOR_X;
    int musicImagePosY = musicShapePosY - IMAGE_FACTOR_Y;
    
    float SHAPE_SPEED = 7.5f; 
    
    CustomShapeButton musicShapeButton = new CustomShapeButton(musicShapePosX, musicShapePosY, SEGMENT_SHAPE_LENGTH, SHAPE_HEIGHT);
    
    private static BufferedImage musicShapeImage;
    
    private ArrayList<Shape> shapes = null;
    
    boolean musicButtonPressed = false;
    
    @SuppressWarnings("CallToThreadStartDuringObjectConstruction")
    public DBPanel() throws IOException
    {       
        shapes = new ArrayList();
        
        shapes.add(musicShapeButton); 
        
        this.setFocusable(true);
        addMouseListener(this); //Mouse events listener
        
        //Create and initialize the animation thread
        Thread thread = new Thread(this);
        
        thread.start();
    }
    
    @Override
    public void paintComponent(Graphics g) 
    {
        super.paintComponent(g);
        
        Graphics2D g2 = (Graphics2D) g;
        
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        
        g2.draw(musicShapeButton);
    }
    
    @Override
    @SuppressWarnings("SleepWhileInLoop")
    public void run() 
    {
        while (true)
        {
            if (musicButtonPressed == true)
            {
                animateButtonShapeMusic();
            }

            repaint();

            try
            {
                Thread.sleep(35);
            } 
            catch (InterruptedException ex)
            {
                break;
            }
        }
    }
    
    public void delay(int milliseconds)
    {
        try
        {
            Thread.sleep(milliseconds);
        } 
        catch (InterruptedException e)
        {
        }
    }

    @Override
    public void mouseClicked(MouseEvent me) 
    {
        for (int i = 0; i < shapes.size(); i++)
        {
            Shape shape = shapes.get(i);
            
            //Mostrar os icones respetivos, consoante o botão seleccionado (if's)
            
            if (shape.contains(me.getPoint()))
            {
                if (shape.equals(i) == shape.equals(0))
                {
                    musicButtonPressed = true;
                    
                    System.out.println("Clicked on shape number " + i + " that represents the music button!");
                }
            }
        }
    }
    
    public void animateButtonShapeMusic()
    {
        if (musicShapePosY < 228)
        {
            musicShapePosY = (int)(musicShapePosY + SHAPE_SPEED);    
            
            musicShapeButton.drawShape(musicShapePosX, musicShapePosY, SEGMENT_SHAPE_LENGTH, SHAPE_HEIGHT);
        }
    }
    
    public void animateButtonShapeTv()
    {    
    }
    
    public void animateButtonShapeGames()
    {     
    }
    
    public void animateButtonShapeBooks()
    {     
    }
    
    public void animateButtonShapeTech()
    {    
    }

    @Override
    public void mousePressed(MouseEvent me) 
    { 
    }

    @Override
    public void mouseReleased(MouseEvent me) 
    {   
    }

    @Override
    public void mouseEntered(MouseEvent me) 
    {   
    }

    @Override
    public void mouseExited(MouseEvent me) 
    {   
    }
}

Please note that it is extending JApplet (and not JFrame, as it should) only because this is an old project of mine, but i'm pretty sure that this undesirable behavior has nothing to do with it.

Any ideias?

Please check both images i'm sending attached.

Thank you in advance.
J Amorim

[Campbell Ritchie]

Don't use applets. Nobody has used them for the best part of ten years.
Please port your app to a JPanel with its paintComponent() method, which should have protected access. Tell us what the exact problem is then.
Please explain why you are using @SuppressWarnings(...).

[Paul Clapham]

Those lines from 93 to 113 in your posted code. You meant them to represent an animation where the display changes every 35 milliseconds. But it doesn't work that way. All of those display changes get put into a queue called the "Event Dispatch Thread", which processes them at its own speed. So you may see jerky changes happening but not every 35 milliseconds and not what you expected.

But the Swing designers knew that people wanted to do that kind of thing and so they provided a mechanism to support it. Tutorial here: How to Use Swing Timers.

[Rob Camick]

Please note that it is extending JApplet (and not JFrame, as it should)

It should do neither.

There is absolutely no reason to extend JApplet since you are NOT creating an appliet.

And you should not extend JFrame either since you are NOT adding any new functionality to the JFrame. Adding components to a frame is not adding functionality to the frame.

So your code should simply be:

//public class DBLauncher extends JApplet
public class DBLauncher

Then you also get rid of the init() method.

Instead you simply add your DBPanel to the frame directly:

//JApplet applet = new DBLauncher();
//applet.init();
//frame.getContentPane().add(applet);
frame.add( new DBPanel() );

Don't know if this will fix your problem but at least now you should be using Swing properly by adding components to the frame.

If you need more help then post your SSCCE showing the code changes.

We also don't have access to your CustomShapeButton, so we don't know if that might be causing the problem.

[Joaquim Amorim]

Hello guys,

First of all thank you all for your answers.

I've just modified the whole code so now it is much more simple.

public class Animated_Shape_Test extends JFrame
{
    public static void main(String args[]) throws IOException 
    {
        new Animated_Shape_Test();
    }
    
    public Animated_Shape_Test() throws IOException
    {
        this.setSize(500, 500);
        this.setPreferredSize(new Dimension(500, 500));
        this.setLocation(new Point(430, 150));
        this.setTitle("Database Launcher v1.0");
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setResizable(false);
        this.setVisible(true);
        
        DBPanel panel = new DBPanel();
        
        getContentPane().add(panel, BorderLayout.CENTER);
    }
}

final class DBPanel extends JPanel implements Runnable
{   
    int musicShapePosX = 85;
    int musicShapePosY = 100;
    int SEGMENT_SHAPE_LENGTH = 50;
    int SHAPE_HEIGHT = 10;
    float SHAPE_SPEED = 7.5f; 
    
    CustomShapeButton musicShapeButton = new CustomShapeButton(musicShapePosX, musicShapePosY, SEGMENT_SHAPE_LENGTH, SHAPE_HEIGHT);
    
    private ArrayList<Shape> shapes = null;
    
    protected DBPanel() throws IOException
    {   
        shapes = new ArrayList();
        
        shapes.add(musicShapeButton);
        
        this.setOpaque(true);
        this.setFocusable(true);
        
        startThread();
    }
    
    public void startThread()
    {
        Thread t = new Thread(this);
        
        t.start();
    }
    
    @Override
    public void paintComponent(Graphics g) 
    {
        super.paintComponent(g);
        
        Graphics2D g2 = (Graphics2D) g;
        
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
  
        g2.setColor(getBackground().darker());
        g2.fillRect(0, 0, getWidth(), getHeight());
        
        g2.setColor(Color.BLACK);
        g2.draw(musicShapeButton);
    }
    
    public void delay(int milliseconds)
    {
        try
        {
            Thread.sleep(milliseconds);
        } 
        catch (InterruptedException e)
        {
        }
    }
     
    @Override
    public void run() 
    {
        while (true)
        {
            delay(35);
            animateButtonShapeMusic();
            repaint();
        }
    }
    
    public void animateButtonShapeMusic()
    {
        if (musicShapePosY < 228)
        {
            musicShapePosY = (int)(musicShapePosY + SHAPE_SPEED);    
            
            musicShapeButton.drawShape(musicShapePosX, musicShapePosY, SEGMENT_SHAPE_LENGTH, SHAPE_HEIGHT);
        }
    }
}

As you all guys mentioned a different approach, i have tried several things, with no luck at all (in all of them i always get the trace of the shape being drawn across the screen or i simply get no shape drawn at all), including:

  - Adding/commenting in several different ways the above code lines (42; 64; 65 and 67);
  - The Timer approach;
  - Getting rid of JApplet extension and substitute it with a JFrame one;

The weird thing is that this is such a simple thing to do, a shape moving across the screen with no trace of it's own shape (I've done this multiple times in the past before, but i'm a little rusty with java language at the moment as i am working with other stuff for the last 12 years now (this is why i had the JApplet implemented as this was an old unfinished project i had started a long time ago).

So, with this being said and looking at the much simpler/cleaner code above, what am i doing wrong here? :S Thank you.

PS - I am sending you the CustomShapeButton class as well.

public final class CustomShapeButton extends JButton implements Shape
{   
    GeneralPath path = new GeneralPath();

    public CustomShapeButton(float posX, float posY, float segmentLength, float shapeHeight)
    {    
        drawShape(posX, posY, segmentLength, shapeHeight);
    }
    
    public void drawShape(float posX, float posY, float segmentLength, float shapeHeight)
    {   
        float x0 = posX;
        float y0 = posY + shapeHeight;
        float x1 = posX - 3 + (segmentLength * 0.65f);
        float y1 = posY - segmentLength;
        float x2 = x1 - 6 + segmentLength * 1.35f;
        float y2 = y1;
        float x3 = x2 - 3 + (segmentLength * 0.65f);
        float y3 = y2 + shapeHeight + segmentLength;
        float x4 = x3 + 3 - (segmentLength * 0.65f);
        float y4 = y3 + shapeHeight + segmentLength;
        float x5 = x4 + 6 - (segmentLength * 1.35f);
        float y5 = y4;
        
        path.moveTo(x0, y0);
        path.lineTo(x1, y1);
        path.lineTo(x2, y2);
        path.lineTo(x3, y3);
        path.lineTo(x4, y4);
        path.lineTo(x5, y5);
        path.closePath();
    }

    @Override
    public Rectangle2D getBounds2D() 
    {
        return path.getBounds2D();
    }

    @Override
    public boolean contains(double d, double d1) 
    {
        return path.contains(d, d1);
    }

    @Override
    public boolean contains(Point2D pd) 
    {
        return path.contains(pd);
    }

    @Override
    public boolean intersects(double d, double d1, double d2, double d3) 
    {
        return path.intersects(d, d1, d2, d3);
    }

    @Override
    public boolean intersects(Rectangle2D rd) 
    {
        return path.intersects(rd);
    }

    @Override
    public boolean contains(double d, double d1, double d2, double d3) 
    {
        return path.contains(d, d1, d2, d3);
    }

    @Override
    public boolean contains(Rectangle2D rd) 
    {
        return path.contains(rd);
    }

    @Override
    public PathIterator getPathIterator(AffineTransform at) 
    {
        return path.getPathIterator(at);
    }

    @Override
    public PathIterator getPathIterator(AffineTransform at, double d) 
    {
        return path.getPathIterator(at, d);
    }
}

[Rob Camick]

Well, I specifically stated you should NOT be extending JFrame.

There is no need to extend any class. All you need is the class with the main() method that creates the frame and adds the panel to the frame.

I gave you the code for this.

Not only did you change the code but you changed the order of the statements in the code.

Swing components should be added to the frame BEFORE the frame is made visible.

Regarding your custom painting I am not sure why you are extending JButton. There is no need to extend a Swing component to draw a custom Shape.

All you need to do is create your Polygon and paint the polygon in your paintComponent() method.

See Playing With Shapes for a simple code example that shows how to create a "triangle" Shape and paint the triangle in paintCompoennt.

in your case you have a "shapes" ArrayList. So you need to just create your custom shape and add the shape to the ArrayList. Then in the paintComponent() method you can iterate through the ArrayList to paint all the shapes.

So basically your "drawShape(...)" method should just be a stand alone method that returns the Polygon instance so you can add the instance of the Polygon to the "shapes" ArrayList.

For an example of doing custom painting with a dynamic number of shapes, using an ArrayList see the "Draw On Componnt" example in Custom Painting Approaches

And has already been suggested you should be using a Swing Timer for animation. Swing components need to be updated on the Event Dispatch Thread (EDT). The Swing Timer executes on the EDT.

[Rob Camick]

Here is an example that puts most of those above comment into practice.

The main difference is that the class animates an ArrayList of "Ball" objects, not Shape objects, because I wanted to add additional properties for each Ball.

import java.awt.*;
import java.awt.event.*;
import java.awt.image.*;
import java.util.*;
import javax.swing.*;
import javax.swing.Timer;

public class BallAnimation4
{
	private static void createAndShowUI()
	{
		BallPanel panel = new BallPanel();

		JFrame frame = new JFrame("BallAnimation4");
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.add( panel );
		frame.setSize(800, 600);
		frame.setLocationRelativeTo( null );
		//frame.setExtendedState(JFrame.MAXIMIZED_BOTH);
		frame.setVisible( true );

		panel.addBalls(5);
		panel.startAnimation();
	}

	public static void main(String[] args)
	{
		EventQueue.invokeLater(new Runnable()
		{
			public void run()
			{
				createAndShowUI();
			}
		});
	}
}

class BallPanel extends JPanel implements ActionListener
{
	private ArrayList<Ball> balls = new ArrayList<Ball>();

	public BallPanel()
	{
		setLayout( null );
		setBackground( Color.BLACK );
	}

	public void addBalls(int ballCount)
	{
		Random random = new Random();

		for (int i = 0; i < ballCount; i++)
		{
			Ball ball = new Ball();
			ball.setRandomColor(true);
			ball.setLocation(random.nextInt(getWidth()), random.nextInt(getHeight()));
			ball.setMoveRate(32, 32, 1, 1, true);
//			ball.setMoveRate(16, 16, 1, 1, true);
			ball.setSize(32, 32);
			balls.add( ball );
		}
	}

	@Override
	public void paintComponent(Graphics g)
	{
		super.paintComponent(g);

		for (Ball ball: balls)
		{
			ball.draw(g);
		}
	}

	public void startAnimation()
	{
		Timer timer = new Timer(75, this);
		timer.start();
	}

	public void actionPerformed(ActionEvent e)
	{
		move();
		repaint();
	}

	private void move()
	{
		for (Ball ball : balls)
		{
			ball.move(this);
		}
	}


	class Ball
	{
		public Color color = Color.BLACK;

		public int x = 0;
		public int y = 0;
		public int width  = 1;
		public int height = 1;

		private int moveX = 1;
		private int moveY = 1;
		private int directionX = 1;
		private int directionY = 1;
		private int xScale = moveX;
		private int yScale = moveY;

		private boolean randomMove = false;
		private boolean randomColor = false;
		private Random myRand = null;

		public Ball()
		{
			myRand = new Random();
			setRandomColor(randomColor);
		}

		public void move(JPanel parent)
		{
			int iRight = parent.getSize().width;
			int iBottom = parent.getSize().height;

			x += 5 + (xScale * directionX);
			y += 5 + (yScale * directionY);

			if (x <= 0)
			{
				x = 0;
				directionX *= (-1);
				xScale = randomMove ? myRand.nextInt(moveX) : moveX;
				if (randomColor) setRandomColor(randomColor);
			}

			if (x >= iRight - width)
			{
				x = iRight - width;
				directionX *= (-1);
				xScale = randomMove ? myRand.nextInt(moveX) : moveX;
				if (randomColor) setRandomColor(randomColor);
			}

			if (y <= 0)
			{
				y = 0;
				directionY *= (-1);
				yScale = randomMove ? myRand.nextInt(moveY) : moveY;
				if (randomColor) setRandomColor(randomColor);
			}

			if (y >= iBottom - height)
			{
				y = iBottom - height;
				directionY *= (-1);
				yScale = randomMove ? myRand.nextInt(moveY) : moveY;
				if (randomColor) setRandomColor(randomColor);
			}
		}

		public void draw(Graphics g)
		{
			g.setColor(color);
			g.fillOval(x, y, width, height);
		}

		public void setColor(Color c)
		{
			color = c;
		}

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

		public void setMoveRate(int xMove, int yMove, int xDir, int yDir, boolean randMove)
		{
			this.moveX = xMove;
			this.moveY = yMove;
			directionX  = xDir;
			directionY  = yDir;
			randomMove  = randMove;
		}

		public void setRandomColor(boolean randomColor)
		{
			this.randomColor = randomColor;

			switch (myRand.nextInt(3))
			{
				case 0:  color = Color.BLUE;
						 break;
				case 1:  color = Color.GREEN;
						 break;
				case 2:  color = Color.RED;
						 break;
				default: color = Color.BLACK;
						 break;
			}
		}

		public void setSize(int width, int height)
		{
			this.width  = width;
			this.height = height;
		}
	}
}

[Joaquim Amorim]

Thank you for your help, Rob.

Rob Camick wrote:Not only did you change the code but you changed the order of the statements in the code.

I did this because i was trying to figure out if the behavior had anything related to the order of the instructions.

Rob Camick wrote:Regarding your custom painting I am not sure why you are extending JButton. There is no need to extend a Swing component to draw a custom Shape.

The code you are seeing here is barely 20% of the whole project. This will be a launching window, having images and shapes that i need them to behave as animated buttons thus the use of an extended JButton.

As the complete code of the project is unnecessary to debug this simple problem, i have removed almost all of it just to simplify things, but i didn't remove the whole thing, so a few original leafs still remain here and there.

I will definitely try your approach and, most important of all, i will try to understand it.

Cheers!