Drawing Lines

Lines and pixels are perhaps the most common of the graphic elements that you can draw. In this section you will learn how to draw lines and pixels. Both graphic elements are drawn with the same command.

Drawing Lines

In this section I will show you how to draw lines with your applet. Lines are drawn using the drawLine method. There is no "fillLine" method, as a line cannot be filled. If you wanted to draw a line from the coordinate (1,2) to the coordinate (10,11), you would use the following drawLine call.

g.drawLine(1,2,10,11);

I will now show you a simple program that draws lines. This program will produce a display, as seen in Figure 2.3.

Figure 2.3: Drawing lines

The source code used to produce this applet is shown in Listing 2.3.

Listing 2.3: Drawing lines (LineApplet.java)

import java.awt.*;
import java.awt.event.*;
import java.applet.*;

public class LineApplet extends Applet
{
  public static final int IDEAL_WIDTH = 200;
  public static final int IDEAL_HEIGHT = 200;

  public void paint(Graphics g)
  {
    g.setColor(Color.BLACK);

    g.fillRect(0, 0, getWidth(), getHeight());

    g.setColor(Color.WHITE);
    for (int y = 0; y < getHeight(); y += 5)
    {
      g.drawLine(0, y, getWidth(), getHeight() - y);
    }
  }

  public static void main(String args[])
  {
    Applet applet = new LineApplet();
    Frame frame = new Frame();
    frame.addWindowListener(new WindowAdapter()
    {
      public void windowClosing(WindowEvent e)
      {
        System.exit(0);
      }
    });

    frame.add(applet);
    frame.setSize(IDEAL_WIDTH, IDEAL_HEIGHT);
    frame.show();
  }
}

As you can see, the applet loops from the top of the applet, to the bottom, drawing lines across the applet. This is done by looping y from 0 to the height of the applet, as shown here.

for (int y = 0; y < getHeight(); y += 5)

Next for each iteration of the loop a line is drawn from one side of the applet, to the other. This line will start at the top-left and end at the bottom right. This is done with the following call to drawLine:

g.drawLine(0, y, getWidth(), getHeight() - y);

The drawLine method can be used to draw other shapes as well. Very short lines can become pixels.

Drawing Pixels

There is no command in Java to draw a single pixel. If you want to draw a pixel you should use the drawLine command and specify the same point for the beginning and end of the line. For example, to draw a pixel at location (100,100) you would use the following drawLine call:

g.drawLine(100,100,100,100);

Figure 2.4 shows an applet that draws single pixels.

Figure 2.4: Drawing Pixels

The source code for this program is shown in Listing 2.5.

Listing 2.4: Drawing Pixels (PixelApplet.java)

import java.awt.*;
import java.awt.event.*;
import java.applet.*;

public class PixelApplet extends Applet
{
  public static final int IDEAL_WIDTH = 200;
  public static final int IDEAL_HEIGHT = 200;

  public void paint(Graphics g)
  {
    g.setColor(Color.BLACK);

    g.fillRect(0, 0, getWidth(), getHeight());

    g.setColor(Color.WHITE);
    for (int i = 0; i < 1000; i++)
    {
      int x = (int) (Math.random() * getWidth());
      int y = (int) (Math.random() * getHeight());
      g.drawLine(x, y, x, y);
    }
  }

  public static void main(String args[])
  {
    Applet applet = new PixelApplet();
    Frame frame = new Frame();
    frame.addWindowListener(new WindowAdapter()
    {
      public void windowClosing(WindowEvent e)
      {
        System.exit(0);
      }
    });

    frame.add(applet);
    frame.setSize(IDEAL_WIDTH, IDEAL_HEIGHT);
    frame.show();
  }
}

This applet displays randomly placed white dots. This looks like a night sky. This illustrates another very important concept. How to produce random numbers. The random x and y values are produced with the following lines.

int x = (int) (Math.random() * getWidth());
int y = (int) (Math.random() * getHeight());

As you can see, the random numbers are generated by calling Math.random. This method will return a rand number between 0 and 1. That may not seem like a very big range, but it can have many decimal places. To get the random number up to a limit, we just multiply that limit by the random number. As you can see above, x is set to a random number times the width. This will give a random number between 0 and the width minus one.

To generate a random number between "upper" and "lower" you would use the following expression.

int num = (int)(Math.random()*(upper-lower))+upper;

Using these random x and y values, we were able to display a night sky, with stars.