GFG App
Open App
Browser
Continue

# How to Create Bezier Curve Animation Using Java Applet?

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

1. Java SE Development Kit 8u361 by Oracle

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.

• PAB = (1 – t) * PA + t * PB
• PBC = (1 – t) * PB + t * PC
• PCD = (1 – t) * PC + t * PD

Step 2: Expanding the Above Equation

For Point AB:

• ABX = (1 – t) * AX + t * BX
• ABY = (1 – t) * AY + t * BY

For Point BC:

• BCX = (1 – t) * BX + t * CX
• BCY = (1 – t) * BY + t * CY

For Point CD:

• CDX = (1 – t) * CX + t * DX
• CDY = (1 – t) * CY + t * DY

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

• PABC = (1 – t) * PAB + t * PBC
• PBCD = (1 – t) * PBC + t * PCD

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

• TX = (1 – t) * 3 * AX + 3 * (1 – t) * 2 * t * BX + 3 * (1 – t) * t2 * CX + t3 *DX
• TY = (1 – t) * 3 * AY + 3 * (1 – t) * 2 * t * BY + 3 * (1 – t) * t2 * CY + t3 *DY

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``); ` `    ``} ` `}`

Output:

My Personal Notes arrow_drop_up