Why is paintComponent not displaying correctly?

Question

When running my program, sometimes the the triangles are drawn, sometimes they aren't, and sometimes only the last one appears. Originally I put the code in a for loop, but it didn't work, so I tried to go backwards and write it all out instead to see if it works, but to no avail. The correct behavior should be, displaying five triangles, equally spaced on the screen (Directly below the top rectangle). I tried printing out the array, but the number of times the println() method was called was sort of random, instead of constant. I heard that the paintComponent() method can be called at any time by the Swing Framework, but I'm not sure. Essentially I'm asking, why the triangles (the cyan ones) aren't being drawn correctly, and how do I fix it?

@SuppressWarnings("serial")
public class GraphicsClass extends JPanel {

    private int[] xCoordinates = {20, 40, 30};
    private int[] yCoordinates = {40, 40, 60};

    @Override
    public void paintComponent(Graphics g) {

        super.paintComponent(g);

        g.setColor(Color.DARK_GRAY);
        g.fillRect(0, 0, 450, 40);
        g.fillRect(0, 260, 450, 40);

        g.setColor(Color.CYAN);
        g.fillPolygon(xCoordinates, yCoordinates, 3);
        xCoordinates[0] += 95;
        xCoordinates[1] += 95;
        xCoordinates[2] += 95;
        g.fillPolygon(xCoordinates, yCoordinates, 3);
        xCoordinates[0] += 95;
        xCoordinates[1] += 95;
        xCoordinates[2] += 95;
        g.fillPolygon(xCoordinates, yCoordinates, 3);
        xCoordinates[0] += 95;
        xCoordinates[1] += 95;
        xCoordinates[2] += 95;
        g.fillPolygon(xCoordinates, yCoordinates, 3);
        xCoordinates[0] += 95;
        xCoordinates[1] += 95;
        xCoordinates[2] += 95;
        g.fillPolygon(xCoordinates, yCoordinates, 3);
    }
}

Answer 1

Think about it this way. paintComponent may be called any time (upwards of four times when the component is first painted on the screen in some cases). So each time it is called, you're adding 95 to each of the xCoordinates, this would make xCoordinates[0] equal to 400 after paintComponent is called the first time, 800 after the second time, so on and so fourth...

Instead, you need to make a copy of the xCoordinates and modify it instead, for example...

public class TestPane extends JPanel {

    private int[] xCoordinates = {20, 40, 30};
    private int[] yCoordinates = {40, 40, 60};

    @Override
    public void paintComponent(Graphics g) {

        super.paintComponent(g);

        g.setColor(Color.DARK_GRAY);
        g.fillRect(0, 0, 450, 40);
        g.fillRect(0, 260, 450, 40);

        int[] xPosy = Arrays.copyOf(xCoordinates, xCoordinates.length);
        g.setColor(Color.CYAN);
        for (int index = 0; index < 4; index++) {

            g.fillPolygon(xPosy, yCoordinates, 3);
            xPosy[0] += 95;
            xPosy[1] += 95;
            xPosy[2] += 95;

        }
    }
}

Of course, you could forgo some of the oddities and just make use of the 2D Graphics Shape API

public class TestPane extends JPanel {

    private Polygon triangle;

    public TestPane() {
        triangle = new Polygon(new int[]{20, 40, 30}, new int[]{40, 40, 60}, 3);
    }

    @Override
    public void paintComponent(Graphics g) {

        super.paintComponent(g);
        Graphics2D g2d = (Graphics2D) g.create();

        g2d.setColor(Color.DARK_GRAY);
        g2d.fillRect(0, 0, 450, 40);
        g2d.fillRect(0, 260, 450, 40);

        g2d.setColor(Color.CYAN);
        AffineTransform at = AffineTransform.getTranslateInstance(0, 0);
        for (int index = 0; index < 4; index++) {

            Shape shape = at.createTransformedShape(triangle);
            g2d.fill(shape);
            at.translate(95, 0);

        }
    }
}