Applet creation by using Java

What Will I Learn?

In this code example I will give you information about creating a 2D frame on a 3D plane by using Java programming language.

• You will learn the usage of Java Applet (graphic) generation,
• You will learn the basics of making an Applet,
• You will learn the usage of ide to run and test your codes.

Requirements

• Eclipse IDE or any other IDE for java developers,
• Basic knowledge on Java.
• Basic knowledge about Applet.

Difficulty

This program is designed for indivuduals who have a basic knowledge in java and programming languages,

• Intermediate.

Tutorial Contents

In this the aim is to create a panel where we can implement our outputs in a user friendly panel. To begin we shall define the libraries that we will use to generate the Java applet.

import java.applet.*; // for applets
import java.awt.*; // for graphics
import java.util.*; // for util
import javax.swing.*; // for swing stuff (GUI)

The first line java.applet is a library containing applet properties and functions. Second one java.awt is suitable for changing the user interface panel, design of the output panel. java.utill library includes utillity properties of the prograam and the last one javax.swing capable of graphical user interface gui panel and capable of making a swing application.

Now we need to define our class for the application,

public class Square extends JApplet

After generating the frame we can proceed to the inner panel and define it,

public class SquarePanel extends JPanel

Now we can define the heigh and width of the panel Or in other words we can denote the four points of the output and let the program generate that desired output.

private double xv[] = { -48, 48, 48, -48 }; // 4 corners for square

Above is the x coordinates of the output now we need to define y coordinates and then proceed to axes.

private double yv[] = { 48, 48, -48, -48 };

Now we need to define the shape by referencing the above points,

private double shapesaves[] = { -48, 48, 48, -48, 48, 48, -48, -48 }; // Original shape

Now we can define rotation of the frame, whether it will stay straight or reverse or any specific angle,

private double rotation = 0; // Rotation position

Zero means the frame will stay in it's original position. No rotation will be implemented. Now we can define the position of color animation,

private double chroma = 64; // Color animation position

We can generate inner black square panel,

void SquarePanel()

Then to clear the original shape we need to start from the first coordinate and equal all other coordinates to the first, initiation one. To do that below code was implemented,

    for (int i = 0; i< 4; i++)
        xv[,] = shapesaves[i]; // to copy X's
    for (int i = 4; i < 8; i++)
        yv[i - 4] = shapesaves[i]; // to copy Y's

Now to turn all the dots,

    double temp_x, temp_y;
    for (int k = 0; k < 4; k++)

To rotate a three dimesional axle frame,

        temp_x = xv[k] * Math.cos(rotation) - yv[k] * Math.sin(rotation);
        temp_y = xv[k] * Math.sin(rotation) + yv[k] * Math.cos(rotation);
        xv[k] = temp_x;
        yv[k] = temp_y;

And after this rotation as you can see the 3D axis looks like 2D now.

yv[k] = yv[k] * Math.sin(rotation / 2);

To reutrn the added function,

    rotation += 0.001;
    chroma++;

And to reset the flash color, draw square panel and selecting the colour below code was implemented,

Color tempcolor = new Color(0, 0, (int)chroma);
    page.setColor(tempcolor);
    for (int j = 0; j < 4; j++)
    {
        if (j < 3)
        {
            page.drawLine((int)xv[j] + xpos, (int)yv[j] + ypos, (int)xv[j + 1] + xpos, (int)yv[j + 1] + ypos);
        }
        else
        {
            page.drawLine((int)xv[j] + xpos, (int)yv[j] + ypos, (int)xv[0] + xpos, (int)yv[0] + ypos);
        }
    }
}

After defining we can set the color and the position of square,

public void paintingComponent(Graphics page)
{
    super.paintingComponent(page);
    setBackground(Color.black);
    // Drawing the square
    drawSquare(page, 128, 128);
    repaint();
}

Then by setting the size of the panel , we're done.

{
    setSize(256, 256);
    getContentPane().add(new SquarePanel());
}

To check the code and output we may run it in Eclipse or in any other java supoorted ide and see the output as shown below,

The overall code for the application is shown below,

import java.applet.*; // for applets
import java.awt.*; // for graphics
import java.util.*; // for util
import javax.swing.*; // for swing stuff (GUI)
public class Square extends JApplet
{
     public class SquarePanel extends JPanel
{
private double xv[] = { -48, 48, 48, -48 }; // 4 corners for square
private double yv[] = { 48, 48, -48, -48 };
private double shapesaves[] = { -48, 48, 48, -48, 48, 48, -48, -48 }; // Original shape 
private double rotation = 0; // Rotation position
private double chroma = 64; // Color animation position
void SquarePanel()
{
    // Nothing to do here.
}
private void drawSquare(Graphics page, int xpos, int ypos)
{
    // Clear to original shape
    for (int i = 0; i< 4; i++)
        xv[,] = shapesaves[i]; // to copy X's
    for (int i = 4; i < 8; i++)
        yv[i - 4] = shapesaves[i]; // to copy Y's
                                                // Turn all the dots
    double temp_x, temp_y;
    for (int k = 0; k < 4; k++)
    {
        //rotate three-dimensional axle frame
        temp_x = xv[k] * Math.cos(rotation) - yv[k] * Math.sin(rotation);
        temp_y = xv[k] * Math.sin(rotation) + yv[k] * Math.cos(rotation);
        xv[k] = temp_x;
        yv[k] = temp_y;
        // and as you can see the 3-D axis looks 2-D.
        yv[k] = yv[k] * Math.sin(rotation / 2);
    }
    // Return added
    rotation += 0.001;
    chroma++;
    if (chroma > 255)
        chroma = 64; // Reseting to flash color
                         // Drawing the square in question
                         // Selecting the color
    Color tempcolor = new Color(0, 0, (int)chroma);
    page.setColor(tempcolor);
    for (int j = 0; j < 4; j++)
    {
        if (j < 3)
        {
            page.drawLine((int)xv[j] + xpos, (int)yv[j] + ypos, (int)xv[j + 1] + xpos, (int)yv[j + 1] + ypos);
        }
        else
        {
            page.drawLine((int)xv[j] + xpos, (int)yv[j] + ypos, (int)xv[0] + xpos, (int)yv[0] + ypos);
        }
    }
}
public void paintingComponent(Graphics page)
{
    super.paintingComponent(page);
    setBackground(Color.black);
    // Drawing the square
    drawSquare(page, 128, 128);
    repaint();
}
     }
     public void init()
{
    setSize(256, 256);
    getContentPane().add(new SquarePanel());
}
}

On our next tutorial we will focus on generating graphics, application and pulling data to our Applet.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---