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

in #utopian-io7 years ago (edited)

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

Code.JPG

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.
r.JPG

rr.JPG

Github

You can get this program from Github.

git.JPG

Curriculum

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

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

Sort:  

good example :)

Thank you for the contribution. It has been approved.

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

Congratulations @aromatheraphy! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

You got a First Vote
Award for the number of upvotes received

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

Hey @aromatheraphy I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Suggestions

  • Contribute more often to get higher and higher rewards. I wish to see you often!
  • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

  • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x