Physlets: An introduction with an example

bullet

In order for visitors to a website to view a "Physlet", a supporting physlet program (with a name such as "Animator4" or "Optics2") must be installed on the website. Individual web pages then call that program (which is downloaded to the user computer) and give it commands to produce the desired animation. The web page shown below uses the Animator4 program. All physlet programs are available for free and are easy to install.

bullet

The web page that uses a supporting physlet program must specify the location of the supporting program. As a result, a web page that uses relative web addresses will not work if it is copied and moved someplace else. If you copy something from a physlet web page and paste it elsewhere only to find it doesn't work, this is probably what went wrong.

bullet

Individual web pages contain a mixture of ordinary HTML content (such as what you are reading ) and calls to the physlet program (such as Animator).  Animator itself is written in the language called Java. You can command Animator using "Java Script" (a higher level language which reads more like HTML).

bullet

Calls to the Animator program look like this...

bullet

idearth=document.animator.addObject("circle","x="+rearth+",y=0,r=8");
This says: "I want an object that I will call 'idearth'. It will be a circle located at x='rearth',y=0, and it will have a radius of 8 pixels."  The variable 'rearth' must have been defined before this call to Animator.

bullet

document.animator.setRGB(idearth,0,180,120);
This says: "I want the 'RGB' color of 'idearth' to have 0 parts R (red) and 180 parts G (green) with 120 parts B (blue)." It will appear blue-green.

bullet

document.animator.setTrajectory(idearth,rearth+"*cos(t*2*pi/365)",rearth+"*sin(t*2*pi/365)");
This tells Animator to make the thing called 'idearth' move as a function of the variable 't'. 
The command reads setTrajectory(object name, x-coordinate, y-coordinate).

bullet

The animation controls that appear on-screen must be created as buttons using Java Script. A command for a button looks like this...

bullet

<form>
<input type="button" value="play" onclick="document.animator.forward()">
</form>
This says I want a special HTML feature ("form") of the type 'button'. I want to label it with the word 'play'. When I click it, I want the animator program to move forward.

bullet

Now, an example. Click here.