Swet - 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 Lines
2 Drawing Other Stuff
3 Color - introduces arrays
4 Mouse Input - introduces showStatus( ) and Vector
5 Keyboard Input
6 Threads and Animation - introduces System.out.println( )
Backbuffers - introduces Math.random( ) and Graphics.drawImage( )
7
8 Painting
9 Clocks
10
Playing with Text - introduces 2D arrays and hyperlinks
11
3D Graphics - introduces classes
12
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 Graphics by 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, and Introduction 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 !
This tutorial is ( C ) 2000 Michael McGuffin, all rights reserved.
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.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.

// Store the height and width of the applet for future

reference.
// Make the default background color black.

}
// This gets executed whenever the applet is asked to redraw

itself.
// Set the current drawing color to 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.
}
}
}
[ Home | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 ]
Exercise 2: Drawing Other Stuff
The source code:
import java.awt.*;
public class DrawingStuff extends Applet {
int width, height;

}
// 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.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 width pixels 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+1 pixels.
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:
import java.awt.*;
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

// 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.awt.*;
import java.lang.Math;
public class DrawingWithColor2 extends Applet {
int width, height;

int N = 25;
Color[] spectrum;

// 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.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;
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();
repaint();
e.consume();
}

if ( isButtonPressed ) {
}
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:
import java.awt.*;

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();
}
}

g.fillRect( x, y, 40, 40 );
}
}
Try clicking and dragging on the gray square:
A third example:
import java.awt.*;
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 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 ) { }

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:
import java.awt.*;
public class Keyboard1 extends Applet

implements KeyListener, MouseListener {
int width, height;

int x, y;
String s = "";

x = width/2;
y = height/2;
addKeyListener( 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();
}
}

x = e.getX();
y = e.getY();
s = "";
repaint();
e.consume();
}

g.drawLine( x, y, x, y-10 );
g.drawLine( x, y, x+10, y );
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.awt.*;
import java.util.Vector;

implements KeyListener, MouseListener, MouseMotionListener {
int width, height;

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


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

s = s + c;
repaint();
e.consume();
}
}

s = "";
repaint();
e.consume();
}
// 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() ) );
repaint();
e.consume();
}

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.
import java.awt.*;
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.
System.out.println("init(): begin");
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 ) {
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
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.

System.out.println("paint()");
}
}
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.awt.*;
public class NoBackbuffer1 extends Applet

implements MouseMotionListener {
int width, height;

Point[] points;
int N = 300;

mx = width/2;
my = height/2;
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 );
}
}

mx = e.getX();
my = e.getY();
repaint();
e.consume();
}

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.
import java.awt.*;
public class NoBackbuffer2 extends Applet

int width, height;

Point[] points;
int N = 300;
Image img;

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

for ( int i = 0; i < N; ++i ) {
}
// Download the image "fractal.gif" from the

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

mx = e.getX();
my = e.getY();
repaint();
e.consume();
}

g.drawImage( img, 0, 0, this );
for ( int j = 1; j < N; ++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.

import java.awt.*;
public class Backbuffer1 extends Applet

int width, height;

Point[] points;
int N = 300;
Image img;
Image backbuffer;
Graphics backg;

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

for ( int i = 0; i < N; ++i ) {
}
img = getImage(getDocumentBase(), "fractal.gif");
backbuffer = createImage( width, height );

backg = backbuffer.getGraphics();
backg.setColor( Color.white );
}

mx = e.getX();
my = e.getY();
backg.drawImage( img, 0, 0, this );

for ( int j = 1; j < N; ++j ) {
backg.drawLine( mx+A.x, my+A.y, mx+B.x, my+B.y );
}
repaint();
e.consume();
}

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's
paint() 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.awt.*;
public class Backbuffer2 extends Applet

int width, height;

Point[] points;
int N = 300;
Image img;
Image backbuffer;
Graphics backg;

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

