The Web has come a long way since 1992. Now graphics are very common (and sometimes a bit annoying). With the release of Netscape, server-push animation became possible, although it was slow and awkward. This server-push animation is not practical for animations of any significant length and has never really been used for much other than novelty purposes. But with Java, the possibility for real-time animations is a reality.
Visual enhancements are some of the simplest applets to program and use. Often these applets are simply variations of image viewers, but you can create surprisingly different applets using the techniques required to make an image viewer. For example, the following applets can be created by displaying and manipulating images:- A clock
- A applet to create an interactive demonstration
- An interactive animation
- A photo viewer
Clock Applets
The Web is global entity and is certainly not limited to any specific geographic area or time zone. In fact, the global aspect of the Web is one of its most appealing factors. Java applets can help enhance the global nature of the Web.Many Web pages have begun to incorporate snapshots of the weather outside or other forms of local information. Silly as it may seem, the local time is one of the most basic forms of local information and can be a very useful navigation device. The following Java clocks can be used to show time information on your Web page:
Clock | |
Written by Nils Hedström | |
http://www.webbasedprogramming.com/Creating-Web-Applets-with-Java/tppmsgs/msgs0.htm#21 | |
WorldClock | |
Written by Vijay Vaidy | |
http://www.webbasedprogramming.com/Creating-Web-Applets-with-Java/tppmsgs/msgs0.htm#22 |
The first clock uses graphic images to draw the hands of an analog clock (see Figure 4.1). The second clock has no graphical enhancements and displays the time and date information using text (see Figure 4.2).
Figure 4.1. A clock is an example of an informative applet.
Figure 4.2. A simple clock applet showing times at various locations around the world.
Listing 4.1 shows some of the Java code used to produce the clock in Figure 4.1.
public class Clock extends java.applet.Applet implements Runnable { int width,height,num_lines,sleep,timezone,backgroundType; Polygon clockBackground; URL homepage; private Needle hour,minute,second; double pi=3.1415926535f; Color clockBackground_col,clockBackgroundBorder_col,backgroundBorder_col,background_col; Thread animate=null; Image backBuffer; Image backgroundImage; Graphics backGC; public void run() //Run the applet { while (true) { updateNeedles(); repaint(); try {Thread.sleep(sleep);} catch (InterruptedException e){} } } public void makeClockBackground() // Creates a polygon-background with num_lines-corners { double add,count; clockBackground=new Polygon(); add=2.*pi/num_lines; for(count=0;count<=2.*pi;count+=add) { clockBackground.addPoint(size().width/2+(int)(size().width*Math.cos(count)/2.), size().height/2+(int)(size().height*Math.sin(count)/2.)); } } public void drawClockBackground(Graphics g) // Draws the background of the Clock { if(backgroundType!=1) { g.setColor(clockBackground_col); g.fillPolygon(clockBackground); g.setColor(clockBackgroundBorder_col); g.drawPolygon(clockBackground); } if(backgroundType!=0) { int img_width=backgroundImage.getWidth(null); int img_height=backgroundImage.getHeight(null); int x=(size().width-img_width)/2; int y=(size().height-img_height)/2; if (x<0) x=0; if(y<0) y=0; if((img_width!=-1) && (img_height!=-1)) g.drawImage(backgroundImage,x,y,null); } } public void start() // When the applet is started { if (animate == null) { animate = new Thread(this); animate.start(); } } public void stop() // When the applet is stopped { if (animate != null) { animate.stop(); animate=null; } }A clock applet requires quite a bit of code. Listing 4.1 shows only a third of the code needed to produce the entire clock shown in Figure 4.1. The applet developer must also provide the images used to make up the clock face and hands and the animation that keeps the hands moving and keeping accurate time. The code shown in Listing 4.1 should give you an idea about what's involved in creating Java applets. Java applets are full-fledged programs, and as such, they require some time and planning to create them.
Juggling Applet
Applets can also be used for educational purposes or to inform users about how to accomplish tasks by means of demonstration. Rather than just listing a number of steps, applets can visually demonstrate how to do something. For some topics, a visual demonstration is far more effective than a verbal explanation. The following applet is an example of how you can use graphics and animation to demonstrate concepts (see Figure 4.3):Juggling Applet | |
Written by Christopher Sequin | |
http://www.webbasedprogramming.com/Creating-Web-Applets-with-Java/tppmsgs/msgs0.htm#23 |
Figure 4.3. The Juggling Applet is an example of how applets can be used for interactive educational purposes.
Listing 4.2 shows the code for the Juggling Applet. Keep in mind that this code does quite a bit. It lets the user configure the number of balls used in the demonstration, it animates the hands, and it animates the balls along the correct paths. Don't worry about compiling this code, the applet is included on the CD-ROM. The listing is just provided to give you an example of some real Java code.
/* * @(#)Juggling.java 1.0f 95/05/01 Chris Seguin * E-mail: seguin@uiuc.edu * * Copyright 1995 University of Illinois (UIUC) */ import java.io.InputStream; import java.awt.*; import java.net.*; /** * JugglingImages class. This is a container for a list * of images that are animated. * * @author Chris Seguin * @version 1.0f, May 1, 1995 */ class JugglingImages { /** * The images. */ Image imgs[]; /** * The number of images actually loaded. */ int nImagesCount = 0; /** * Load the images, from dir. The images are assumed to be * named T1.gif, T2.gif... */ JugglingImages(URL context, String dir, Juggling parent) { nImagesCount = 0; imgs = new Image[10]; int nWidth = 0; for (int i = 1; i < imgs.length; i++) { Image im = parent.getImage(parent.getDocumentBase(), dir + "/T" + i + ".gif"); imgs[nImagesCount++] = im; } } } /** * BallPaths class. This is a container for a path * of juggling balls * * @author Chris Seguin * @version 1.0f, May 1, 1995 */ class BallPaths { /** * Arrays containing the path of the balls */ int pnX[] = {0}; int pnY[] = {0}; int nLength = 1; /** * LookupX - looks up the appropriate value of X */ public int LookupX (int nIndex) { if ((nIndex > nLength) || (nIndex < 0)) return 0; return pnX[nIndex]; } /** * LookupY - looks up the appropriate value of Y */ public int LookupY (int nIndex) { if ((nIndex > nLength) || (nIndex < 0)) return 0; return pnY[nIndex]; } /** * Length - the number of data points stored in the path */ public int Length () { return nLength; } } /** * CascadeBallPaths class. This is a container for a path * of juggling balls, the balls are moving in a standard * cascade pattern * * @author Chris Seguin * @version 1.0f, May 1, 1995 */ class CascadeBallPaths extends BallPaths { /** * Arrays containing the path of the balls */ int pnX[] = { 20, 24, 27, 31, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120, 125, 130, 135, 143, 144, 141, 138, 134, 130, 126, 123, 119, 115, 110, 105, 100, 95, 90, 85, 80, 75, 70, 65, 60, 55, 50, 45, 40, 35, 30, 25, 20, 15, 7, 6, 9, 12, 16 }; int pnY[] = { 76, 78, 76, 70, 60, 60, 50, 42, 34, 28, 22, 18, 14, 12, 10, 10, 10, 12, 14, 18, 22, 28, 34, 42, 50, 66, 68, 70, 72, 74, 76, 78, 76, 70, 60, 60, 50, 42, 34, 28, 22, 18, 14, 12, 10, 10, 10, 12, 14, 18, 22, 28, 34, 42, 50, 66, 68, 70, 72, 74 }; /** * The length of the arrays */ int nLength = 60; /** * LookupX - looks up the appropriate value of X */ public int LookupX (int nIndex) { if ((nIndex >= nLength) || (nIndex < 0)) return 0; return pnX[nIndex]; } /** * LookupY - looks up the appropriate value of Y */ public int LookupY (int nIndex) { if ((nIndex >= nLength) || (nIndex < 0)) return 0; return pnY[nIndex]; } /** * Length - the number of data points stored in the path */ public int Length () { return nLength; } } /** * ReverseCascadeBallPaths class. This is a container * for a path of juggling balls, the balls are moving * in a reverse cascade pattern * * @author Chris Seguin * @version 1.0f, May 1, 1995 */ class ReverseCascadeBallPaths extends BallPaths { /** * Arrays containing the path of the balls */ int pnX[] = { 12, 9, 6, 3, 0, 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 103, 106, 109, 112, 115, 118, 121, 124, 127, 130, 125, 120, 115, 110, 105, 100, 95, 90, 85, 80, 75, 70, 65, 60, 55, 50, 45, 40, 35, 27, 24, 21, 18, 15 }; int pnY[] = { 60, 60, 60, 60, 60, 60, 51, 42, 35, 28, 23, 18, 15, 12, 11, 10, 11, 12, 15, 18, 23, 28, 35, 42, 51, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 51, 42, 35, 28, 23, 18, 15, 12, 11, 10, 11, 12, 15, 18, 23, 28, 35, 42, 51, 60, 60, 60, 60, 60 }; /** * The length of the arrays */ int nLength = 60; /** * LookupX - looks up the appropriate value of X */ public int LookupX (int nIndex) { if ((nIndex >= nLength) || (nIndex < 0)) return 0; return pnX[nIndex]; } /** * LookupY - looks up the appropriate value of Y */ public int LookupY (int nIndex) { if ((nIndex >= nLength) || (nIndex < 0)) return 0; return pnY[nIndex]; } /** * Length - the number of data points stored in the path */ public int Length () { return nLength; } } /** * JugglingBall class. This is a juggling ball * * @author Chris Seguin * @version 1.0f, May 1, 1995 */ class JugglingBall { /** * The location on the ball's path */ int nCycleSlot; /** * The color of the ball - specified by an index into the ball array */ int nBallColor; /** * The current location of the ball */ int nX; int nY; /** * The path to follow */ BallPaths ptbpPath; /** * JugglingBall - creates a juggling ball */ public JugglingBall (int nStartPos, int nStartColor, BallPaths ptbpThePath) { nCycleSlot = nStartPos; nBallColor = nStartColor; ptbpPath = ptbpThePath; nX = ptbpPath.LookupX(nStartPos); nY = ptbpPath.LookupY(nStartPos); } /** * Move - moves the ball to the next location */ public void Move () { nCycleSlot++; if ((nCycleSlot >= ptbpPath.Length ()) || (nCycleSlot <= 0)) { nCycleSlot = 0; } nX = ptbpPath.LookupX(nCycleSlot); nY = ptbpPath.LookupY(nCycleSlot); } /** * XLoc - returns the x location */ public int XLoc () { return nX; } /** * YLoc - returns the Y location */ public int YLoc () { return nY; } /** * Color - returns the color */ public int Color () { return nBallColor; } } /** * HandPath class. This is a container for the paths of the hands * * @author Chris Seguin * @version 1.0f, May 3, 1995 */ class HandPath { /** * Arrays containing the path of the hands */ int pnLeftHandX[] = { 7, 6, 9, 12, 16, 20, 24, 27, 31, 35, 35, 31, 27, 24, 20, 16, 12, 9, 6, 7 }; int pnRightHandX[] = { 143, 144, 141, 138, 134, 130, 126, 123, 119, 115, 115, 119, 123, 126, 130, 134, 138, 141, 144, 143 }; int pnHandY[] = { 73, 75, 77, 79, 81, 83, 85, 83, 77, 67, 67, 57, 51, 49, 51, 53, 55, 57, 59, 61 }; /** * The length of the arrays */ int nLength = 60; int nBalls = 0; /** * HandPath - creates a hand path */ public HandPath (int nStartBalls) { nBalls = nStartBalls; } /** * LookupX - looks up the appropriate value of X */ public int LookupX (int nIndex, boolean bLeft) { if ((nIndex >= nLength) || (nIndex < 0)) return 0; // Limit the lookup to the range if (nIndex >= 20 * nBalls) nIndex = 19; while (nIndex >= 20) nIndex -= 20; // Look up the value if (bLeft) return pnLeftHandX[nIndex]; else return pnRightHandX[nIndex]; } /** * LookupY - looks up the appropriate value of Y */ public int LookupY (int nIndex) { if ((nIndex >= nLength) || (nIndex < 0)) return 0; // Limit the lookup to the range if (nIndex >= 20 * nBalls) nIndex = 19; while (nIndex >= 20) nIndex -= 20; // Look up the value return pnHandY[nIndex]; } /** * Length - the number of data points stored in the path */ public int Length () { return nLength; } } /** * Hand class. This is a hand * * @author Chris Seguin * @version 1.0f, May 3, 1995 */ class Hand { /** * The location on the ball's path */ int nCycleSlot; /** * Whether this is the left hand */ boolean bLeft; /** * The current location of the ball */ int nX; int nY; /** * The path to follow */ HandPath phPath; /** * Hand - creates a hand */ public Hand (int nStartPos, HandPath phThePath, boolean bStartLeft) { nCycleSlot = nStartPos; bLeft = bStartLeft; phPath = phThePath; nX = phPath.LookupX(nStartPos, bLeft); nY = phPath.LookupY(nStartPos); } /** * Move - moves the ball to the next location */ public void Move () { nCycleSlot++; if ((nCycleSlot >= phPath.Length ()) || (nCycleSlot <= 0)) { nCycleSlot = 0; } nX = phPath.LookupX(nCycleSlot, bLeft); nY = phPath.LookupY(nCycleSlot); } /** * XLoc - returns the x location */ public int XLoc () { return nX; } /** * YLoc - returns the Y location */ public int YLoc () { return nY; } } /** * A juggling demonstration program * * @author Chris Seguin * @version 1.0f, May 1, 1995 */ public class Juggling extends java.applet.Applet implements Runnable { /** * The path of the juggling balls */ BallPaths pjbPaths; /** * The juggling balls */ JugglingBall pjbBalls[] = {null, null, null}; /** * The paths that the hands trace out */ HandPath phHandPaths; /** * The hands */ Hand phLeft; Hand phRight; /** * The directory or URL from which the images are loaded */ String dir; /** * The images used. */ JugglingImages jbiImages; /** * The thread animating the images. */ Thread kicker = null; /** * The delay between animation frames */ int nSpeed; /** * Shape of the window */ int nHeight = 0; int nWidth = 0; /** * The number of balls in the demonstration */ int nBalls = 0; /** * Parameter info. */ public String[][] getParameterInfo() { String[][] info = { {"balls", "int", "the number of balls to animate"}, {"speed", "int", "the speed the balls move at"}, {"img", "urls", "the directory where the images are located"}, }; return info; } /** * Initialize the applet. Get attributes. */ public void init() { // Load the parameters from the HTML file String at = getParameter("img"); dir = (at != null) ? at : "images"; at = getParameter("speed"); nSpeed = (at != null) ? Integer.valueOf (at).intValue() : 20; at = getParameter("height"); nHeight = (at != null) ? Integer.valueOf (at).intValue() : 100; at = getParameter("width"); nWidth = (at != null) ? Integer.valueOf (at).intValue() : 170; at = getParameter("balls"); nBalls = (at != null) ? Integer.valueOf (at).intValue() : 3; // Initialize the Ball variables pjbPaths = new CascadeBallPaths (); pjbBalls[0] = new JugglingBall ( 0, 0, pjbPaths); pjbBalls[1] = new JugglingBall (40, 2, pjbPaths); pjbBalls[2] = new JugglingBall (20, 4, pjbPaths); // Initialize the hand variables phHandPaths = new HandPath (nBalls); phLeft = new Hand (5, phHandPaths, true); phRight = new Hand (35, phHandPaths, false); resize(nWidth, nHeight); } /** * Run the image loop. This method is called by class Thread. * @see java.lang.Thread */ public void run() { // Create the thread Thread.currentThread().setPriority(Thread.MIN_PRIORITY); // Load the images jbiImages = new JugglingImages(getDocumentBase(), dir, this); // Do the animation int ndx = 0; while (size().width > 0 && size().height > 0 && kicker != null) { for (ndx = 0; ndx < nBalls; ndx++) { (pjbBalls[ndx]).Move(); } phLeft.Move(); phRight.Move(); repaint(); try {Thread.sleep(nSpeed);} catch (InterruptedException e){} } } /** * Paint the current frame. */ public void paint(Graphics g) { update ; } public void update(Graphics g) { if ((jbiImages != null) && (jbiImages.imgs != null)) { // Erase the background g.setColor(java.awt.Color.lightGray); g.fillRect(0, 0, nWidth, nHeight); int ndx = 0; for (ndx = 0; ndx < nBalls; ndx++) { if (jbiImages.imgs[pjbBalls[ndx].Color ()] == null) { System.out.print ("ERROR::No Image "); System.out.println (ndx); } g.drawImage(jbiImages.imgs[pjbBalls[ndx].Color ()], (pjbBalls[ndx]).XLoc(), (pjbBalls[ndx]).YLoc(), this); } // Draw the hands g.drawImage(jbiImages.imgs[7], phLeft.XLoc(), phLeft.YLoc(), this); g.drawImage(jbiImages.imgs[7], phRight.XLoc(), phRight.YLoc(), this); } } /** * Start the applet by forking an animation thread. */ public void start() { if (kicker == null) { kicker = new Thread(this); kicker.start(); } } /** * Stop the applet. The thread will exit because kicker is set to null. */ public void stop() { kicker = null; } }
source : http://www.webbasedprogramming.com/Creating-Web-Applets-with-Java/cwa04fi.htm#I1
No comments:
Post a Comment