How to Create Bezier Curve Animation Using Java Applet?

Last Updated : 16 Feb, 2023

An applet is a Java program that can be embedded into a web page. Applets are small Java applications that can be accessed on an Internet server, and transported over the Internet. Before getting into it let’s check some software requirements

Java SE Development Kit 8u361 by Oracle
To Download JDK 8 Click Here.

Note: It is recommended to run the below java applet program.

Bezier Curve

Bezier Curve is a mathematically defined curve used in two-dimensional graphic applications like adobe Illustrator, Inkscape, etc. The curve is defined by four points: the initial position and the terminating position i.e P0 and P3 respectively (which are called “anchors”) and two separate middle points i.e P1 and P2(which are called “handles”) in our example. Bezier curves are frequently used in computer graphics, animation, modeling, etc. A sample video is given below to get an idea how Bezier Curve looks like.

Step by Step Implementation

To generate the Bezier curve we need four Control points P0, P1, P2, and P3. This configuration is called the Cubic Bezier Curve

Step 1: Linearly interpolate between each successive pair of points based on t.

P_AB = (1 – t) * P_A+ t * P_B
P_BC = (1 – t) * P_B+ t * P_C
P_CD = (1 – t) * P_C+ t * P_D

Step 2: Expanding the Above Equation

For Point AB:

AB_X = (1 – t) * A_X + t * B_X
AB_Y = (1 – t) * A_Y + t * B_Y

For Point BC:

BC_X = (1 – t) * B_X + t * C_X
BC_Y = (1 – t) * B_Y + t * C_Y

For Point CD:

CD_X = (1 – t) * C_X + t * D_X
CD_Y = (1 – t) * C_Y + t * D_Y

Step 3: Linearly interpolate between each successive pair of the new points

P_ABC= (1 – t) * P_AB + t * P_BC
P_BCD = (1 – t) * P_BC + t * P_CD

Step 4: Linearly interpolate between each successive pair of the new points

T_X = (1 – t) * 3 * A_X + 3 * (1 – t) * 2 * t * B_X + 3 * (1 – t) * t² * C_X + t³ *D_X
T_Y = (1 – t) * 3 * A_Y + 3 * (1 – t) * 2 * t * B_Y + 3 * (1 – t) * t² * C_Y + t³ *D_Y

Step 5: Implementing it in Program

Java

import java.awt.*; 
import javax.swing.*; 
import java.applet.*; 
import java.lang.Math; 
  
public class BezierAnimation extends Applet { 
    // To give delay for each iteration 
    void sleep() 
    { 
        try { 
            Thread.sleep(100); 
            repaint(); 
        } 
        catch (Exception ob) { 
        } 
    } 
  
