Java Applet Tutorial

Java Applet Tutorial

This site is meant to be a quick-and-dirty introduction to writing Java applets. A set of example applets are given to be used as exercises. Feel free to download the source code herein, try it out on your own machine, and modify it.

Designers and artists: this tutorial emphasizes visual and interactive aspects of applets. It was made especially for people wishing to create small, graphical, expressive forms with Java. However, if you have no programming experience at all, you'll probably need additional learning resources. Please see the note below for first-time programmers.

Before getting started, you'll need a compiler for Java, so that you can translate source code into something executable. You could, for example, download Sun's Java Software Development Kit (abbreviated as JDK or SDK), which includes a compiler, utilities, example applets, and a boat-load of documentation. (Mac users can try here, here and here.) Be sure to get the Java SDK and not the JRE (Java Runtime Environment) -- the former allows you to compile java programs, the latter only allows you to run them.

After getting a compiler, you can try out the examples. The first one, "Drawing Lines", walks you through the process of creating an applet. Please note that lessons 9-12 are unfinished, as I have yet to get around to completing them.

1 Drawing Lines2 Drawing Other Stuff3 Color - introduces arrays4 Mouse Input - introduces showStatus( ) and Vector5 Keyboard Input6 Threads and Animation - introduces System.out.println( )7 Backbuffers - introduces Math.random( ) and Graphics.drawImage( )8 Painting9 Clocks

10 Playing with Text - introduces 2D arrays and hyperlinks11 3D Graphics - introduces classes12 Odds and Ends

All of these examples were designed to be small and, hopefully, easy to absorb. If you couldn't find information here that you need, you might try Sun's website, which has copious documentation on Java, along with online tutorials and examples. You might also try the Java FAQ, a copy of which can be found by searching for "java faq" in any good search engine (or just try here -- the same site also hosts a tutorial).

If you're looking for books on Java, O'Reilly publishes some good ones, although they are most useful to people with at least a bit of prior programming experience. Java in a Nutshell by David Flanagan (in its 3rd edition, at the time of writing) covers the basic features of Java, including the syntax of the language, data structures, object-oriented features, and threads. Determined novices with no programming experience may find it useful. Java Foundation Classes in a Nutshell by David Flanagan describes how to create GUIs with widgets and how to draw basic graphics, among

other things. Java 2D Graphicsby Jonathan Knudsen, also published by O'Reilly, discusses in detail the graphics features of the Java 2 platform.

First-time programmers will probably find that the explanations given in this tutorial are too brief and leave out too many details. Basic information on the Java language can be found here (try to focus on understanding the syntax of variables, expressions, loops, and flow control structures at first -- we hardly make use of any object-oriented concepts in this tutorial). There are some books on Java for first-time programmers: this site recommends Java: An Introduction to Computer Science and Programming by Walter Savitch et al., Problem Solving With Java by Elliot B. Koffman and Ursula Wolz, andIntroduction to Programming Using Java: An Object-Oriented Approach by David M. Arnow and Gerald Weiss. You might also try getting a feel for some basic programming concepts by learning a simpler language first, such as DBN.

Terminology : Note that the term function is used in this tutorial in place of the more modern (and object-oriented) term method.

About these web pages :These exercises were a joy to prepare once I figured out how to write a Perl script that could take the documentation and .java source files I wrote and generate .html files with them. The script also generated the little navigation bars at the top of each exercise page, and made it easy for me to play with different color schemes.

Thanks to Richard Streitmatter-Tran for encouraging me to create these lessons !

Exercise 1: Drawing Lines

Here's the source code for a first applet:

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

public class DrawingLines extends Applet {

int width, height;

public void init() { width = getSize().width; height = getSize().height; setBackground( Color.black ); }

public void paint( Graphics g ) { g.setColor( Color.green ); for ( int i = 0; i < 10; ++i ) { g.drawLine( width, height, i * width / 10, 0 ); } }}

Start up a plain text editor and type in the source code. It's important that you use a plain ASCII text editor (such as "Notepad" on Windows, "SimpleText" on Mac, or "vi" or "emacs" on UNIX) to enter the source code; don't use a word processing application (such as "WordPerfect" or "Word") since they use a proprietary format for files. If you don't want to do any typing, you can download the source file. Save the file as DrawingLines.java. It's important that the filename match the class name in the source code.

Now, you have to compile the source code to generate a bytecode file called DrawingLines.class. If you're using Sun's Java Software Development Kit, you can compile by typing javac DrawingLines.java at a command prompt (on Windows, this is done within an MS-DOS shell). Check that the .class file was indeed generated.

Then, create a .html file containing the following line:

<applet width=300 height=300 code="DrawingLines.class"> </applet>

