Reduce animation flickering in app?

[StephNicolaou]

I have had to repaint a couple of times because of a moving shape I have added to my program whenever the mouse is clicked. I also have a moving shape that follows the mouse over a grid as well which doesn't help a lot, could you please tell me how to reduce this flickering?

The code I have used for the moving counter is:

/* Show the counter appearing above the columns the mouse is over between the restricted co-ordinates and set the counter to the colour depending on the player turn */
        if(xPosCounter >= leftXPos && xPosCounter <= rightXPos)
        {
            g.setColor(counterColour);
            g.fillOval(xPosCounter-(counterWidth/2), yPos - counterHeight*grid[0].length, counterWidth, counterHeight);
        }

And for the animation I have used a timer with a delay of 100 frames per second and this is repainted in action performed but what really started the bad flickering was when I had to add a repaint here:

int lowestYPosition = lowestRow;
        lowestFallingPosition = (lowestYPosition * (counterHeight + gapBetweenCounterSlots))     + topYPos;

        //Droppping counter
        if(unfrozen == true && yPositionMovingCounter < lowestFallingPosition) {                                                                                       //Ypos starts at the beginning of the grid and ends at the bottom
        startAnimation();
        yPositionMovingCounter = yFwdLine (topYPos,15);
        g.setColor(Color.red);
        g.fillOval (centeredCounterInColumn, yPositionMovingCounter, counterWidth, counterHeight);
        repaint();

If I didn't my grid disappeared. I could really do without this flickering because it makes my program look rubbish. Anyone know any methods for this?

[jasimp]

I think what you are looking for is double buffering. I have used the following code before in my applets where I used a listener. I hope it works for you.

public void update(Graphics g) {
    Graphics offgc;
    Image offscreen = null;
    Dimension d = size();
    offscreen = createImage(d.width, d.height);
    offgc = offscreen.getGraphics();
    offgc.setColor(getBackground());
    offgc.fillRect(0, 0, d.width, d.height);
    offgc.setColor(getForeground());
    paint(offgc);
    g.drawImage(offscreen, 0, 0, this);

  }

[StephNicolaou]

That's the thing, I already tried bufferGraphics and it did work for everything apart from the animation. The code I have for it is:

// The object we will use to write with instead of the standard screen graphics
    Graphics bufferGraphics;

    // The image that will contain everything that has been drawn on bufferGraphics
    Image offscreen;

    //Variable to store width and height of the application
    Dimension appSize;

        //Get the width and height of the app
        appSize = getSize();

        // Create an offscreen image to draw on which is the same size as the app
        offscreen = createImage(appSize.width,appSize.height);

        //Everything that is drawn by bufferGraphics will be done on the offscreen image
        bufferGraphics = offscreen.getGraphics();

        // Clear everything that has been drawn before
            bufferGraphics.clearRect(0,0,appSize.width,appSize.width);

        bufferGraphics.drawImage(offscreen,0,0,this);

There were 3 missing lines compared to yours so I tried to add them in but got an out of memory awt Event error so I thought it best to just keep what I've got. Do you know if there
is anything other than this?

[Ezzaral]

Not seeing the other methods that might be involved with painting it's difficult to say with certainty, but the need to start the animation and then draw more things and repaint seems like trouble. Obviously the animation loop is repainting, so it shouldn't be necessary to call repaint again after it's started. What method is that code residing in and how often is it called?

I would ask the same question about the buffered image code that you posted above. Is the buffered image being created each time or just once and updated as needed?

[StephNicolaou]

I had to repaint after the animation because after the animation played my grid which was painted before hand disappears and I didn't know why so I just added it again which stopped this happening. All of this is under the paint method as the animation involves moving an oval downwards (the dropping of the counter in connect 4). This is called every time the mouse is clicked (the player takes their turn). The buffered image code is also under the paint method and update is called whenever repaint is called:

public void update(Graphics g1)
    {
    paint(g1);
    }

I have called repaint under:
mousemoved to get x and move the counter above the grid (code shown above)

mouseclicked to make the new inserted counter appear in my grid

----Just found the problem!

I also had repaint under action listener which was supposed to be part of the animation code so I commented it and then commented the extra repaint I had after the animation code which got rid of the constant flickering (which is the program being repainted all the time) which occurred after the animation was played.

Now the flickering own happens during the animation as I am repainting the oval to move downwards and whenever I move the mouse (to move the counter that follows the mouse over the grid).

Wish this repainting weren't noticeable, but I have to repaint to show the updated image...Don't think theres anything else I could do? Would this be noticeable if I was on a faster computer?