    // Paint method 
    public void paint(Graphics g) 
    { 
  
        // Cubic Beizer Curve Defined by four Control points 
        // This point's can be change or can be taken from User 
        int[] x = new int[] { 100, 150, 650, 700 }; 
        int[] y = new int[] { 500, 100, 100, 500 }; 
  
        // lx and ly store the all x and y co-ordinate generated 
        // by the first loop to show the path of curve 
        int[] lx = new int[1200]; 
        int[] ly = new int[1200]; 
  
        // store the x and y co-ordinate 
        // of internal lines 
        int[] xy = new int[10]; 
        double t; 
        int nx, ny, i = 0; 
  
        // Store the calculated x and y 
        // co-ordinate in lx and ly 
        for (t = 0.0; t <= 1.0; t += 0.001) { 
            lx[i] = (int)(Math.pow(1 - t, 3) * x[0] + 3 * t * Math.pow(1 - t, 2) * x[1] + 3 * t * t * (1 - t) * x[2] 
                          + Math.pow(t, 3) * x[3]); 
            ly[i] = (int)(Math.pow(1 - t, 3) * y[0] + 3 * t * Math.pow(1 - t, 2) * y[1] + 3 * t * t * (1 - t) * y[2] 
                          + Math.pow(t, 3) * y[3]); 
            i++; 
        } 
  
        // display all the lines Curve and animation 
        for (t = 0.0; t <= 1.0; t += 0.01) { 
            nx = (int)(Math.pow(1 - t, 3) * x[0] + 3 * t * Math.pow(1 - t, 2) * x[1] + 3 * t * t * (1 - t) * x[2] 
                       + Math.pow(t, 3) * x[3]); 
            ny = (int)(Math.pow(1 - t, 3) * y[0] + 3 * t * Math.pow(1 - t, 2) * y[1] + 3 * t * t * (1 - t) * y[2] 
                       + Math.pow(t, 3) * y[3]); 
  
            // calculating the x and y for displaying the 
            // internal line form in bezier curve 
            xy[0] = (int)((1 - t) * x[0] + t * x[1]); 
            xy[1] = (int)((1 - t) * y[0] + t * y[1]); 
            xy[2] = (int)((1 - t) * x[1] + t * x[2]); 
            xy[3] = (int)((1 - t) * y[1] + t * y[2]); 
            xy[4] = (int)((1 - t) * x[2] + t * x[3]); 
            xy[5] = (int)((1 - t) * y[2] + t * y[3]); 
            xy[6] = (int)((1 - t) * xy[0] + t * xy[2]); 
            xy[7] = (int)((1 - t) * xy[1] + t * xy[3]); 
            xy[8] = (int)((1 - t) * xy[2] + t * xy[4]); 
            xy[9] = (int)((1 - t) * xy[3] + t * xy[5]); 
            g.setColor(Color.blue); 
  
            // Outline for the bezier curve 
            g.drawLine(x[0], y[0], x[1], y[1]); 
            g.drawLine(x[1], y[1], x[2], y[2]); 
            g.drawLine(x[2], y[2], x[3], y[3]); 
  
            // making a big dot at each control point 
            g.fillOval(x[0] - 5, y[0] - 5, 10, 10); 
            g.fillOval(x[1] - 5, y[1] - 5, 10, 10); 
            g.fillOval(x[2] - 5, y[2] - 5, 10, 10); 
            g.fillOval(x[3] - 5, y[3] - 5, 10, 10); 
            g.setColor(Color.red); 
  
            // Show Trace of the curve 
            g.drawLine(nx - 5, ny, nx + 5, ny); 
            g.drawLine(nx, ny - 5, nx, ny + 5); 
            g.drawPolyline(lx, ly, i); 
            g.setColor(Color.black); 
            g.drawLine(xy[0], xy[1], xy[2], xy[3]); 
            g.drawLine(xy[2], xy[3], xy[4], xy[5]); 
            g.drawLine(xy[6], xy[7], xy[8], xy[9]); 
  
            // Labeling the Control points 
            g.drawString("A", x[0] + 5, y[0] - 5); 
            g.drawString("B", x[1] + 5, y[1] - 5); 
            g.drawString("C", x[2] + 5, y[2] - 5); 
            g.drawString("D", x[3] + 5, y[3] - 5); 
  
            // Labeling the interal moving line 
            g.drawString("AB", xy[0] + 5, xy[1] - 5); 
            g.drawString("BC", xy[2] + 5, xy[3] - 5); 
            g.drawString("CD", xy[4] + 5, xy[5] - 5); 
            g.drawString("ABC", xy[6] + 5, xy[7] - 5); 
            g.drawString("BCD", xy[8] + 5, xy[9] - 5); 
  
            // making the end of line bold 
            g.fillOval(xy[0] - 4, xy[1] - 4, 8, 8); 
            g.fillOval(xy[2] - 4, xy[3] - 4, 8, 8); 
            g.fillOval(xy[4] - 4, xy[5] - 4, 8, 8); 
            g.fillOval(xy[6] - 4, xy[7] - 4, 8, 8); 
            g.fillOval(xy[8] - 4, xy[9] - 4, 8, 8); 
  
            // Gives delay and paint the 
            // screen white for next iteration 
            sleep(); 
            g.setColor(Color.white); 
            g.fillRect(0, 0, 1000, 1000); 
        } 
    } 
    // Main Method 
    // if This method raise any error Remove the Main method 
    public static void main(String[] args) 
    { 
        BezierAnimation a = new BezierAnimation(); 
        JFrame jp1 = new JFrame(); 
        jp1.getContentPane().add(a, BorderLayout.CENTER); 
        jp1.setSize(new Dimension(1000, 1000)); 
        jp1.setVisible(true); 
    } 
}