(If the .html file is not in the same directory as the .class file, you'll have to add a codebase="..." attribute specifying the path to the class file. More information on the <applet> tag can be found here.) When you view the .html file in a web browser, you should see something like this:

Here's a second version of the same source code, this time with comments:

import java.applet.*;import java.awt.*; // The applet's class name must be identical to the filename.public class DrawingLines extends Applet { // Declare two variables of type "int" (integer). int width, height; // This gets executed when the applet starts. public void init() {

// Store the height and width of the applet for future reference. width = getSize().width; height = getSize().height;

// Make the default background color black. setBackground( Color.black ); } // This gets executed whenever the applet is asked to redraw itself. public void paint( Graphics g ) {

// Set the current drawing color to green. g.setColor( Color.green );

// Draw ten lines using a loop. // We declare a temporary variable, i, of type "int". // Note that "++i" is simply shorthand for "i=i+1" for ( int i = 0; i < 10; ++i ) {

// The "drawLine" routine requires 4 numbers: // the x and y coordinates of the starting point, // and the x and y coordinates of the ending point, // in that order. Note that the cartesian plane, // in this case, is upside down (as it often is // in 2D graphics programming): the origin is at the // upper left corner, the x-axis increases to the right, // and the y-axis increases downward. g.drawLine( width, height, i * width / 10, 0 ); } }}

Exercise 2: Drawing Other Stuff

The source code:


public class DrawingStuff extends Applet {

int width, height;


public void paint( Graphics g ) {

// As we learned in the last lesson, // the origin (0,0) is at the upper left corner. // x increases to the right, and y increases downward.

g.setColor( Color.red ); g.drawRect( 10, 20, 100, 15 ); g.setColor( Color.pink ); g.fillRect( 240, 160, 40, 110 );

g.setColor( Color.blue ); g.drawOval( 50, 225, 100, 50 ); g.setColor( Color.orange ); g.fillOval( 225, 37, 50, 25 );

g.setColor( Color.yellow ); g.drawArc( 10, 110, 80, 80, 90, 180 ); g.setColor( Color.cyan ); g.fillArc( 140, 40, 120, 120, 90, 45 );

g.setColor( Color.magenta ); g.fillArc( 150, 150, 100, 100, 90, 90 ); g.setColor( Color.black ); g.fillArc( 160, 160, 80, 80, 90, 90 );

g.setColor( Color.green ); g.drawString( "Groovy!", 50, 150 ); }}

The resulting applet looks like this:

For documentation on the Graphics class and the parameters that are passed to functions such as drawRect(), fillOval(), etc., go here.

Please note that some of the member functions in Graphics, such as fillRect(), interpret the width and height parameters as measured between pixel edges; hence the resulting figure will truly be widthpixels wide and height pixels high. However, other functions, such as drawRect(), assume dimensions are measured between pixel centres; hence the resulting figure will actually be width+1 by height+1pixels.

Exercise 3: Color

In the last lesson, we used a number of colors predefined by Java: Color.red, Color.green, Color.magenta, etc. (for a complete list, go here). In this lesson, we learn how to create arbitrary colors, by specifying an RGB value. The example applets below generate spectrums of color and draw something with them.

The source code for the first applet:


public class DrawingWithColor1 extends Applet {

int width, height; int N = 25; // the number of colors created Color[] spectrum; // an array of elements, each of type Color Color[] spectrum2; // another array

public void init() { width = getSize().width; height = getSize().height; setBackground( Color.black );

// Allocate the arrays; make them "N" elements long spectrum = new Color[ N ]; spectrum2 = new Color[ N ];

// Generate the colors and store them in the arrays. for ( int i = 1; i <= N; ++i ) { // The three numbers passed to the Color() constructor // are RGB components in the range [0,1]. // The casting to (float) is done so that the divisions will be // done with floating point numbers, yielding fractional quotients.

// As i goes from 1 to N, this color goes from almost black to white. spectrum[ i-1 ] = new Color( i/(float)N, i/(float)N, i/(float)N );

// As i goes from 1 to N, this color goes from almost pure green to pure red. spectrum2[ i-1 ] = new Color( i/(float)N, (N-i)/(float)N, 0 ); } }


int step = 90 / N; for ( int i = 0; i < N; ++i ) { g.setColor( spectrum[ i ] ); g.fillArc( 0, 0, 2*width, 2*height, 90+i*step, step+1 );

g.setColor( spectrum2[ i ] ); g.fillArc( width/3, height/3, 4*width/3, 4*height/3, 90+i*step, step+1 ); } }}

The resulting applet:

A second example:

import java.applet.*;import java.awt.*;import java.lang.Math;

public class DrawingWithColor2 extends Applet {

int width, height; int N = 25; Color[] spectrum;


spectrum = new Color[ N ];

// Generate the colors and store them in the array. for ( int i = 0; i < N; ++i ) { // Here we specify colors by Hue, Saturation, and Brightness, // each of which is a number in the range [0,1], and use

// a utility routine to convert it to an RGB value before // passing it to the Color() constructor. spectrum[i] = new Color( Color.HSBtoRGB(i/(float)N,1,1) ); } }


int radius = width / 3; for ( int i = 0; i < N; ++i ) {

// Compute (x,y) positions along a circle, // using the sine and cosine of an appropriately computed angle. double angle = 2*Math.PI*i/(double)N; int x = (int)( radius*Math.cos(angle) ); int y = (int)( radius*Math.sin(angle) );

g.setColor( spectrum[ i ] ); g.drawString( "Color", width/2+x, height/2+y ); } }}

The output:

Exercise 4: Mouse Input

The source code:

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

