top of page
Writer's picturecompnomics

Drawing on the Web: Exploring the Java Applet Graphics Class


Java applets, though not as dominant as they once were, offered a unique way to create interactive graphics within web pages. A cornerstone of this graphical prowess was the Graphics class. In this blog post, we'll explore how to leverage the Graphics class methods to draw various shapes in your applets, and even save and use them within an Applet Tag!


Unleashing the Power of Graphics:

The Graphics class provides a treasure trove of methods for creating visual elements within your applet. Let's delve into some of the most commonly used ones:

  • Lines: Use the drawLine(x1, y1, x2, y2) method to draw a line between two points defined by their coordinates (x1, y1 for the starting point and x2, y2 for the ending point).

  • Rectangles: Create rectangles using drawRect(x, y, width, height). Here, x and y specify the top-left corner's coordinates, and width and height define the rectangle's dimensions. For filled rectangles, use fillRect(x, y, width, height).

  • Circles and Ellipses: While there's no dedicated method for perfect circles, you can achieve them using drawOval(x, y, width, height). This method draws an oval, and if width and height are equal, it becomes a circle. Similarly, fillOval(x, y, width, height) fills an oval/circle.

  • Ellipses: For true ellipses (non-circular), use drawOval(x, y, width, height) where width and height represent the ellipse's diameters along the x and y axes, respectively.

  • Arcs: Create curved segments using drawArc(x, y, width, height, startAngle, arcAngle). This method defines an arc within a bounding rectangle (specified by x, y, width, and height). startAngle and arcAngle (both in degrees) define the starting and ending angles of the arc. You can also use fillArc for filled arcs.

  • Polygons: Draw complex shapes with multiple sides using drawPolygon(xPoints, yPoints, nPoints). Here, xPoints and yPoints are arrays containing the x and y coordinates of each vertex in the polygon, and nPoints represents the number of vertices.


Putting it All Together: A Simple Drawing Applet

Here's a basic example demonstrating some of these methods:

public class DrawingApplet extends Applet {

  @Override
  public void paint(Graphics g) {
    // Draw a blue rectangle
    g.setColor(Color.BLUE);
    g.drawRect(20, 20, 100, 50);

    // Draw a filled green circle
    g.setColor(Color.GREEN);
    g.fillOval(150, 20, 50, 50);

    // Draw a red line
    g.setColor(Color.RED);
    g.drawLine(50, 100, 200, 100);

    // Draw an orange triangle (polygon with 3 vertices)
    int[] xPoints = {75, 175, 125};
    int[] yPoints = {150, 150, 200};
    g.setColor(Color.ORANGE);
    g.drawPolygon(xPoints, yPoints, 3);
  }
}

This code draws a blue rectangle, a green filled circle, a red line, and an orange triangle within the applet.


Saving and Using the Applet:

  1. Compile the Applet: Use javac DrawingApplet.java to compile your code into a .class file.

  2. Create an HTML Page: Create an HTML file (e.g., index.html) with the following code, replacing DrawingApplet.class with your class name:

<!DOCTYPE html>
<html>
<head>
  <title>My Drawing Applet</title>
</head>
<body>
  <h1>My Artistic Applet</h1>
  <applet code="DrawingApplet.class" width="400" height="300">
    Your browser does not support applets.
  </applet>
</body>
</html>
  1. Open the HTML Page: Open index.html

44 views0 comments

Recent Posts

See All

Comments

Rated 0 out of 5 stars.
No ratings yet

Add a rating
bottom of page