for ( int i = 0; i < N; ++i ) {
int x = (int)(( Math.random() - 0.5 ) *
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:
import java.awt.*;
public class Brush1 extends Applet

int width, height;

Image backbuffer;
Graphics backg;


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

int x = e.getX();
int y = e.getY();
backg.fillOval(x-5,y-5,10,10);
repaint();
e.consume();
}
public void update( Graphics g ) {

}

update( g );
}
}
Click and drag over the applet to paint:
Another example:
import java.awt.*;

implements KeyListener, MouseListener {
int width, height;

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

x = width/2;
y = height/2;
backg.setColor( Color.green );
}

s = s + c;
backg.drawString( s, x, y );
repaint();
e.consume();
}
}

x = e.getX();
y = e.getY();
s = "";
repaint();
e.consume();
}

g.drawLine( x, y, x, y-10 );
g.drawLine( x, y, x+10, y );
}

update( g );
}
}
Click and type; click again and type some more:
A third example:
import java.awt.*;
public class Brush2 extends Applet

int width, height;

Image backbuffer;
Graphics backg;
int mx, my;

double t = 0;

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

}

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();
}

}

update( g );
}
}
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.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 );
t.start();
}
else {
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
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;
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;
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 );
}

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.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:
import java.awt.*;
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

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[10] = new Edge( 5, 7 );
edges[11] = new Edge( 6, 7 );

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.fillRect( 0, 0, width, height );
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 mousePressed( MouseEvent e ) {
mx = e.getX();
my = e.getY();
e.consume();
}
// 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();
}

showStatus("Elev: "+elevation+" deg, Azim: "+azimuth+" deg");
}

update( g );
}
}
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.awt.*;
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
setForeground( Color.green );
}
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;
}
}
}

Swet - Java Applet Tutorial

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Swet - Java Applet Tutorial

Caricato da

Copyright:

Formati disponibili

Java Applet Tutorial

This site is meant to be a quick-and-dirty introduction to writing Java applets. A set of

This tutorial is ( C ) 2000 Michael McGuffin, all rights reserved.

Exercise 1: Drawing Lines

public class DrawingLines extends Applet {

int width, height;

public void init() {

public void paint( Graphics g ) {

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

// The applet's class name must be identical to the filename.

// Declare two variables of type "int" (integer).

// This gets executed when the applet starts.

// Store the height and width of the applet for future

// Make the default background color black.

// This gets executed whenever the applet is asked to redraw

// Set the current drawing color to green.

// Draw ten lines using a loop.

// The "drawLine" routine requires 4 numbers:

public class DrawingStuff extends Applet {

int width, height;

public void init() {

public void paint( Graphics g ) {

// As we learned in the last lesson,

The resulting applet looks like this:

public class DrawingWithColor1 extends Applet {

int width, height;

public void init() {

// Allocate the arrays; make them "N" elements long

// Generate the colors and store them in the arrays.

// As i goes from 1 to N, this color goes from almost black to white.

public void paint( Graphics g ) {

The resulting applet:

public class DrawingWithColor2 extends Applet {

int width, height;

public void init() {

spectrum = new Color[ N ];

// Generate the colors and store them in the array.

public void paint( Graphics g ) {

// Compute (x,y) positions along a circle,

Exercise 4: Mouse Input

public class Mouse1 extends Applet

int width, height;

public void init() {

public void mouseEntered( MouseEvent e ) {

public void paint( Graphics g ) {

public class Mouse2 extends Applet

int width, height;

public void init() {

public void mouseEntered( MouseEvent e ) { }

// displace the box by the distance the mouse moved since

// update our data

public void paint( Graphics g ) {

Try clicking and dragging on the gray square:

public class Mouse3 extends Applet

int width, height;

// We need a place to store a list of mouse positions.

public void init() {

listOfPositions = new Vector();

public void mouseEntered( MouseEvent e ) { }

// add the new position to the end of the list

public void paint( Graphics g ) {

Exercise 5: Keyboard Input