Generative Creativity - Lecture 4:
Applet graphics

Introduction

For listings of methods, look at the documentation for the 'Graphics' and `Graphics2D' classes.

The Blobs applet

  import javax.swing.*;
  import java.awt.*;
  import java.awt.event.*;
  import java.util.*;

  class AppletPanel extends JPanel implements MouseListener {
     Vector colors = new Vector();

     void randomiseColors() {
         colors.setSize(0);
         for (int i = 0; i < 100; i++) {
            colors.add(new Color((float)Math.random(), (float)Math.random(), (float)Math.random())); }
     }

     public void paintComponent(Graphics g) {
        int width = getSize().width, height = getSize().height;
        super.paintComponent(g);
        for (int i = 0; i < colors.size(); i++) {
           g.setColor((Color)colors.elementAt(i));
           int x = (int)(Math.random() * width), y = (int)(Math.random() * height);
           int w = (int)(Math.random() * 50), h = (int)(Math.random() * 50);
           g.fillOval(x, y, w, h); }
     }

     public void mousePressed(MouseEvent event) {
        randomiseColors();
        repaint();
     }

     public void mouseReleased(MouseEvent event) { }
     public void mouseClicked(MouseEvent event) { }
     public void mouseEntered(MouseEvent event) { }
     public void mouseExited(MouseEvent event) { }

  }

  public class Blobs extends JApplet {
     public void init() {
        AppletPanel appletPanel = new AppletPanel();
        appletPanel.addMouseListener(appletPanel);
        getContentPane().add(appletPanel);
     }
  }

Blobs applet in action

Points to note

Note also the use the 'Color' contructor to construct a new Color object with randomised red/green/blue values (numbers between 0.0 and 1.0).

The drawing is done using calls on the 'Graphics' method 'fillOval' which takes as parameters the coordinates of the top, left corner of the oval, its width and its height.

Moving images

The Thread class can be used to create a process which runs `in the background' allowing the user to interact with it using the mouse.

The easiest way to set up this kind of animation is to make the JPanel class implement the 'Runnable' interface.

The background behaviour can then be defined using a 'run' method placed in the class definition.

The background process can be launched using 'new Thread(appletPanel).start()'.

This approach is illustrated in the MovingImages applet which has the CS logo moving down and across the screen.

Clicking with the mouse resets the position of the logo.

Note also the use of the getImage method to fetch the image file. (This has to be in the same folder as the applet.)

MovingImages applet

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

  class RunnablePanel extends JPanel implements Runnable {
     Image image;
     int x = 20, y = 20;

     public void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawImage(image, x, y, null);
     }

     public void run() {
        Dimension d = getSize();
        while (true) try {
           x += 1;
           y += 1;
           if (x > d.width) x = 0;
           if (y > d.height) y = 0;
           repaint();
           Thread.currentThread().sleep(50);
        } catch (Exception ex) { ex.printStackTrace(); }
     }

  }

  public class MovingImages extends JApplet implements MouseListener {
     RunnablePanel runnablePanel = new RunnablePanel();

     public void init() {
        runnablePanel.setSize(getSize());
        runnablePanel.image = getImage(getDocumentBase(), "csLogo.png");
        this.addMouseListener(this);
        new Thread(runnablePanel).start();
        getContentPane().add(runnablePanel);
     }

     public void mousePressed(MouseEvent event) {
        runnablePanel.x = event.getX();
        runnablePanel.y = event.getY();
        runnablePanel.repaint();
     }

     public void mouseReleased(MouseEvent event) { }
     public void mouseClicked(MouseEvent event) { }
     public void mouseEntered(MouseEvent event) { }
     public void mouseExited(MouseEvent event) { }
  }

MovingImages applet in action

Exercises

• Modify the Blobs applet so that it generates larger blobs of color.
• Modify the Blobs applet so that it sometimes draws a randomly-sized retangle rather than an oval. For this you will need to use Math.random() for purposes of making a random decision between two options. You will also need the 'drawRect' method from the 'Graphics' class.
• Modify the Blobs applet so that it generates blobs of a light shade. For this you will need to work out what ranges of RGB value produce lighter colors.
• Modify the MovingImages applet so that clicking with the mouse starts and stops the image movement.

Resources

• Look at the documentation for `Graphics' and `Graphics2D' to see the full range of operations possible.

• Look at the documentation for the `Thread' class for documentation on use of background processes.