Animator- Physlet- Tutorial
Scripten von P. Krahmer, Applets von W. Christian

Das "Animator" Applet wurde geschaffen um Bewegungen kleiner Objekte darzustellen.
Schüler sollen damit die Bewegung charakterisieren und in Abhängigkeit von t, x, y, vx, vy, fx, fy studieren.
Es ist das Basis-Element der Physlet- Familie.

Ein roter Ball
ball1.html

<html>
<head>
<title>ball1</title>

<script LANGUAGE="JavaScript">
function init()
{
document.Animator.setAutoRefresh(false);
document.Animator.setDefault();

ball=document.Animator.addObject("circle","x=0, y=0, r=2");
document.Animator.setRGB(ball,255,0,0);

document.Animator.setAutoRefresh(true);
}
</script>
</head>

<body onload="init()">

<center>
<applet code="animator4.Animator.class" codebase="../classes/" id="Animator"
archive="Animator4_.jar,Bar4_.jar,DataTable4_.jar,STools4.jar" name="Animator"
width="600" height="400" hspace="0" vspace="0" align="Middle">
<param name="FPS" value="20">
<param name="ShowControls" value="true">
<param name="dt" value="0.05">
<param name="PixPerUnit" value="10">
<param name="GridUnit" value="1.0">
</applet>
</center>

</body>
</html>


Zunächst zum blauen Applet
1) das kopiert man aus einem passenden Text in seine Anwendung in den body
2) man achtet auf codebase = "../classes" - Pfad zum Aufbewahrungsort der JAVA jar Programme
3) Applet- Größe einstellen
4) Name (wichtig Groß-Klein!) und id : Animator
5) Parameter ShowControlls -- Fussleiste ein aus --- Parameter dt= Zeitschritt
6) Parameter PixPerUnit und GridUnit Koordinatensystem

<body onload="init()">
ein selbst erstelltes Script mit der Funktion init() wird beim Start ausgeführt

document.Animator.setAutoRefresh(false); // bei jeder Berechnung neue Zeichnung
document.Animator.setDefault(); // standardwerte setzen

ball=document.Animator.addObject("circle","x=0, y=0, r=2");
document.Animator.setRGB(ball,255,0,0);

Erscheint nur ein grauer Rahmen anstelle des Applets so ist vermutlich der Pfad zur Codebase falsch.

Aufgabe verändern Sie das Script - vorsichtig -
1) Ball1.html aufrufen
2) Vom Iexplorer © microsoft  aus Quelltext anzeigen lassen, sie sind im Texteditor
3) Ändern Sie
ball=document.Animator.addObject("circle","x=0, y=0, r=2");
z.B. x=5, y=0, r=10

jetzt werden Sie den Wunsch nach Koordinatenachsen haben:

In Wurfstellung gehen
ball2.html

<html>
<head>
<title>ball1</title>

<script LANGUAGE="JavaScript">
function init()
{
document.Animator.setAutoRefresh(false);
document.Animator.setDefault();

document.Animator.setTimeDisplay(true);
document.Animator.shiftPixOrigin(-160,-70);
xachse=document.Animator.addObject("line","x=-10, y=0, h=50, v=0");
yachse=document.Animator.addObject("line","x=0, y=-10, h=0, v=30");
document.Animator.addObject("text","x=40, y=-1,text=t");
document.Animator.addObject("text","x=-1, y=19, text=s");


ball=document.Animator.addObject("circle","x=0, y=0, r=2");
document.Animator.setRGB(ball,255,0,0);

document.Animator.setAutoRefresh(true);
}
</script>
</head>

<body onload="init()">

<center>
<applet code="animator4.Animator.class" codebase="../classes/" id="Animator"
archive="Animator4_.jar,Bar4_.jar,DataTable4_.jar,STools4.jar" name="Animator"
width="600" height="400" hspace="0" vspace="0" align="Middle">
<param name="FPS" value="20">
<param name="ShowControls" value="true">
<param name="dt" value="0.05">
<param name="PixPerUnit" value="10">
<param name="GridUnit" value="1.0">
</applet>
</center>

</body>
</html>


Zunächst zum blauen Applet


Die Veränderung im Script wurde rot gezeichnet, kopieren, einfügen, etv. verändern

Ändern Sie die Achsennamen!

Wurf nach fester Bahn
ball3.html

<html>
<head>
<title>ball1</title>

<script LANGUAGE="JavaScript">
function init()
{
document.Animator.setAutoRefresh(false);
document.Animator.setDefault();

document.Animator.setTimeDisplay(true);
document.Animator.shiftPixOrigin(-130,-70);
xachse=document.Animator.addObject("line","x=-10, y=0, h=45, v=0");
yachse=document.Animator.addObject("line","x=0, y=-10, h=0, v=30");
document.Animator.addObject("text","x=35, y=-1,text=t");
document.Animator.addObject("text","x=-1, y=19, text=s");

ball=document.Animator.addObject("circle","x=0, y=20, r=2");
document.Animator.setRGB(ball,255,0,0);

document.Animator.setTrajectory(ball,"12*t","12*t-5*t*t");
document.Animator.setTrail(ball,300);
document.Animator.setOneShot(0,2.5,"Ende");

document.Animator.setAutoRefresh(true);
}
</script>
</head>

