Java animation and overriding the paint and update methods

Question

So at the moment I'm trying to animate different orders of bezier curves and the midpoints that make them up, but I am pretty new to graphics in Java. I understand how paint and repaint work but I can't figure out how to get out of this situation.

The bezier curve points are decided by user clicks here, and repaint() is called at the mouseEvent.

public void paint(Graphics g) {
    initgr();
    int left = iX(-rWidth / 2), right = iX(rWidth / 2), bottom = iY(-rHeight / 2), top = iY(rHeight / 2);
    g.drawRect(left, top, right - left, bottom - top);

    for (int i = 0; i < np; i++) {
        // Show tiny rectangle around point:
        g.drawRect(iX(P[i].x) - 2, iY(P[i].y) - 2, 4, 4);
        if (i > 0)
            // Draw line P[i-1]P[i]:
            g.drawLine(iX(P[i - 1].x), iY(P[i - 1].y), iX(P[i].x),
                    iY(P[i].y));
    }

    if (np == 2 && order == 1)
        bezier1(g, P, gran);
    if (np == 3 && order == 2)
        bezier2(g, P, gran);
    if (np == 4 && order == 3)
        bezier3(g, P, gran);
    if (np == 5 && order == 4)
        bezier4(g, P, gran);
    if (np == 6 && order == 5)
        bezier5(g, P, gran);
}

The functions called at the bottom go to the calculated and drawn bezier curves here.

void bezier3(Graphics g, Point2D[] p, int n) {
    javax.swing.Timer timer = new javax.swing.Timer(100,
            new TimerListener());
    timer.setDelay(39);
    timer.start();
    float dt = 1.0F / n, cx3 = -p[0].x + 3 * (p[1].x - p[2].x) + p[3].x, cy3 = -p[0].y
            + 3 * (p[1].y - p[2].y) + p[3].y, cx2 = 3 * (p[0].x - 2
            * p[1].x + p[2].x), cy2 = 3 * (p[0].y - 2 * p[1].y + p[2].y), cx1 = 3 * (p[1].x - p[0].x), cy1 = 3 * (p[1].y - p[0].y), cx0 = p[0].x, cy0 = p[0].y, x = p[0].x, y = p[0].y, x0, y0, x2, y2;
    for (int i = 1; i <= n; i++) {

        float t = i * dt;

        x0 = x;
        y0 = y;
        x = ((cx3 * t + cx2) * t + cx1) * t + cx0;
        y = ((cy3 * t + cy2) * t + cy1) * t + cy0;
        // x2 = ((cx3 * (.5F*t) + cx2) * (.5F*t) + cx1) * (.5F*t) + cx0;
        // y2 = ((cy3 * (.5F*t) + cy2) * (.5F*t) + cy1) * (.5F*t) + cy0;
        x2 = p[1].x * t;
        y2 = p[1].y * t;

        Point2D A = tcalc(P[0], P[1], t), B = tcalc(P[2], P[3], t), C = tcalc(
                P[1], P[2], t), A1 = tcalc(A, C, t), B1 = tcalc(C, B, t);

        g.setColor(Color.red);
        g.drawLine(iX(x0), iY(y0), iX(x), iY(y));
        // paint(g);
        g.setColor(Color.green);
        g.drawLine(iX(A.x), iY(A.y), iX(C.x), iY(C.y));
        g.drawLine(iX(C.x), iY(C.y), iX(B.x), iY(B.y));
        g.setColor(Color.blue);
        g.drawLine(iX(A1.x), iY(A1.y), iX(B1.x), iY(B1.y));
    }
}

So I know I shouldn't be drawing inside of these methods, but rather in paint. However, I have 5 of these functions that I'm not sure how to put in paint, and if I change the other method to update, it's just never going to erase the points the user clicked when I want to move on to the next selection of points. You can see I tried to put a basic swing timer in, but I'm not even sure if that will work in this situation for the animation.

Is there any way to get this to work inside of the bezier functions? I just don't see how I can get the drawlines out. My 5th order one has something like 11 midpoints being constantly calculated. Obviously, my understanding of this part of java graphics is shaky at best, so any point in the right direction would be greatly appreciated. If I find anything in my research I will update the question.

Thanks for any help.

I can't figure out how to implement this so that the bezier functions animate the drawn lines instead of just painting them. repaint() using the timer just draws all of the lines at once, which is to be expected since they are all in a for loop outside of paint, but I don't see where else to put them. I have 5 of these bezier methods depending on which order is chosen to animate. I really don't understand how I'm supposed to be able to repaint the lines so that it is an animation, especially with the program already drawing points in paint. — Smeasum
Ah, so you want an animation and not just a delay. Overriding paint is not going to cut it, you are going to have implement a rendering loop. You can google Java animation techniques or take a look at either Trident or Processing, both great libraries for Java 2D animation. — Perception
Overriding paint() and update() is an AWT concept. You would not do this when using Swing. Custom painting is done in the paintComponent() method of your custom component. — camickr

Joop Eggen Joop Eggen · Accepted Answer · 2011-10-28T14:42:07

Forget the timer. Try paintComponent.

Object Oriented would help keeping an overview, simplifying the number of variables.

Make a base class Bezier with a paint(Graphics) {} and onMouse(MouseEvent){}.
Derive Bezier1, ~2, ~3 and so on.
And have variables Bezier bezier2 = new Bezier2(); ...
And in your paintCompont call bezier2.paint(g).

Then try repaint(10L) or so in your mouse handling. Experiment to learn (paintImmediate and so on).

Java animation and overriding the paint and update methods

1 Answers