public class Mouse1 extends Applet implements MouseListener, MouseMotionListener {

int width, height; int mx, my; // the mouse coordinates boolean isButtonPressed = false;


mx = width/2; my = height/2;

addMouseListener( this ); addMouseMotionListener( this ); }

public void mouseEntered( MouseEvent e ) { // called when the pointer enters the applet's rectangular area } public void mouseExited( MouseEvent e ) { // called when the pointer leaves the applet's rectangular area } public void mouseClicked( MouseEvent e ) { // called after a press and release of a mouse button

// with no motion in between // (If the user presses, drags, and then releases, there will be // no click event generated.) } public void mousePressed( MouseEvent e ) { // called after a button is pressed down isButtonPressed = true; setBackground( Color.gray ); repaint(); // "Consume" the event so it won't be processed in the // default manner by the source which generated it. e.consume(); } public void mouseReleased( MouseEvent e ) { // called after a button is released isButtonPressed = false; setBackground( Color.black ); repaint(); e.consume(); } public void mouseMoved( MouseEvent e ) { // called during motion when no buttons are down mx = e.getX(); my = e.getY(); showStatus( "Mouse at (" + mx + "," + my + ")" ); repaint(); e.consume(); } public void mouseDragged( MouseEvent e ) { // called during motion with buttons down mx = e.getX(); my = e.getY(); showStatus( "Mouse at (" + mx + "," + my + ")" ); repaint(); e.consume(); }

public void paint( Graphics g ) { if ( isButtonPressed ) { g.setColor( Color.black ); } else { g.setColor( Color.gray ); } g.fillRect( mx-20, my-20, 40, 40 ); }}

Try clicking and dragging on the resulting applet. Notice how the status bar in your web browser displays the current mouse position -- that's due to the calls to showStatus(). (You might see some occasional flickering in this applet. This problem will be addressed in an upcoming lesson.)

The MouseEvent data that gets passed into each of the mouse*() functions contains information on the position of the mouse, the state of the mouse buttons and modifier keys (i.e. the Shift, Alt, Ctrl, and Meta keys), the time at which the event occurred, etc. To find out how to access this information, go here.

Another example:



int width, height; int x, y; // the coordinates of the upper-left corner of the box int mx, my; // the most recently recorded mouse coordinates boolean isMouseDraggingBox = false;


x = width/2 - 20; y = height/2 - 20;


public void mouseEntered( MouseEvent e ) { } public void mouseExited( MouseEvent e ) { } public void mouseClicked( MouseEvent e ) { } public void mousePressed( MouseEvent e ) { mx = e.getX(); my = e.getY(); if ( x < mx && mx < x+40 && y < my && my < y+40 ) { isMouseDraggingBox = true; } e.consume(); } public void mouseReleased( MouseEvent e ) { isMouseDraggingBox = false; e.consume(); } public void mouseMoved( MouseEvent e ) { } public void mouseDragged( MouseEvent e ) { if ( isMouseDraggingBox ) { // get the latest mouse position int new_mx = e.getX(); int new_my = e.getY();

// displace the box by the distance the mouse moved since the last event // Note that "x += ...;" is just shorthand for "x = x + ...;" x += new_mx - mx; y += new_my - my;

// update our data mx = new_mx; my = new_my;

repaint(); e.consume(); } }

public void paint( Graphics g ) { g.setColor( Color.gray ); g.fillRect( x, y, 40, 40 );

}}

Try clicking and dragging on the gray square:

A third example:

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


int width, height;

// We need a place to store a list of mouse positions. // Rather than use an array, we'll use a Vector, because // it allows elements to be easily appended and deleted. // (Technically, it would probably be more appropriate to // use a LinkedList, but they're only supported by Java 1.2) Vector listOfPositions;


listOfPositions = new Vector();


public void mouseEntered( MouseEvent e ) { } public void mouseExited( MouseEvent e ) { } public void mouseClicked( MouseEvent e ) { } public void mousePressed( MouseEvent e ) { } public void mouseReleased( MouseEvent e ) { } public void mouseMoved( MouseEvent e ) {

if ( listOfPositions.size() >= 50 ) { // delete the first element in the list listOfPositions.removeElementAt( 0 ); }

// add the new position to the end of the list listOfPositions.addElement( new Point( e.getX(), e.getY() ) );

repaint(); e.consume(); } public void mouseDragged( MouseEvent e ) { }

public void paint( Graphics g ) { g.setColor( Color.white ); for ( int j = 1; j < listOfPositions.size(); ++j ) {

Point A = (Point)(listOfPositions.elementAt(j-1)); Point B = (Point)(listOfPositions.elementAt(j)); g.drawLine( A.x, A.y, B.x, B.y ); } }}

Move freely over the applet. Notice that moving faster makes the line stretch out longer.

Exercise 5: Keyboard Input

The source code:


public class Keyboard1 extends Applet implements KeyListener, MouseListener {

int width, height; int x, y; String s = "";


x = width/2; y = height/2;

addKeyListener( this ); addMouseListener( this ); }

public void keyPressed( KeyEvent e ) { } public void keyReleased( KeyEvent e ) { } public void keyTyped( KeyEvent e ) { char c = e.getKeyChar(); if ( c != KeyEvent.CHAR_UNDEFINED ) { s = s + c; repaint(); e.consume(); } }

