by

Isa S. Jubran, PhD

Department of Mathematics

SUNY College at Cortland

[ What is Java?] [ Why Java?] [ What is an Applet?]

[ What do you need to run an applet?] [ How do you execute an applet?]

[ Inserting Applets in W eb Pages]

[Tutorials]

[Excellent Math Java Sites] [ Some of My Java Applets]

[Good news! You don't have to learn java to make interactive Web pages]

Java Applets: Tools for Learning/Teaching Mathemtics: As mathematics teachers we are always looking for ways to better illustrate complex mathe matical concepts. Visual presentations encourage experimentation and discovery learning, allowing students to construct their own knowledge. But these are laborious and time consuming when done by hand on a chalkboard or even when done on a computer that is not equipped with the right software. It is a given now, that the proper use of technology should be an integral part of every mathematics course, but mathematics teachers are always worried about the time "wasted" teaching the technology itsel f. You often hear things like: "We are supposed to be teaching mathematics not Maple, Matlab or Mathematica." Are such software packages appropriate for use in undergraduate mathematics or do they represent an over kill? A powerful, machine independent and easy to learn/use software is clearly needed.

Recently, such a software, Java, was introduced and has been spreading like a wild fire. Java and the Web are providing teachers with the tools to create interactive hands-on demonstrations that lead to deeper understanding of difficult mathematical concepts. They are increasing the chances of success in mathematics for students with learning disabilities. Students are able to access these interactive demonstrations anytime, anywhere using any type of platform.

Properly designed java appletts, allow the student/teacher to expolre many complicated mathematical concepts without spending a lot of time learning a particular software package. All one needs to do is push buttons, drag points or slide a bar, while concentrating on what is important, mathematics, not the technical code required to do the mathematics. In terms of their educational function applets fall into the following categories: Simulations (virtual experiments), information retrieval, and self-testing (interactive quizzes).

Traditionally, instruction using the Web conjured up the image of a book in the vertical plane that has no pedagogical advantage. On the other hand, Java applets are a very powerful and dynamic medium of instruction, they allow for interactive exploration of topics in mathematics. The fact that these applets are interactive, promote discovery learning and can be accessed anytime, anywhere provided a connection the internet give them great pedagogical advantages over other modes of electronic instruction.

To demonstate the power of java, the participants will visit a number of excellent websites dedicated to mathematical java applets and investi
gate applets dealing
with a variety of mathemtical concepts.

Back to Outline

What is Java: Java is an object oriented programming language that is architecturally neutral.

- Speed: Ja va applets are accessible on the client-side rather than remote host.
- Interfacibility: Java applets can interface with various forms of media formats (graphics, animation, sound).
- Platform Independence and Portability.

What is an Applet?
A Java program is executed as either an application which runs stand-alone from the command line or a
s an applet that runs under a Web browser.
Applications and applets start program execution in different ways; an application has a main() method and an applet has a init() method inititiated by the browser.

Back to Outline

What do you need to run Java?
From http://java.sun.com/ you need to download and install JavaTM 2 Platform, Standard Edition (J2SE 1.4) released in March 2002.
The essential Java 2 SDK, tools, runtimes, and APIs for developers
writing, deploying, and running applets and applications in the Java programming
language. Here you will find a compiler javac, a debugger and an applet viewer.

Back to Outline

How do you ex ecute a Java Applet?

- The source code of a Java applet is stored in file with the suffix ".java", say "Example.java".
- The source code is compiled and stored in a file with the suffix ".class", "Example.class". Use the command: javac Example.java to acheive this.
- The ".class" file is included in the HTML document using the applet tag.

- Local Applets:
To insert an applet in a web page you use the applet tag. A t the very least you need to tell the browser where the code for the applet is, and how much space it will occupy on the web page. As an example,

< applet CODE=" buff.class " WIDTH="160 " HEIGHT="100" ></applet>

< /font>will insert the applet whose initial file is called buff.class in a rectangle of width 100 pixels and height 100 pixels into the web page.

- Remote Applets:
To insert remote applets you use the URL. The following for instance will insert an applet called buff.class that is at the site http://www.angelfire.com/wa/hurben/images/.

< applet CODE=" buff.class&q uot codebase=" http://www.angelfire.com/wa/hurben/images" WIDTH="160 " HEIGHT="100" ></applet>

*Java Applet Tutorial : Here you will find a Java applet tutorial which takes you step by step through the process of building applets. You learn by example, you will not learn the "Why" but the "How". Throughout the java tutorial all new lines of code are explained, the ones you have already seen aren't commented anymore. Within a few minutes you will be able to display things on the screen, a few minutes later you are able to use a GUI and after that you wi l see how to interact with the user.*

Back to Outline*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. You are encouraged to download the source code herein, try it out on your own machine, and modify it. Topics cove red include: Drawing lines and other stuff, color, mouse input, keyboard input, animation, backbuffers, painting and 3D graphics.*

Back to OutlineJava Lessons for Creating Simple Java Applets: Here you will find lessons which introduce basic techniques to create simple java applets, especially creating math applets for visualization and interactive animation in secondary and college level. Each lesson includes an example of java source code and excercises to obtain basic skills. Topics covered include: Back to Outline- How to make applets
- Drawing curves
- Drawing graphs of functions
- Calculating sequences
- Changing parameters
- Animation

*Excellent Math Java Applets Sites:*- IES Manipula Math with Java:
Here you can access more than 300 applets dealing with topics such as: middle
school geometry, trigonometry, calculus, vector calculus, complex
numbers, conics and much more. Applets load up quickly
and are very
easy to use. Many well presented proofs are included, many are visual in nature.

Back to Outline - Project Interactivate
- Shodor Education Foundation
Here you find many activities dealing with middle school
mathematics. These are arranged according to the NCTM Principles
and Standards for School Mathematics and the NC
EE Performance
Standards for Middle School: Number and Operation Concepts,
Geometry and Measurement Concepts, Function and Algebra Concepts,
and Probability and Data Analysis Concepts. Each activity comes
with supplementary What(background), How(instructions), and
Why(curriculum context) pages.

Back to Outline - Cut - the - Knot:
Here you find
hundreds of applets covering areas such as:
Memory and Matching, Arithmetic, Algebra, Logic, Geometry,
Fractals, Probability, Calculus, Combinatorics, Mathematical
Droodles, Puzzles and games, Combinatorial Games, and
Miscellaneous Demonstrations.

Back to Outline - National Library of Virtual Manipulatives for Interactive Mathematics:
Here you can find the National Library of Virtual Manipulatives for
Interactive Mathematics. This Library has an extensive number of applets
dealing with topics such as: number & operations, algebra,
geometry, measurement and data analysis & probability. Each of these
topics is addressed for Pre the K-2, 3-5, 6-8, and 9-12 school levels.
A good resource for math departments that lack physical manipulatives
like ours.

Back to Outline < P> - Greenfield Girls Primary
Cape Town, South Africa Interactive Math Websites:
This site has a number of well designed applets and links to other sites. Applets on
Pentominoes, Tangrams and unfolding polyhedra are very effective. The site is very helpful to students
taking MAT101 and MAT102 and prospective teachers in general.

Back to Outline - WebStat: WebStat is freely available data analysis software for use over the World Wide Web. It features all the data analysis tools for introductory statistics, a wide range of methods for importing data, and graphics tools including pie charts, histograms, boxplots, etc.

Back to Outline

- Manipulate the graph of y=a*(x-b)^2: [ Source Code]

Manipulate the graph of y=b*sin(a*x): [ Source Code]

- Multiple Choice Test:

Back to Outline

Interactive Web Pages Using Java Sketchpad:

Good news! You don't have to learn java to make interactive Web pages, you can use Java Sketchpad. All you need are a copy of Geometer's Sketchpad and a free copy of the Java Sketchpad applet and Converter from Key Curriculum Press.

How Does it Work?- Construct a Sketchpad sketch.
- Open it in the converter.
- Save as HTML.
- Edit the resulting HTML page to include additional text and stuff.
- You will also need to install the J SP applet package on your Web server.

The following examples were done using Java Sketchpad.

Source Code for y=a*(x-b)^2

import java.awt.*; import java.applet.*; import java.awt.event.*; public class My6JavaApplet extends Applet implements ActionListener { Button button1 = new Button(); Button button2 = new Button(); Label label1 = new Label(); Button button3 = new Button(); Button button4 = new Button(); Label label2 = new Label(); int vxmin,vymin,vxmax,vymax; //screen coordinates double xmin,ymin,xmax,ymax; //imaginary coordinates double dx; //interval of x double a,b; // parameter double da,db; //interval of a /* initializing */ public void init(){ String str,str1,str2; xmin=-5;xmax=5;ymin=-5;ymax=5; vxmin=0;vxmax=300;vymin=0;vymax=300; dx=0.1; a=1;da=0.2;b=1;db=0.5; setLayout(null); //free layout setSize(400,300); // size of this applet add(button1); button1.setLabel("+"); button1.setFont(new Font("Dialog", Font.PLAIN, 16)); button1.setBounds(320,40,20,20); button1.addActionListener(this); add(button2); button2.setLabel("-"); button2.setFont(new Font("Dialog", Font.PLAIN, 16)); button2.setBounds(350,40,20,20); button2.addActionListener(this); add(label1); str1="a = "+Double.toString(a); label1.setText(str1); label1.setFont(new Font("Dialog", Font.PLAIN, 16)) ; label1.setBounds(320,60,60,40); add(button3); button3.setLabel("+"); button3.setFont(new Font("Dialog", Font.PLAIN, 16)); button3.setBounds(320,120,20,20); button3.addActionListener(this); add(button4); button4.setLabel("-"); button4.setFont(new Font("Dialog", Font.PLAIN, 16)); button4.setBounds(350,120,20,20); button4.addActionListener(this); add(label2); str2="b = "+Double.toString(b); label2.setText(str2); l abel2.setFont(new Font("Dialog", Font.PLAIN, 16)); label2.setBounds(320,140,60,40); } public void paint(Graphics g) { double x1,y1,x2,y2; String str; //axes and scale scale(g); //graph g.setColor(Color.blue); x2=xmin;y2=func(x2); for(x1=xmin;x1<=xmax;x1=x1+dx){ y1=func(x1); Line(g,x1,y1,x2,y2); x2=x1;y2=y1; } g.drawString("y=a(x-b)(x-b)",320,200); Font f = new Font ("SansSerif",Font.PLAIN,10); g.setFont(f); str="y = "+Double.toString(a)+"(x-" +Double.toString(b)+ ")" +"(x-"+ Double.toString(b) +")"; g.drawString(str,305,220); } /* Convert imaginary coordinates to screen cordinates. */ public int mapX(double x){ int sx; sx=vxmin+(int)((x-xmin)/(xmax-xmin)*(double)(vxmax-vxmin)) ; return sx; } public int mapY(double y){ int sy; sy=vymin+(int)((ymax-y)/(ymax-ymin)*(double)(vymax-vymin)); retu rn sy; } /* Drawing Line */ public void Line(Graphics g,double x1,double y1,double x2,double y2){ g.drawLine(mapX(x1),mapY(y1),mapX(x2),mapY(y2)); } /* Defining function */ public double func(double x){ double y; y=a*(x-b)*(x-b); return y; } /* axes and lattice */ public void scale(Graphics g){ double x,y; //back color g.setColor(new Color(255, 255, 192)); g.fillRect(vxmin,vymin,vxmax-vxmin,vymax-vymin); // scale g.setColor(Color.lightGray); for (x=xmin;x<=xmax;x=x+1){ Line(g,x,ymin,x,ymax); } for (y=ymin;y<=ymax;y=y+1){ Line(g,xmin,y,xmax,y); } // xy-axes g.setColor(Color.black); Line(g,0,ymin,0,ymax); Line(g,xmin,0,xmax,0); } public void actionPerformed(ActionEvent event) { String str1,str2; Object object = event.getSource(); if (object == button1){ a=a+da; a=(double)(Math. round(10*a))/10; repaint(); str1="a = "+Double.toString(a); label1.setText(str1); } if (object == button2){ a=a-da; a=(double)(Math.round(10*a))/10; repaint(); str1="a = "+Double.toString(a); label1.setText(str1); } if (object == button3){ b=b+db; b=(double)(Math.round(10*b))/10; repaint(); str2="b = "+Double.toString(b); label2.setText(str2); } if (object == button4){ b=b-db; b=(double)(Math.round(10*b))/10; repaint(); str2="b = "+Double.toString(b); label2.setText(str2); } } }

Back to OutlineSource Code for y=a*sin(b*x)

import java.awt.*; import java.applet.*; import java.awt.event.*; public class My8JavaApplet extends Applet implements ActionListener { Button button1 = new Button(); // Plot Button Button button2 = new Button(); // Init Button Button button3 = new Button(); Button button4 = new Button(); Button button5 = new Button(); Button button6 = new Button(); Label label1 = new Label(); Label label2 = new Label(); Image buffer; // image buffer Graphics myGC; // graphics for the buffer int vxmin,vymin,vxmax,vymax; //screen coordinates double xmin,ymin,xmax,ymax; //imaginary coordinates double dx; //interval of x double angle; //angle double d_angle; //interval of angle double cx,cy,cr; //center and radius of circle double a,b; // parameter double da,db; //interval of a /* initializing */ public void init(){ Stri ng str,str1,str2; xmin=-3;xmax=7;ymin=-1.5;ymax=1.5; vxmin=0;vxmax=500;vymin=0;vymax=150; dx=Math.PI/60; angle=0;d_angle=Math.PI/60; cx=-1.5;cy=0;cr=1; a=1;da=0.2;b=1;db=0.2; setLayout(null); //free layout setSize(500,150); //size of this applet add(button1); button1.setLabel("Plot"); button1.setFont(new Font("Dialog", Font.PLAIN, 12)); button1.setBounds(420,5,30,20); button1.addActionListener(this); add(button 2); button2.setLabel("Init"); button2.setFont(new Font("Dialog", Font.PLAIN, 12)); button2.setBounds(460,5,30,20); button2.addActionListener(this); add(button3); button3.setLabel("+"); button3.setFont(new Font("Dialog", Font.PLAIN, 12)); button3.setBounds(430,40,20,10); button3.addActionListener(this); add(button4); button4.setLabel("-"); button4.setFont(new Font("Dialog", Font.PLAIN, 12)); button4.setBounds(460,40,20,10); button4.addActionListener(this); add(l abel1); str1="a = "+Double.toString(a); label1.setText(str1); label1.setFont(new Font("Dialog", Font.PLAIN, 12)); label1.setBounds(430,60,40,10); add(button5); button5.setLabel("+"); button5.setFont(new Font("Dialog", Font.PLAIN, 12)); button5.setBounds(430,100,20,10); button5.addActionListener(this); add(button6); button6.setLabel("-"); button6.setFont(new Font("Dialog", Font.PLAIN, 12)); button6.setBounds(460,100,20,10); button6.addActionListener(this); add(label2); str2="b = "+Double.toString(b); label2.setText(str2); label2.setFont(new Font("Dialog", Font.PLAIN, 12)); label2.setBounds(430,120,40,10); // create off-screen image buffer = createImage(vxmax-vxmin,vymax-vymin); // get graphics myGC = buffer.getGraphics(); setLayout(null); setSize(500,150); } public void paint(Graphics g){ String str; drawGraph(); //draw graph to the buffer. g.drawImage(buffe r,0,0,this); //copy buffer to the screen g.setColor(Color.blue); g.drawString("y=sin(x)",300,20); g.setColor(Color.red); str="y = "+Double.toString(b)+"sin(" +Double.toString(a)+ " x)"; g.drawString(str,300,140); } public void drawGraph() { double x1,y1,x2,y2,y3,y4; //axes and scale scale(myGC); //unit circle myGC.setColor(Color.black); Line(myGC,cx,ymin,cx,ymax); Circle(myGC,cx,cy,1); x1=cx;y 1=cy; x2=cx+cr*Math.cos(angle);y2=cy+cr*Math.sin(angle); Line(myGC,x1,y1,x2,y2); myGC.setColor(Color.gray); Line(myGC,x2,y2,angle,Math.sin(angle)); Line(myGC,x2,y2,angle,Math.sin(2*angle)); //graph1 myGC.setColor(Color.blue); x2=0;y2=Math.sin(x2); for(x1=0;x1<=angle;x1=x1+dx){ y1=Math.sin(x1); Line(myGC,x1,y1,x2,y2); x2=x1;y2=y1; } //graph2 myGC.setColor(Color.red); x2=0; y3=b*Math.sin(a*x2); int i; for(x1=0;x1<=angle;x1=x1+ dx){ y4=b*Math.sin(a*x1); Line(myGC,x1,y4,x2,y3); x2=x1;y2=y1;y3=y4; } } /* Convert imaginary coordinates to screen cordinates. */ public int mapX(double x){ int sx; sx= vxmin+(int)((x-xmin)/(xmax-xmin)*(double)(vxmax-vxmin)) ; return sx; } public int mapY(double y){ int sy; sy= vymin+(int)((ymax-y)/(ymax-ymin)*(double)(vymax-vymin)); return sy; } /* Drawing Line */ public void Line(Graphics g,double x1,double y1,double x2,double y2){ g.drawLine(mapX(x1),mapY(y1),mapX(x2),mapY(y2)); } /* Drawing Circle */ public void Circle(Graphics g,double x,double y,double r){ g.drawOval(mapX(x-r),mapY(y+r),mapX(2*r)-mapX(0),mapY(-2*r)-mapY(0)); } /* axes and lattice */ public void scale(Graphics g){ double x,y; String str; //back color g.setColor(new Color(255, 255, 192)); g.fillRect(vxmin,vymin,vxmax-vxmin,vymax-vymin); g.setColor(Color.lightGray); for (x=Math.PI/2;x<=Math.PI*2;x=x +Math.PI/2){ Line(g,x,-0.05,x,0.05); } for (y=-1;y<=1;y=y+1){ Line(g,-0.05,y,0.05,y); } // xy-axes g.setColor(Color.black); Line(g,0,ymin,0,ymax); Line(g,xmin,0,xmax,0); } public void actionPerformed(ActionEvent event) { String str,str1,str2; Object object = event.getSource(); Graphics g=getGraphics(); if (object == button1){ angle=0; //plotting animation while(angle<2*Math.PI){ angle=angle+d_angle; paint(g); } } if (object == button2){ angle=0; repaint(); } if (object == button3){ a=a+da; a=(double)(Math.round(10*a))/10; repaint(); str1="a = "+Double.toString(a); label1.setText(str1); } if (object == button4){ a=a-da; a=(double)(Math.round(10*a))/10; repaint(); str1="a = "+Double.toString(a); label1.setText(str1); } if (object == button5){ b=b+db; b=(double)(Math. round(10*b))/10; repaint(); str2="b = "+Double.toString(b); label2.setText(str2); } if (object == button6){ b=b-db; b=(double)(Math.round(10*b))/10; repaint(); str2="b = "+Double.toString(b); label2.setText(str2); } } }

Back to Outline