Drawing Methods in Java Applet (JApplet) Using Eclipse IDE: Drawing a Snowman

What Will I Learn?

In this tutorial;

• You will learn what Java Applet is.
• You will learn how to create a basic Java Applet.
• You will learn how to draw something in Java Applets with paint methods.
• You will learn the Graphichs class and its methods.

Requirements

-Java SE Development Kit (Not necessarily the last version) is required.
-Eclipse IDE or any similar Interated Development Enviroment (IDE) that is designed for Java programming language is required.

Difficulty

This program contains the basic parts of graphics class and Java Applets;

• Basic

Tutorial Contents

The purpose of this tutorial is drawing a snowman in a Java Applet. The below figure contains the image of the code of the program (JApplet_Drawing_Snowman_Demo.java).

Java Applet (JApplet)

Two kinds of Java programs exist. These are Java Applets and Java applications. This Java program is a Java applet, not a Java application. The Java programs that are needed to be emmbedded into an HTML document, transported across a network, and executed using a web browser are the Java Applets. To create Java Applet in java programming languge firstly we need to import javax.swing.JApplet package with the following command;

import javax.swing.JApplet;

The other important thing is that the class that is going to be used as Java program needs to be extends the JApplet class because of the object oriented concept of inheritance. Therefore while defining the class of this program we used the following command;

public class JApplet_Drawing_Snowman_Demo extends JApplet {

Paint Method

There are many applet methods exist. One of them is the paint method. The paint method uses the Graphics objets in its constructor. In this program, we have one graphics object. Therefore, we used the following code to define the main method of the program.

    public void paint(Graphics Snowman_Page) {

The Graphics Class

The Graphics objects allows us to draw many type of shapes by using some methods such as drawOval and fillOval, In this program we are going to use the following Graphics methods;

To fill rectangle defined by (x,y) upper left corner, witdth and lenght;

        Snowman_Page.fillRect(x, y, width, height);

To draw a line from (x1,y1) to (x2,y2);

        Snowman_Page.drawLine(x1, y1, x2, y2);

To fill oval bouded rectange defined by (x,y) upper left corner, witdth and lenght;

        Snowman_Page.fillOval(x, y, width, height);

To draw an arc along oval bounded by the rectangle defined by x, y, width and height and the arc starts from startAngle and goes distance defined by arcAngle; ,

        Snowman_Page.drawArc(x, y, width, height, startAngle, arcAngle);

Note that (0,0) points indicates the upper left corner of the Java Applet page.

Before using these methods, you can define their color with following code;

        Snowman_Page.setColor(Color);

Drawing Background

In this program firstly we need to draw the background of the page. Since the dimentions of our graphic is (300,225). Therefore with following command we can paint the backgound to cyan.

        Snowman_Page.setColor(Color.CYAN);
        Snowman_Page.fillRect(0, 0, 300, 225);

Drawing Ground

To have dark gray ground with width 300 and height 50 and (0.175) upper left corner, use the following code.

        Snowman_Page.setColor(Color.DARK_GRAY);
        Snowman_Page.fillRect(0, 175, 300, 50);

Drawing Sun

We can use oval for sun. To paint the quarter portion of the sun with 80 as width and 80 as height the upper left corner of the rectengle should be (-40,-40). The we will only see the quarter portion of the oval.

        Snowman_Page.setColor(Color.ORANGE);
        Snowman_Page.fillOval(-40, -40, 80, 80);

Drawing Head

The head should be circle (Oval with equal height and width) and its upper left corner should be at the half of the height in x axes and at the top of snowman in y axes.

        Snowman_Page.setColor(Color.white);
        Snowman_Page.fillOval(middle-20, top, 40, 40);

Drawing Upper Torso

Upper torso should be bigger and lower than head. Draw the upper torso with the folowing code.

        Snowman_Page.fillOval(middle-35, top+35, 70, 50);

Note that, we choose the top of the snowman as 50 and middle of the snowman as 150.

Drawing Lower Torso

Lower torso should be bigger and lower than the upper torso. Draw the lower torso with the folowing code.

        Snowman_Page.fillOval(middle-50, top+80, 100, 60);

Drawing Eyes and Smile

To have black eyes and smile set color to black;

        Snowman_Page.setColor(Color.BLACK);

Then, paint two symmetrical eyes on the head;

        Snowman_Page.fillOval(middle-10, top+10, 5, 5);
        Snowman_Page.fillOval(middle+5, top+10, 5, 5);

Then, draw an arc in the head as smile;

        Snowman_Page.drawArc(middle-10, top+20, 20, 10, 190, 160);

Drawing Arms

We can use lines as arms. It should be start from upper torso;

        Snowman_Page.drawLine(middle-25,top+60,middle-50,top+40);
        Snowman_Page.drawLine(middle+25,top+60,middle+55,top+60);

Drawing Hat

We can add a head top of the head;

        Snowman_Page.drawLine(middle-20,top+5,middle+20,top+5);
        Snowman_Page.fillRect(middle-15, top-20, 30, 25);

Result of the program

When you run the program you can see the Snowman Java Applet page.

Github

You can get this program from Github.

Curriculum

You can find my other java related tutorials in below links.

• Adding JPEG or GIF image files into the GUI in Java using Eclipse IDE
• Reading Text Files and Parsing It Using Iterators and Delimiter in Java with Eclipse IDE

Code of the Program

import javax.swing.JApplet;
import java.awt.*;

public class JApplet_Drawing_Snowman_Demo extends JApplet {
    
    public void paint(Graphics Snowman_Page) {
        
        final int middle=150;
        final int top=50;
        
        
        Snowman_Page.setColor(Color.CYAN);
        Snowman_Page.fillRect(0, 0, 300, 225);
    
        Snowman_Page.setColor(Color.DARK_GRAY);
        Snowman_Page.fillRect(0, 175, 300, 50);
    
        Snowman_Page.setColor(Color.ORANGE);
        Snowman_Page.fillOval(-40, -40, 80, 80);
    
        Snowman_Page.setColor(Color.white);
        Snowman_Page.fillOval(middle-20, top, 40, 40);
        Snowman_Page.fillOval(middle-35, top+35, 70, 50);
        Snowman_Page.fillOval(middle-50, top+80, 100, 60);
    
        Snowman_Page.setColor(Color.BLACK);
        Snowman_Page.fillOval(middle-10, top+10, 5, 5);
        Snowman_Page.fillOval(middle+5, top+10, 5, 5);
    
        Snowman_Page.drawArc(middle-10, top+20, 20, 10, 190, 160);
    
        Snowman_Page.drawLine(middle-25,top+60,middle-50,top+40);
        Snowman_Page.drawLine(middle+25,top+60,middle+55,top+60);
    
        Snowman_Page.drawLine(middle-20,top+5,middle+20,top+5);
        Snowman_Page.fillRect(middle-15, top-20, 30, 25);
    }
}

---

Posted on Utopian.io - Rewarding Open Source Contributors

---