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.
- 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:
