Java makes web pages interactive
Java’s capability to animate Web pages is just the surface of what you might first notice when experiencing the Web through a Java-enabled browser. Not only do items move on Java Web pages, but applets can also accept user input through mouse clicks or keyboard entries. Java enables people to create Web pages with embedded puzzles, chemical models, games, and even communication systems. (For some illustrations of these, refer to the figures in Chapter 1.)
This chapter surveys some Java applets that provide interactivity. These Java applets range from simple games to instructional modules. Because, as of this writing, Java is still in its infancy, this chapter shows just a glimpse of the rich interactivity Java may bring to the Web.
This chapter also points out key programming tricks used in each of these applets. You can learn the basics of Java programming in Part III of this book.
| WHAT IS INTERACTIVITY? |
| The word interactivity has become a buzzword in media development. Products claim they have it, and developers promise to bring interactivity to various media (television, CD-ROMs, magazines, newspapers, games, and so on). Interactivity has been promised so much that it is nearly as hollow a term as information superhighway—meaning very little and lacking specific illustrations. A dictionary definition touches on the main idea of mutual response and reciprocity: in-ter-ac-tive adj 1. mutually or reciprocally active; 2. of, relating to, or being a two-way electronic communication system (as a telephone, cable television, or a computer) that involves a user’s orders (as for information or merchandise) or responses (as to a poll). (Definition from the online Webster’s Dictionary.) In the broadest sense of the word, nearly everything could be considered interactive. Toasters and televisions, for example, respond based on a user’s orders. Richer levels of interactivity, however, involve more than response to the user’s orders; the level and quality of these responses makes a big difference. The pre-Java Web provided a great deal of user selectivity through hypertext links, but its level of interactivity was fairly low. Gateway (Common Gateway Interface, or CGI) programming provides a higher degree of interactivity by making it possible to customize responses to users. Gateway programs are not continuously active, however, because they require the user to click an input button before the user’s selections can be processed and a response can be sent. Java raises the interactive quality of the Web by making possible immediate and continuous stimuli to the user. At the same time, a Java applet can continuously accept and process input from the user. Java can also respond to this direct input and respond with customized feedback. Thus, the Web has become richly interactive with the advent of the Java age. |
Interactive Games
Games are a popular application for programmers to create. Games naturally fit into the give-and-take flow that Java applets make possible. Games fit well into the tireless, continuous looping possible in a Java program. The game applets described in this chapter are among the earliest Java applets, yet they display the interactivity Java can bring to Web pages.
Hang Duke
Patrick Chan at Sun Microsystems developed an applet called Hang Duke; the applet has been distributed with the Java browser as a demonstration. Figure 5.1 shows Duke, the mascot of Java. Notice that the user couldn’t guess the word; consequently, Duke is in an advanced hanging stage.
The Hang Duke game.
The applet accepts input from the keyboard and displays correct letters in the appropriate slots in the word; each incorrect letter appears near the top of the gallows, and for each wrong letter, another part of Duke’s form is drawn.
The Hang Duke applet demonstrates how the simple metaphor of pencil-and-paper game translates easily to the Web with Java.
Hang Duke is a runnable applet. A key part of its source code accepts letters from the user through a method that detects key presses:
| public void keyDown(int keyPressed) |
The parameter keyPressed is an integer representing a character. This code can be changed to a character and placed in a string expression by casting, like this: (char)keyPressed.
3-D Tennis
Eiji Ito has created a simulation of tennis using a Java applet. By using your mouse to move your “racket” in a three-dimensional representation of a room, you can play tennis by blocking a ball. This applet is at .
Figure 5.2 shows the tennis game in action. The bar at the right keeps track of the times that the player misses the ball, growing smaller until the game is over.
3-D Tennis implemented in Java.
Educational Applications
The Java game applets described so far in this chapter are innovative in that they use Java technology to enable users to interact with Web pages. This interactivity can also be put to a more exciting use: education. Educators have been adopting the Web for several years now for course support webs, information about their schools, and even instructional modules. However, the Web’s static text, its relatively low level of interactivity, and its limited capabilities for multimedia, have made it useful for information delivery but not as amenable to creating truly innovative, engaging applications. This section highlights some early Java applications that highlight its potential for education.
Fractal Figures
Fractals are geometric shapes whose individual parts resemble the whole shape. Fractals can be generated by starting from a basic shape, and then changing the shape based on patterns echoing the structure of the overall shape. Snowflakes are like fractals: their forms at the lowest level of detail reflect a crystalline pattern similar to the whole shape. Because fractals are so hard to explain in words, what a better candidate for a Java application?
Jim Graham at Sun Microsystems has created a Java applet that shows an algorithm that generates a fractal. (Check out .) Figures 5.3, 5.4, and 5.5 show this applet. The first panel displays a rendering of a snowflake curve. Starting from a simple peaked line (see Figure 5.3), more peaks are added on the line segments until the entire curve resembles the ragged, yet precisely intricate snowflake shape (progressing through Figure 5.4 and Figure 5.5).
Similarly, the last fractal shown in Figures 5.3 to 5.5 is called a Hilbert curve. Starting with a set of lines forming a Y, the algorithm adds detail until the entire fractal appears similar to a fine oriental rug—a pattern like a maze formed from a precise algorithm. Fractal Lesson. Initial state.
Fractal Lesson. Middle state.
Fractal Lesson. Final state.
The progression of these fractals from their starting points to their ending points is key: an instructional module could show the stages frozen in images embedded in a Web page (much like the frozen illustrations in this book). However, the Java demonstration enables the user to restart the image, watch it over and over, and get a feel for the progression of the algorithm. The user sees the algorithm in action rather than just imagining how it works.
Word Match Game
The tireless capability of a Java applet to execute an algorithm over and over for the instruction of the user also shows up in the word-match game developed by Patrick Chan at Sun Microsystems (see Figure 5.6). This game is a demonstration of what could be more made even more elaborate. Users match pictures with words in foreign languages. To play this game, you first find a picture of an object you recognize. Then, click on the picture of that object, and then click on the corresponding word. The words can appear in many different languages, so playing the game builds your vocabulary. The applet draws lines from the picture to the word. Once you’ve completed matching all the words, you then click on the Score button and the applet reports the number of correct matches. The game also has a speaker icon available, so you can hear the pronunciation of the words in some of the languages.
Word match game lesson.
Many languages are available in this applet, as shown in the box to the left. Once you solve the puzzle, you can see it as solved in all the languages by clicking on the language name.
Just like the fractals demonstration, the word match game shows how interactive and multimedia content can give users a place to play on a Web page rather than just observe and select. Neither lesson is meant to be a comprehensive tutorial; instead, each is a demonstration of Java’s possibilities. Even as they are, however, the applets are fairly instructive.
Fast Fourier Transform
The playground for users of Java pages can also include applets that perform complex computations and simulations. Through these applets, users can gain immediate feedback into processes. A good example of such a simulation is the Fast Fourier Transform (FFT) applet developed by Gopal Chand, David Nicol, and Calum Smeaton (). Fourier transforms are used in science and engineering to analyze data or signals. The FFT lessons (Figure 5.7), gives users a way to directly see the result of a Fourier Transform calculation. Given a set of input data points on a wave form, the FFT applet calculates and displays the resulting power spectrum.
Fast Fourier Transform lesson.
This FFT application, like the others shown in this chapter, reinforces concepts by providing direct experience to users. With sufficient programming work (the FFT application involved over 700 lines of Java code), a Java Web page can become a sophisticated scientific laboratory for learning. Given more time and experience, as well as more class libraries, educators using Java will be able to add new dimensions to their instructional materials delivered over the Web.
Voltage Circuit Simulator
Sean Russell, Software Manager of the University of Oregon has created a way for students to learn about electric circuits (). In this simulation, a student can explore the relationship among voltage, amperage, and resistance.
In the simulation, a battery outputs energy measured in volts, a wire conducts electrical energy with a given resistance measured in ohms, and a bulb operates with an energy requirement measured in amperes. A switch completes the circuit, connecting the energy from the batteries through the wire to the bulb.
The student chooses some combination of resistors and battery cells for the circuit. The goal is to discover how Ohm’s law defines the mathematical relationship among voltage (V), amperage (I), and resistance (R).
If the student does not have enough resistance in the circuit, the bulb will receive too much energy and explode. If the resistance is too great, the bulb will not light. If the resistance and the power is just right, the bulb will light.
By experimenting with the applet, the student eventually can learn that V=IR is Ohm’s law. Given that the bulb in Figure 5.8 is 3 amps (I) and the battery is 18 volts (V), then the student can solve for R, to get 6 ohms of resistance (R), and the bulb lights up.
An electrical circuit can be placed on a Web page like this example, showing a circuit with I=3 and V=36.
| |
A lecturer can use this applet to create a set of circuits on the same page by including the applet with different settings for the parameters.
Voltage circuit simulator.
Complementary Metal-Oxide Semiconductor (CMOS) Demonstration
Norman Hendrich of the University of Hamburg in Germany’s Department of Computer Science has created a set of applets which demonstrate the operation of transistors and electronic components at .
These applets demonstrate how CMOS (Complementary Metal-Oxide Semiconductor) transistors and basic gates work. The applets demonstrate the N-type and P-type transistors used in CMOS technology, the basic CMOS inverter, as well as NAND and NOR gates.
Figure 5.9 shows one applet in this collection. The user can click on the source and gate contacts of the transistors to toggle the voltage levels. The applet uses different colors to indicate voltage levels, and the output values on the drain contacts change in response to user input.
Similar to the phasor applet, the CMOS applet shows how students can have a virtual “lab bench” for exploration and study.
CMOS demonstration.
Nuclear Power Plant Demonstration
Henrik Eriksson of the Department of Computer and Information Science at Linköping University, Sweden has created a model of a nuclear power plant which is an intriguing simulation. This applet is at .
The applet simulates the “Kärnobyl” nuclear power plant’s major components: the reactor, turbines, and the condenser. Pumps and valves in the applet allow the user to control flows and pressures.
The reactor heats the water to boiling, and the resulting steam drives the turbine. The condenser cools the steam. The pumps transport the water from the condenser back to the reactor tank.
The user can choose different simulation sequences to test their disaster management skills in the power plant, including scenarios involving a turbine failure or water pump failures.
The simulator calculates values based on the user’s settings. Figure 5.10 shows the plant in a precarious situation.
According to developer Henrik Eriksson, the Kärnobyl plant was built to help students learn expert systems and rule-based programming. The applet uses a C-based interface to integrate the Java applet with a rule-based expert system of safety rules for operating a nuclear power plant. The result is an intelligent applet which helps students explore the complex relationships in operation.
The Karnobyl nuclear power plant.
Summary
Java not only brings animation to Web pages, but it enables users to interact with those animations. Ranging from applets that implement Web-based versions of familiar games to new kinds of Java programs that help users learn, Java interactivity has much potential. Java is still in its infancy, and the key to developing more complex Java programs will be high-quality class libraries. These libraries should help Java programmers express the unique features of an applet without having to worry about coding all the details. The resulting applets, when well done and configurable through parameters, could be the instruments and simulations which help students learn a wide variety of lessons about language, science, and other fields of knowledge.
· A simple Hang Duke game demonstrates how user input through the keyboard can affect a graphical display.
· A 3-D tennis game adds the element of chance and a tactile visual metaphor to an applet.
· An applet demonstrating fractal algorithms can help users gain insight into how an algorithm progresses.
· A user can interact with an applet by matching a picture with foreign words in a word match game. With a speaker to deliver audio, the resulting applet is a model for a useful instructional tool.
· The examples of the Fast Fourier Transform, circuit simulator, CMOS, and nuclear power plant applets show how a Java Web page can become an adjunct to laboratory work. The applets can behave like scientific instruments or interpret and display input data so that students can focus on the meaning of scientific principles.
Post a Comment