public void mouseEntered( MouseEvent e ) { } public void mouseExited( MouseEvent e ) { } public void mousePressed( MouseEvent e ) { } public void mouseReleased( MouseEvent e ) { } public void mouseClicked( MouseEvent e ) { x = e.getX(); y = e.getY(); s = ""; repaint();

e.consume(); }

public void paint( Graphics g ) { g.setColor( Color.gray ); g.drawLine( x, y, x, y-10 ); g.drawLine( x, y, x+10, y ); g.setColor( Color.green ); g.drawString( s, x, y ); }}

Try clicking and typing into the applet. You'll probably have to click at least once before you begin typing, to give the applet the keyboard focus.

Go here for more information.

Here's a second applet that nicely integrates most of what we've learned so far.

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

public class Keyboard2 extends Applet implements KeyListener, MouseListener, MouseMotionListener {

int width, height; int N = 25; Color[] spectrum; Vector listOfPositions; String s = ""; int skip = 0;


spectrum = new Color[ N ]; for ( int i = 0; i < N; ++i ) { spectrum[i] = new Color( Color.HSBtoRGB(i/(float)N,1,1) ); }

listOfPositions = new Vector();

addKeyListener( this ); addMouseListener( this ); addMouseMotionListener( this ); }

public void keyPressed( KeyEvent e ) { } public void keyReleased( KeyEvent e ) { } public void keyTyped( KeyEvent e ) { char c = e.getKeyChar(); if ( c != KeyEvent.CHAR_UNDEFINED ) { s = s + c;

repaint(); e.consume(); } }