<body onload="init()">

<center>
<applet code="animator4.Animator.class" codebase="../classes/" id="Animator"
archive="Animator4_.jar,Bar4_.jar,DataTable4_.jar,STools4.jar" name="Animator"
width="600" height="400" hspace="0" vspace="0" align="Middle">
<param name="FPS" value="20">
<param name="ShowControls" value="true">
<param name="dt" value="0.05">
<param name="PixPerUnit" value="10">
<param name="GridUnit" value="1.0">
</applet>
</center>

</body>
</html>


Zur blauen Änderung:
document.Animator.setTrajectory(ball,"12*t","12*t-5*t*t"); objekt,x(t),y(t) als Strings!

Ändern Sie die auf Horizontalwurf aus 20m Höhe.

 

Wurf nach Kraftgesetz
ball4.html

<html>
<head>
<title>ball1</title>

<script LANGUAGE="JavaScript">
function init()
{
document.Animator.setAutoRefresh(false);
document.Animator.setDefault();

document.Animator.setTimeDisplay(true);
document.Animator.shiftPixOrigin(-130,-70);
xachse=document.Animator.addObject("line","x=-10, y=0, h=45, v=0");
yachse=document.Animator.addObject("line","x=0, y=-10, h=0, v=30");
document.Animator.addObject("text","x=35, y=-1,text=t");
document.Animator.addObject("text","x=-1, y=19, text=s");

ball=document.Animator.addObject("circle","x=0, y=20, r=2");
document.Animator.setRGB(ball,255,0,0);
masse=1; document.Animator.setMass(ball,masse);
g=9.81;
fxstring = "0";
fystring = "-"+g+"*"+masse;
document.Animator.setForce(ball,fxstring,fystring,0,0,10,15);

document.Animator.setShowFVector(ball,true);
document.Animator.setShowvVector(ball,true);
document.Animator.setDragable(ball,true);
document.Animator.setTrail(ball,300);
document.Animator.setFootPrints(ball,10);
document.Animator.setGhost(ball,true);
document.Animator.setCaption("Schiefer Wurf ohne Luftreibung");
document.Animator.setOneShot(0,3.1,"Ende");

document.Animator.setAutoRefresh(true);
}
</script>
</head>

<body onload="init()">

<center>
<applet code="animator4.Animator.class" codebase="../classes/" id="Animator"
archive="Animator4_.jar,Bar4_.jar,DataTable4_.jar,STools4.jar" name="Animator"
width="600" height="400" hspace="0" vspace="0" align="Middle">
<param name="FPS" value="20">
<param name="ShowControls" value="true">
<param name="dt" value="0.05">
<param name="PixPerUnit" value="10">
<param name="GridUnit" value="1.0">
</applet>
</center>

</body>
</html>


Zur blauen Änderung:
fxstring = "0";
fystring = "-"+g+"*"+masse; // entspricht algebraisch -g*m
document.Animator.setForce(ball,fxstring,fystring,0,0,10,15);
objekt, fxstring, fystring, x0, y0, vx0, xy0

Die setShowFVector Befehle sind klar

Die Footprints und Ghost Befehle vewirken das Stempeln
Timing: t0,te,Text : document.Animator.setOneShot(0,3.1,"Ende");

Ändern Sie das Ganze auf Berücksichtigung der Luft-Reibung
Sie dürfen dazu auch die Lösung bei ball5.html

 

 

Eingabefeld - Eingabeprinzip
ball6.html

ins script einfügen:


c=eval(document.eingabeform.cwert.value);
g=9.81;

in den body einfügen (unter das Applet)
</applet>
<br>
<form name="eingabeform"> Luftreibungskoeffizient c =
<INPUT type="text" size=5 name="cwert" value="0.02" onClick= "JavaScript:init()">
</form>
</center>


Elastischer Boden - setBouncy
ball7.html

ins script einfügen:

ball=document.Animator.addObject("circle","x=0, y=20, r=5");
document.Animator.setRGB(ball,255,0,0);
document.Animator.setBouncy(ball,true);

boden=document.Animator.addObject("rectangle","w=600,h=20,x=10,y=-1, m=100");
document.Animator.setBouncy(boden,true); 
document.Animator.setRGB(boden,128,100,70);

Wir fügen einen elastischen Boden - Rechteck- ein
Beiden Objekten, dem Ball und dem Boden geben wir jetzt die Eigenschaft bouncy.


Tabellenausgabe - Kombination zweier Applets
connection
ball8.html

document.DataTable.setSeries .........
tid=document.DataTable.getTableID();

id ist das Ballobjekt im Animator

document.Animator.makeDataConnection(id,tid,1,"t","0");
document.Animator.makeDataConnection(id,tid,2,"x","0");

Das muss man schon genauer ansehen


Grafikausgabe - Kombination mehrerer Applets
connections
ball9.html

 

Physlet Index