Java and Distance Education 4

William Overington

Copyright 2000 William Overington

A program that takes a long time to run.

Here is a program that is based on the final program of section 1. A third button has been added, the text appearing on the buttons has changed and the background colour has been changed. Computers are typically talked of in terms of speed and how fast things may be done. In this section the program has been devised so as to deliberately make some parts of the program do so much processing that the effects of the time taken to do the processing are obvious to the user. The first button, button 51, scans the square display area using nested for loops and for each pixel performs a long computation in order to decide whether to colour that pixel yellow or cyan. Using the drawLine function to draw a line from a pixel to itself simply colours that pixel in the currently set colour. The long computation simply adds up a number of random numbers and then tests whether the result is greater or equal to a target value computed by adding that number of values of 0.5 together. The reason for this approach of computing the target as well as the sum of the random numbers is that a reader may simply adjust the value of number and the rest of the computation will fall into place automatically. An alternative approach would have been to have computed the target value from the number of random numbers that I had decided to add together. A variable named number acts to control the speed of drawing down the screen. In developing this program I tried values of number of 10, 100, 1000 and 10000 before settling on 2000. That figure is for the particular computer being used with Internet Explorer 5 and so readers might need to adjust the value of number to some other value, increasing the value of number slows down the drawing of the picture, decreasing the value of number speeds up the drawing of the picture. Running the program and clicking on the button labelled 1 takes about 40 seconds to complete the drawing of the picture, which consists of an area 220 pixels square completely filled at random with yellow and cyan pixels. The program has been devised so that if a reader does choose to change the value of number to some other integer the program will still work.

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

public class Applet4 extends java.applet.Applet
                             implements ActionListener
  {
    int obeycode = 1;
    int xzero = 140;
    int yzero = 40;
    Button button51 = new Button("1");
    Button button52 = new Button("2");
    Button button53 = new Button("3");

    public void init()
      {
        setBackground(Color.red);
        setLayout(null);
        setBounds(0,0,500,300);
        button51.addActionListener(this);
        button51.setLocation(20,20);
        button51.setSize(100,30);
        add(button51);
        button52.addActionListener(this);
        button52.setLocation(20,70);
        button52.setSize(100,30);
        add(button52);
        button53.addActionListener(this);
        button53.setLocation(20,120);
        button53.setSize(100,30);
        add(button53);
      }

    public void actionPerformed(ActionEvent event)
      {
        Object source = event.getSource();
        if (source == button51)
          {
            obeycode=51;
          }
        if (source == button52)
          {
            obeycode=52;
          }
        if (source == button53)
          {
            obeycode=53;
          }
        repaint();
      }

    public void paint(Graphics screen)
      {
        if (obeycode == 51)
          {
            for(int y=0; y <= 219; y++)
              {
                for(int x=0; x <= 219; x++)
                  {
                    double achieved = 0.0;
                    double target = 0.0;
                    int number = 2000;
                    for(int i=1; i <= number; i++)
                      {
                        achieved=achieved+Math.random();
                        target=target + 0.5;
                      }
                    if (achieved >= target)
                      {
                        screen.setColor(Color.yellow);
                      }
                    else
                      {
                        screen.setColor(Color.cyan);
                      }
                    screen.drawLine(xzero+x,yzero+y,
                                      xzero+x,yzero+y);
                  }
              }
          }

        if (obeycode == 52)
          {
            screen.setColor(Color.white);
            screen.fillRect(400,20,40,40);
          }

        if (obeycode == 53)
          {
            screen.setColor(Color.green);
            screen.fillOval(400,80,40,40);
          }
      }

    public void update(Graphics screen)
      {
        paint(screen);
      }

  }

Here is the HTML code to run the program. It may be conveniently placed in a file named Applet4.htm though that name is not obligatory. Please compile and run the program.

<html>
<head>
</head>
<body bgcolor="#808000">
<p align=center>
<applet code="Applet4.class" width=500 height=300>
</applet>
</body>
</html>

First please click on the button labelled 1 and observe the display start to form. Please note that the button labelled 1 will have the focus. In Internet Explorer 5 this is indicated by a dotted line inside the edge of the button as shown in the illustration.

The yellow and cyan pixels are being drawn on the screen. Please note the dotted line inside the edge of the button labelled 1 showing that it has the focus.

I have only tried this program using Internet Explorer 5 and other systems may react differently. While the drawing is taking place down the screen, please click on the button labelled 2. Nothing happens. When the square display area has completed drawing, the white square will be drawn on the screen.

The white square has been drawn on the screen.

Now, please refresh the program and click on the button labelled 1. While the drawing is taking place down the screen, please click on the button labelled 2 and then on the button labelled 3. When the square display area has completed drawing, the green disc will be drawn on the screen, but the white square will not be drawn.

The green disc has been drawn on the screen.

Adding some checkboxes.

The program is now adapted to add two checkboxes. The scenario used is that with the checkboxes set unchecked, that is in the false state, the program will continue to act as before. One checkbox, labelled magenta, will be used to control a boolean variable named usemagentainsteadofyellow and another checkbox, labelled blue, will be used to control a boolean variable named useblueinsteadofcyan. However, the checkbox labelled magenta will be active and the checkbox labelled blue will be passive. Active and passive as used here are my own parlance, they might not be used elsewhere in this context. The active checkbox will have a listener and will respond to an event. The passive checkbox will not have a listener and will not respond to an event, other than the box becoming ticked or unticked as may be the case.