public void mouseEntered( MouseEvent e ) { } public void mouseExited( MouseEvent e ) { } public void mouseClicked( MouseEvent e ) { s = ""; repaint(); e.consume(); } public void mousePressed( MouseEvent e ) { } public void mouseReleased( MouseEvent e ) { } public void mouseMoved( MouseEvent e ) {

// only process every 5th mouse event if ( skip > 0 ) { -- skip; // this is shorthand for "skip = skip-1;" return; } else skip = 5;

if ( listOfPositions.size() >= N ) { // delete the first element in the list listOfPositions.removeElementAt( 0 ); }

// add the new position to the end of the list listOfPositions.addElement( new Point( e.getX(), e.getY() ) );


public void paint( Graphics g ) { if ( s != "" ) { for ( int j = 0; j < listOfPositions.size(); ++j ) { g.setColor( spectrum[ j ] ); Point p = (Point)(listOfPositions.elementAt(j)); g.drawString( s, p.x, p.y ); } } }}

Click, type, and move the mouse. You might see some flickering. Depending on the speed of your computer, you might also find that the mouse position is being sampled too quickly or too slowly. The upcoming lessons will give you tools to fix both of these problems.

Exercise 6: Threads and Animation

The only functions we have seen in applets so far are init(), paint(), and functions called in response to input events. All of these functions are supposed to do a small amount of work and

return quickly. There has been no opportunity, so far, for a function to loop and do some continuous work.

This applet creates a thread, a separate stream of execution, to perform a background task. The body of the thread's code is in the run() function. In this case, the purpose of the thread is to increment the variable i once every 1000 milliseconds, and cause the applet to redraw itself. The result is a simple animation.


public class Threads1 extends Applet implements Runnable {

int width, height; int i = 0; Thread t = null; boolean threadSuspended;

// Executed when the applet is first created. public void init() { System.out.println("init(): begin"); width = getSize().width; height = getSize().height; setBackground( Color.black ); System.out.println("init(): end"); }

// Executed when the applet is destroyed. public void destroy() { System.out.println("destroy()"); }

// Executed after the applet is created; and also whenever // the browser returns to the page containing the applet. public void start() { System.out.println("start(): begin"); if ( t == null ) { System.out.println("start(): creating thread"); t = new Thread( this ); System.out.println("start(): starting thread"); threadSuspended = false; t.start(); } else { if ( threadSuspended ) { threadSuspended = false; System.out.println("start(): notifying thread"); synchronized( this ) { notify(); } } } System.out.println("start(): end"); }

// Executed whenever the browser leaves the page containing the applet. public void stop() { System.out.println("stop(): begin"); threadSuspended = true; }

// Executed within the thread that this applet created. public void run() { System.out.println("run(): begin"); try { while (true) { System.out.println("run(): awake");

// Here's where the thread does some work ++i; // this is shorthand for "i = i+1;" if ( i == 10 ) { i = 0; } showStatus( "i is " + i );

// Now the thread checks to see if it should suspend itself if ( threadSuspended ) { synchronized( this ) { while ( threadSuspended ) { System.out.println("run(): waiting"); wait(); } } } System.out.println("run(): requesting repaint"); repaint(); System.out.println("run(): sleeping"); t.sleep( 1000 ); // interval given in milliseconds } } catch (InterruptedException e) { } System.out.println("run(): end"); }

// Executed whenever the applet is asked to redraw itself. public void paint( Graphics g ) { System.out.println("paint()"); g.setColor( Color.green ); g.drawLine( width, height, i * width / 10, 0 ); }}


The call to showStatus() in run() will cause the value of i to appear in the browser's status bar. If you open the Java Console of your browser (in Netscape 4.7, this is accessible under the Communicator|Tools submenu), you'll see the text printed by calls to System.out.println().

Unfortunately, the source code is complicated because the applet is supposed to suspend execution of the thread whenever the browser leaves the web page containing the applet, and resume execution upon return. This is done in the stop() and start() functions, respectively. Basically, the thread monitors the value of some variable, here called threadSuspended, that behaves like a flag. When the thread sees that it is supposed to suspend itself, it calls wait(), which blocks the thread and does not allow it to continue executing until the applet calls notify().

Strictly speaking, it is not necessary to suspend the thread at all, but failing to do so is somewhat irresponsible. The user's CPU could become bogged down with useless instructions to execute long after the browser has left the page containing the applet. Those tempted to forgo "proper" coding to make their applets simpler can use this as an example. When you run this applet, open the Java Console of your browser, and then leave the page the applet is on. Notice how messages continue to be printed out in the console, and the value of i continues to be displayed in the status bar, demonstrating that the thread is still running in the background.

For more information on threads, try here, here and here.

Exercise 7: Backbuffers

Up to this point, the graphics drawn by our applets have been relatively simple. With more complex graphics however, whether in animations or interactive programs, flicker can become a problem. (You may have already noticed subtle flickering in some of the previous applets.)

This example demonstrate the problem. It uses a pseudo-random number generator to produce a big, hairy tangle of lines. The lines follow the mouse cursor.

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

public class NoBackbuffer1 extends Applet implements MouseMotionListener {

int width, height; int mx, my; // the mouse coordinates Point[] points; int N = 300;



points = new Point[ N ]; for ( int i = 0; i < N; ++i ) { int x = (int)(( Math.random() - 0.5 ) * width / 1.5); int y = (int)(( Math.random() - 0.5 ) * height / 1.5); points[i] = new Point( x, y ); }

addMouseMotionListener( this ); }

public void mouseMoved( MouseEvent e ) { mx = e.getX(); my = e.getY(); showStatus( "Mouse at (" + mx + "," + my + ")" ); repaint(); e.consume(); }

public void mouseDragged( MouseEvent e ) { }

public void paint( Graphics g ) { g.setColor( Color.white ); for ( int j = 1; j < N; ++j ) { Point A = points[j-1]; Point B = points[j]; g.drawLine( mx+A.x, my+A.y, mx+B.x, my+B.y ); } }}

The output:

You probably see flickering when you move the mouse over the applet. The lines take a significant amount of time to draw, and since the canvas is cleared before each redraw, the image on the canvas is actually incomplete most of the time.

This second example makes the problem even more pronounced by rendering a bitmap image in the background.


public class NoBackbuffer2 extends Applet implements MouseMotionListener {

int width, height; int mx, my; // the mouse coordinates Point[] points; int N = 300; Image img;




// Download the image "fractal.gif" from the // same directory that the applet resides in. img = getImage( getDocumentBase(), "fractal.gif" );


public void mouseMoved( MouseEvent e ) { mx = e.getX(); my = e.getY(); showStatus( "Mouse at (" + mx + "," + my + ")" ); repaint(); e.consume(); } public void mouseDragged( MouseEvent e ) { }

public void paint( Graphics g ) { g.drawImage( img, 0, 0, this ); g.setColor( Color.white ); for ( int j = 1; j < N; ++j ) { Point A = points[j-1]; Point B = points[j]; g.drawLine( mx+A.x, my+A.y, mx+B.x, my+B.y ); } }}

The output:

The flickering you see now should be especially bad.

The solution is to use double-buffering : rather than perform drawing operations directly to screen, we draw onto an image buffer (the "backbuffer") in memory, and only after completing this image do we copy it onto the screen. There is no need to erase or clear the contents of the screen before copying (or "swapping", as it's called) the backbuffer onto the screen. During the swap, we simply overwrite the image on the screen. Hence the screen never displays a partial image: even in the middle of swapping, the screen will contain 50 % of the old image and 50 % of the new image. As long as the swap is not too slow, the eye is fooled into seeing a continuous, smooth flow of images.

This example uses a backbuffer.


public class Backbuffer1 extends Applet implements MouseMotionListener {

int width, height; int mx, my; // the mouse coordinates Point[] points; int N = 300; Image img; Image backbuffer; Graphics backg;

public void init() { width = getSize().width; height = getSize().height;

setBackground( Color.black );



img = getImage(getDocumentBase(), "fractal.gif");

backbuffer = createImage( width, height ); backg = backbuffer.getGraphics(); backg.setColor( Color.white );


public void mouseMoved( MouseEvent e ) { mx = e.getX(); my = e.getY(); showStatus( "Mouse at (" + mx + "," + my + ")" );

backg.drawImage( img, 0, 0, this ); for ( int j = 1; j < N; ++j ) { Point A = points[j-1]; Point B = points[j]; backg.drawLine( mx+A.x, my+A.y, mx+B.x, my+B.y ); }


public void paint( Graphics g ) { g.drawImage( backbuffer, 0, 0, this ); }}

The output:

Why do we still see flicker ? Whenever the applet is supposed to redraw itself, the applet's update() function gets called. The java.awt.Component class (which is a base class of Applet) defines a default version of update() which does the following: (1) clears the applet by filling it with the background color, (2) sets the color of the graphics context to be the applet's foreground color, (3) calls the applet'spaint() function. We see flickering because the canvas is still cleared before each redraw. To prevent this, we need to define our own update() function, to override the base class' behavior.


import java.lang.Math;

public class Backbuffer2 extends Applet implements MouseMotionListener {

int width, height; int mx, my; // the mouse coordinates Point[] points; int N = 300; Image img; Image backbuffer; Graphics backg;




img = getImage(getDocumentBase(), "fractal.gif");

backbuffer = createImage( width, height ); backg = backbuffer.getGraphics(); backg.setColor( Color.white );


public void mouseMoved( MouseEvent e ) { mx = e.getX(); my = e.getY(); showStatus( "Mouse at (" + mx + "," + my + ")" );

backg.drawImage( img, 0, 0, this ); for ( int j = 1; j < N; ++j ) { Point A = points[j-1]; Point B = points[j]; backg.drawLine( mx+A.x, my+A.y, mx+B.x, my+B.y ); }


public void update( Graphics g ) { g.drawImage( backbuffer, 0, 0, this ); }

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

Now there should be no apparent flicker:

Update (January 2008): I received the following email message that might be useful to some readers.

Hello,

I recently read your Java Applet Tutorial, it really helped me to understandbasics of java applets, especially backbuffers.Although i had a problem with smooth animating - quickly moving objectsweren't rendered smoothly.I thought I've made a mistake implementing backbuffer stuff, but (after afew hours) i realized that it's everything finewith this applet when it's ran on Windows.The strange behaviour was that when I was moving mouse cursor over theapplet, the animation became smooth.After another few hours i found getToolkit.sync() method which forcesrefreshing applet in window system.The tricky part is that you can't see any difference using Windows, but thedifference is clear in Xorg window system.maybe you could consider adding a line in your tutorial, maybe someone willsave some time, next time :)

public void update( Graphics g ) { g.drawImage( backbuffer, 0, 0, this );>>>>>>getToolkit().sync(); }

anywaysthank you for your work

Artur Wielogórski(student @Poznan University of Technology)

Exercise 8: Painting

In addition to reducing flicker, a backbuffer can be used to store the accumulated results of drawing operations. We can easily implement a canvas-and-brush applet:


public class Brush1 extends Applet implements MouseMotionListener {

int width, height; Image backbuffer; Graphics backg;

public void init() {

width = getSize().width; height = getSize().height;

backbuffer = createImage( width, height ); backg = backbuffer.getGraphics(); backg.setColor( Color.black ); backg.fillRect( 0, 0, width, height ); backg.setColor( Color.white );


public void mouseMoved( MouseEvent e ) { } public void mouseDragged( MouseEvent e ) { int x = e.getX(); int y = e.getY(); backg.fillOval(x-5,y-5,10,10); repaint(); e.consume(); }



Click and drag over the applet to paint:

Another example:


public class Keyboard3 extends Applet implements KeyListener, MouseListener {

int width, height; int x, y; String s = ""; Image backbuffer; Graphics backg;


x = width/2; y = height/2;

backbuffer = createImage( width, height ); backg = backbuffer.getGraphics(); backg.setColor( Color.black );

backg.fillRect( 0, 0, width, height ); backg.setColor( Color.green );

addKeyListener( this ); addMouseListener( this ); }

public void keyPressed( KeyEvent e ) { } public void keyReleased( KeyEvent e ) { } public void keyTyped( KeyEvent e ) { char c = e.getKeyChar(); if ( c != KeyEvent.CHAR_UNDEFINED ) { s = s + c; backg.drawString( s, x, y ); repaint(); e.consume(); } }

public void mouseEntered( MouseEvent e ) { } public void mouseExited( MouseEvent e ) { } public void mousePressed( MouseEvent e ) { } public void mouseReleased( MouseEvent e ) { } public void mouseClicked( MouseEvent e ) { x = e.getX(); y = e.getY(); s = ""; repaint(); e.consume(); }

public void update( Graphics g ) { g.drawImage( backbuffer, 0, 0, this ); g.setColor( Color.gray ); g.drawLine( x, y, x, y-10 ); g.drawLine( x, y, x+10, y ); }


Click and type; click again and type some more:

A third example:


public class Brush2 extends Applet implements MouseMotionListener {

int width, height; Image backbuffer; Graphics backg;

int mx, my;

double t = 0;


mx = width / 2; my = height / 2;

backbuffer = createImage( width, height ); backg = backbuffer.getGraphics(); backg.setColor( Color.black ); backg.fillRect( 0, 0, width, height ); backg.setColor( Color.white );


public void mouseMoved( MouseEvent e ) { } public void mouseDragged( MouseEvent e ) { int x = e.getX(); int y = e.getY(); int dx = x - mx; int dy = y - my; t += Math.sqrt( dx*dx + dy*dy ) / 20; if ( t > 2*Math.PI ) { t -= 2*Math.PI; } backg.drawLine( x, y, x+(int)(15*Math.cos(t)), y+(int)(15*Math.sin(t)) ); mx = x; my = y; repaint(); e.consume(); }



Programming a custom brush and canvas enables experimentation with behaviors not otherwise possible. An understanding of arithmetic, geometry, and trigonometry will enhance your own ability to "play" in this medium.

Exercise 9: Clocks

The source code:

import java.applet.*;import java.awt.*;import java.util.*;import java.text.*;

public class Clock1 extends Applet implements Runnable {

int width, height; Thread t = null; boolean threadSuspended; int hours=0, minutes=0, seconds=0; String timeString = "";


public void start() { if ( t == null ) { t = new Thread( this ); t.setPriority( Thread.MIN_PRIORITY ); threadSuspended = false; t.start(); } else { if ( threadSuspended ) { threadSuspended = false; synchronized( this ) { notify(); } } } }

public void stop() { threadSuspended = true; }

public void run() { try { while (true) {

// Here's where the thread does some work Calendar cal = Calendar.getInstance(); hours = cal.get( Calendar.HOUR_OF_DAY ); if ( hours > 12 ) hours -= 12; minutes = cal.get( Calendar.MINUTE ); seconds = cal.get( Calendar.SECOND );

SimpleDateFormat formatter = new SimpleDateFormat( "hh:mm:ss", Locale.getDefault() ); Date date = cal.getTime(); timeString = formatter.format( date );

// Now the thread checks to see if it should suspend itself if ( threadSuspended ) { synchronized( this ) { while ( threadSuspended ) { wait(); } }

} repaint(); t.sleep( 1000 ); // interval given in milliseconds } } catch (InterruptedException e) { } }

void drawHand( double angle, int radius, Graphics g ) { angle -= 0.5 * Math.PI; int x = (int)( radius*Math.cos(angle) ); int y = (int)( radius*Math.sin(angle) ); g.drawLine( width/2, height/2, width/2 + x, height/2 + y ); }

void drawWedge( double angle, int radius, Graphics g ) { angle -= 0.5 * Math.PI; int x = (int)( radius*Math.cos(angle) ); int y = (int)( radius*Math.sin(angle) ); angle += 2*Math.PI/3; int x2 = (int)( 5*Math.cos(angle) ); int y2 = (int)( 5*Math.sin(angle) ); angle += 2*Math.PI/3; int x3 = (int)( 5*Math.cos(angle) ); int y3 = (int)( 5*Math.sin(angle) ); g.drawLine( width/2+x2, height/2+y2, width/2 + x, height/2 + y ); g.drawLine( width/2+x3, height/2+y3, width/2 + x, height/2 + y ); g.drawLine( width/2+x2, height/2+y2, width/2 + x3, height/2 + y3 ); }

public void paint( Graphics g ) { g.setColor( Color.gray ); drawWedge( 2*Math.PI * hours / 12, width/5, g ); drawWedge( 2*Math.PI * minutes / 60, width/3, g ); drawHand( 2*Math.PI * seconds / 60, width/2, g ); g.setColor( Color.white ); g.drawString( timeString, 10, height-10 ); }}


Note that the time displayed in the lower left corner may not be correct -- certain browsers (perhaps only older versions?) seem to interpret the "default" time zone as something different from the local time zone. (The hands, however, always seem to display the correct time.) If this problem bothers you, try using

timeString = date.toString();

instead of

timeString = formatter.format( date );

Exercise 10: Playing with Text

under construction ...

Font font = new Font( "Monospaced", Font.PLAIN, 12 );

Graphics g; g.setFont( font );

FontMetrics fm = getFontMetrics( font );

int charWidth = fm.charWidth('W'); int charHeight = fm.getHeight();

String s = "whatever"; int stringWidth = fm.stringWidth( s );

Exercise 11: 3D Graphics

The source code:


class Point3D { public int x, y, z; public Point3D( int X, int Y, int Z ) { x = X; y = Y; z = Z; }}

class Edge { public int a, b; public Edge( int A, int B ) { a = A; b = B; }}

public class WireframeViewer extends Applet implements MouseListener, MouseMotionListener {

int width, height; int mx, my; // the most recently recorded mouse coordinates

Image backbuffer; Graphics backg;

int azimuth = 35, elevation = 30;

Point3D[] vertices; Edge[] edges;


vertices = new Point3D[ 8 ]; vertices[0] = new Point3D( -1, -1, -1 );

vertices[1] = new Point3D( -1, -1, 1 ); vertices[2] = new Point3D( -1, 1, -1 ); vertices[3] = new Point3D( -1, 1, 1 ); vertices[4] = new Point3D( 1, -1, -1 ); vertices[5] = new Point3D( 1, -1, 1 ); vertices[6] = new Point3D( 1, 1, -1 ); vertices[7] = new Point3D( 1, 1, 1 );

edges = new Edge[ 12 ]; edges[ 0] = new Edge( 0, 1 ); edges[ 1] = new Edge( 0, 2 ); edges[ 2] = new Edge( 0, 4 ); edges[ 3] = new Edge( 1, 3 ); edges[ 4] = new Edge( 1, 5 ); edges[ 5] = new Edge( 2, 3 ); edges[ 6] = new Edge( 2, 6 ); edges[ 7] = new Edge( 3, 7 ); edges[ 8] = new Edge( 4, 5 ); edges[ 9] = new Edge( 4, 6 ); edges[10] = new Edge( 5, 7 ); edges[11] = new Edge( 6, 7 );

backbuffer = createImage( width, height ); backg = backbuffer.getGraphics(); drawWireframe( backg );


void drawWireframe( Graphics g ) {

// compute coefficients for the projection double theta = Math.PI * azimuth / 180.0; double phi = Math.PI * elevation / 180.0; float cosT = (float)Math.cos( theta ), sinT = (float)Math.sin( theta ); float cosP = (float)Math.cos( phi ), sinP = (float)Math.sin( phi ); float cosTcosP = cosT*cosP, cosTsinP = cosT*sinP, sinTcosP = sinT*cosP, sinTsinP = sinT*sinP;

// project vertices onto the 2D viewport Point[] points; points = new Point[ vertices.length ]; int j; int scaleFactor = width/4; float near = 3; // distance from eye to near plane float nearToObj = 1.5f; // distance from near plane to center of object for ( j = 0; j < vertices.length; ++j ) { int x0 = vertices[j].x; int y0 = vertices[j].y; int z0 = vertices[j].z;

// compute an orthographic projection float x1 = cosT*x0 + sinT*z0; float y1 = -sinTsinP*x0 + cosP*y0 + cosTsinP*z0;

// now adjust things to get a perspective projection float z1 = cosTcosP*z0 - sinTcosP*x0 - sinP*y0; x1 = x1*near/(z1+near+nearToObj); y1 = y1*near/(z1+near+nearToObj);

// the 0.5 is to round off when converting to int points[j] = new Point(

(int)(width/2 + scaleFactor*x1 + 0.5), (int)(height/2 - scaleFactor*y1 + 0.5) ); }

// draw the wireframe g.setColor( Color.black ); g.fillRect( 0, 0, width, height ); g.setColor( Color.white ); for ( j = 0; j < edges.length; ++j ) { g.drawLine( points[ edges[j].a ].x, points[ edges[j].a ].y, points[ edges[j].b ].x, points[ edges[j].b ].y ); } }

public void mouseEntered( MouseEvent e ) { } public void mouseExited( MouseEvent e ) { } public void mouseClicked( MouseEvent e ) { } public void mousePressed( MouseEvent e ) { mx = e.getX(); my = e.getY(); e.consume(); } public void mouseReleased( MouseEvent e ) { } public void mouseMoved( MouseEvent e ) { } public void mouseDragged( MouseEvent e ) { // get the latest mouse position int new_mx = e.getX(); int new_my = e.getY();

// adjust angles according to the distance travelled by the mouse // since the last event azimuth -= new_mx - mx; elevation += new_my - my;

// update the backbuffer drawWireframe( backg );

// update our data mx = new_mx; my = new_my;

repaint(); e.consume(); }

public void update( Graphics g ) { g.drawImage( backbuffer, 0, 0, this ); showStatus("Elev: "+elevation+" deg, Azim: "+azimuth+" deg"); }


Notice that the compiler generates 3 .class files: one for each of the classes defined.

Click and drag on the applet to rotate the cube.

Exercise 12: Odds and Ends

Audio

To play audio files, use Applet.play(). Java 1.1 only supports Sun Audio (.au) files, or specifically, 8 bit, u-law, 8000 Hz, one-channel Sun format. Both Applet.play() and AudioClip.play() are non-blocking: they return immediately after starting the playback of the audio file. Try here for an example.

Applet Info

You can embed information about your applet inside itself by defining getAppletInfo() and getParameterInfo().

Debugging Tips

If you're having trouble understanding what your applet is doing (or not doing), use System.out.println() and showStatus() to print out the values of variables and information about where the program is.

Browsers won't normally reload applets after they've been loaded once. If you test an applet inside your browser, and then modify the applet's source code and recompile, simply reloading the webpage in your browser isn't enough to view the new applet. You'll have to exit and restart your browser. To avoid this nuisance, do initial testing of applets with appletviewer rather than a web browser.

Conditional Compilation

In C, blocks of code can be conditionally compiled using #define flags thus:

#define FLAG 1...#ifdef FLAG...#else...#endif

Java is not as flexible, but allows for something that is sometimes just as good:

private static final boolean DEBUG = false;...if ( DEBUG ) { ...}else { ...}

The final keyword means the variable is constant, so unless your compiler's optimizer is brain-dead, it should prune out the conditional and the unreachable block of code.

import java.applet.*;import java.awt.*;import java.lang.Math; public class ArchimedianSpiral extends Applet { int width, height; int N = 30; // number of points per full rotation int W = 5; // winding number, or number of full rotations public void init() {

width = getSize().width; height = getSize().height; setBackground( Color.black ); setForeground( Color.green ); } public void paint( Graphics g ) {

int x1 = 0, y1 = 0, x2, y2; for ( int i = 1; i <= W*N; ++i ) { double angle = 2*Math.PI*i/(double)N; double radius = i/(double)N * width/2 / (W+1); x2 = (int)( radius*Math.cos(angle) ); y2 = -(int)( radius*Math.sin(angle) ); g.drawLine( width/2+x1, height/2+y1, width/2+x2, height/2+y2 ); x1 = x2; y1 = y2; } }}

Documents

Java Applet Tutorial