Applet creation by using Java

in #utopian-io6 years ago (edited)

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,

1.png


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

Sort:  

Hey @disturbia, your contribution was rejected by the supervisor @espoem because he found out that it did not follow the Utopian rules.

Upvote this comment to help Utopian grow its power and help other Open Source contributions like this one. Do you want to chat? Join me on Discord.

Hello,
We have found that all or part of the above post may have been copied from: http://www.dijitalders.com/icerik/1690/2_boyutlu_donen_kare.html

Not indicating that the content you post including translations, spun, or re-written articles are not your original work could be seen as plagiarism.

These are some tips on how to share content and add value:

  • Using a few sentences from your source in “quotes.” Use HTML tags or markdown ">" before the quote.
  • Linking to your sources.
  • Include your own original thoughts and ideas on what you have shared.
  • It is recommended that the quotes should not cover more than 50% of the whole post. At least 50% of the content should be original.

Repeated plagiarized posts are considered spam. Spam is discouraged by the community, and may result in action from the cheetah bot.

If you are actually the original author, please do reply to let us know!

Thank You.

More Info: Abuse Guide - 2017.

Thank you for the contribution. It has been approved.

Suggestions:

  • In your future contributions on the series, I expect you to provide more information and descriptions for given codes. The series seem promising, so I encourage you to prepare your future tutorials for complete comprehension on topics you will cover. In tutorials category, Utopian Standards wants contributors to actually explain technical aspects of the subject, instead of contributing with example-based tutorials. I am sure you will do good!

You can contact us on Discord.
[utopian-moderator]

Thanks a lot for detailed feedback, i will keep that in mind.