Please note the addition of the word ItemListener shortly after the word implements and the addition of the itemStateChanged function. There are also other additions to the program including declaring the checkboxes and two boolean varaibles, locating and sizing the checkboxes and adding a listener to one of them; together with changes to the paint function.

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

public class Applet4 extends java.applet.Applet
                             implements ActionListener,
                                        ItemListener
  {
    int obeycode = 1;
    int xzero = 140;
    int yzero = 40;
    Button button51 = new Button("1");
    Button button52 = new Button("2");
    Button button53 = new Button("3");
    Checkbox checkbox71 = new Checkbox("magenta");
    Checkbox checkbox72 = new Checkbox("blue");
    boolean usemagentainsteadofyellow = false;
    boolean useblueinsteadofcyan = false;

    public void init()
      {
        setBackground(Color.red);
        setLayout(null);
        setBounds(0,0,500,300);
        button51.addActionListener(this);
        button51.setLocation(20,20);
        button51.setSize(100,30);
        add(button51);
        button52.addActionListener(this);
        button52.setLocation(20,70);
        button52.setSize(100,30);
        add(button52);
        button53.addActionListener(this);
        button53.setLocation(20,120);
        button53.setSize(100,30);
        add(button53);
        checkbox71.addItemListener(this);
        checkbox71.setLocation(20,170);
        checkbox71.setSize(100,30);
        add(checkbox71);
//      checkbox72 deliberately has no addItemListener
        checkbox72.setLocation(20,220);
        checkbox72.setSize(100,30);
        add(checkbox72);  
      }

    public void actionPerformed(ActionEvent event)
      {
        Object source = event.getSource();
        if (source == button51)
          {
            obeycode=51;
          }
        if (source == button52)
          {
            obeycode=52;
          }
        if (source == button53)
          {
            obeycode=53;
          }
        repaint();
      }

    public void itemStateChanged(ItemEvent event)
      {
        Object source = event.getSource();
        if (source == checkbox71)
          {
            obeycode=71;
            usemagentainsteadofyellow = checkbox71.getState();
          }
//      repaint is deliberately not called
      }

    public void paint(Graphics screen)
      {
        if (obeycode == 51)
          {
            for(int y=0; y <= 219; y++)
              {
                for(int x=0; x <= 219; x++)
                  {
                    double achieved = 0.0;
                    double target = 0.0;
                    int number = 2000;
                    for(int i=1; i <= number; i++)
                      {
                        achieved=achieved+Math.random();
                        target=target + 0.5;
                      }
                    if (achieved >= target)
                      {
                        if (usemagentainsteadofyellow)
                          {
                            screen.setColor(Color.magenta);
                          }
                        else
                          {
                            screen.setColor(Color.yellow);
                          }
                      }
                    else
                      {
                        useblueinsteadofcyan=checkbox72.getState();
                        if (useblueinsteadofcyan)
                          {
                            screen.setColor(Color.blue);
                          }
                        else
                          {
                            screen.setColor(Color.cyan);
                          }
                      }
                    screen.drawLine(xzero+x,yzero+y,
                                      xzero+x,yzero+y);
                  }
              }
          }

        if (obeycode == 52)
          {
            screen.setColor(Color.white);
            screen.fillRect(400,20,40,40);
          }

        if (obeycode == 53)
          {
            screen.setColor(Color.green);
            screen.fillOval(400,80,40,40);
          }
      }

    public void update(Graphics screen)
      {
        paint(screen);
      }

  }

Please compile and run the program. Please click on the button labelled 1. The yellow and cyan pixels form on the screen.

The yellow and cyan pixels are being drawn on the screen.

While the yellow and cyan pixels continue to be drawn, please click on each of the two checkboxes. I am using Internet Explorer 5 and nothing happens. Yet when the yellow and cyan pixels have all been drawn, both checkboxes become ticked.

The two checkboxes become ticked after the drawing of the yellow and cyan pixels has been completed.

Please click on button 1 again. A magenta and blue drawing will be produced, overwriting the yellow and cyan original as it proceeds.

A magenta and blue drawing being produced, overwriting the yellow and cyan original as it proceeds.

A magenta and blue drawing has been produced.

Please note that it has not been possible to change the colour choice that is actually being drawn on screen from the checkboxes during the drawing of the square display of coloured pixels. Once a drawing of the square display has been started the colours in force at the start of that particular drawing of the square display stay in force until the end of that particular drawing of the square display. Please also note that to the user the two checkboxes appear to act in an identical manner.

An experimental version of this applet with which I am experimenting can achieve the effect of changing the colours as the drawing of the square display of coloured pixels is proceeding by clicking on the checkboxes as the drawing of the square display of coloured pixels is proceeding. The applet uses a thread and is not included in the present section of this course, yet mention is made of this matter for completeness.

Java and Distance Education index page.

Java and Distance Education

Copyright 2000 William Overington