Transplet
Transplet is a Java package for the didactics of geometric transformations. Developed in 1999, it includes six applets referring to six kinds of transformations. As reported
here it was used, among the others, in the Forma Mentis project. Sources are available
here.
Translation
The student is able to translate a shape on a surface by tracing the directional vector dragging a point inside the square and dropping it in any place on the surface. To include this applet in a Web page use this
HTML fragment.
<applet code=transplet.Translation archive=http://www.capuano.biz/files/transplet.jar width=300 height=300> <!-- applet name and surface dimensions -->
<!-- applet parameters -->
<param name="Background" value="236 249 237"> <!-- back color RGB -->
<param name="Foreground" value="80 80 80"> <!-- lines color RGB -->
<param name="FillPoly1" value="151 168 188"> <!-- poligon color RGB -->
<param name="DrawPoly2" value="105 120 140"> <!-- start poligon color RGB -->
<param name="FillStart" value="217 85 105"> <!-- start point color RGB -->
<param name="FillStop" value="217 85 105"> <!-- end point color RGB -->
<param name="FillMobile" value="98 98 176"> <!-- mobile point color RGB -->
<param name="Delay" value="10"> <!-- delay between frames -->
<param name="Step" value="2"> <!-- pixels per frame -->
<param name="PolyVertex_1" value="30 30"> <!-- poligon vertex XY -->
<param name="PolyVertex_2" value="80 30"> <!-- poligon vertex XY -->
<param name="PolyVertex_3" value="80 80"> <!-- poligon vertex XY -->
<param name="PolyVertex_4" value="30 80"> <!-- poligon vertex XY -->
<!-- you may use any number of vertexes -->
</applet>
Rotation
The student can rotate a shape on a surface by defining the rotation centre and angle. To include this applet in a Web page use this
HTML fragment.
<applet code=transplet.Rotation archive=http://www.capuano.biz/files/transplet.jar width=300 height=300> <!-- applet name and surface dimensions -->
<!-- applet parameters -->
<param name="Background" value="236 249 237"> <!-- back color RGB -->
<param name="Foreground" value="80 80 80"> <!-- lines color RGB -->
<param name="FillPoly1" value="151 168 188"> <!-- poligon color RGB -->
<param name="DrawPoly2" value="105 120 140"> <!-- start poligon color RGB -->
<param name="FillStart" value="217 85 105"> <!-- start point color RGB -->
<param name="FillStop" value="217 85 105"> <!-- end point color RGB -->
<param name="FillMobile" value="98 98 176"> <!-- mobile point color RGB -->
<param name="FillPivot" value="98 98 176"> <!-- pivot point color RGB -->
<param name="DrawArc" value="217 85 105"> <!-- arc color RGB -->
<param name="Delay" value="10"> <!-- delay between frames -->
<param name="Step" value="2"> <!-- pixels per frame -->
<param name="PolyVertex_1" value="30 30"> <!-- poligon vertex XY -->
<param name="PolyVertex_2" value="80 30"> <!-- poligon vertex XY -->
<param name="PolyVertex_3" value="80 80"> <!-- poligon vertex XY -->
<param name="PolyVertex_4" value="30 80"> <!-- poligon vertex XY -->
<!-- you may use any number of vertexes -->
</applet>
Axial Symmetry
The student can obtain the symmetric image of a shape by drawing the axis of symmetry on the surface. To include this applet in a Web page use this
HTML fragment.
<applet code=transplet.AxialSimmetry archive=http://www.capuano.biz/files/transplet.jar width=300 height=300> <!-- applet name and surface dimensions -->
<!-- applet parameters -->
<param name="Background" value="236 249 237"> <!-- back color RGB -->
<param name="Foreground" value="80 80 80"> <!-- lines color RGB -->
<param name="FillPoly1" value="151 168 188"> <!-- poligon color RGB -->
<param name="DrawPoly2" value="105 120 140"> <!-- start poligon color RGB -->
<param name="FillStart" value="217 85 105"> <!-- start point color RGB -->
<param name="FillStop" value="217 85 105"> <!-- end point color RGB -->
<param name="DrawLine2" value="217 85 105"> <!-- drawing line color RGB -->
<param name="Delay" value="10"> <!-- delay between frames -->
<param name="Step" value="2"> <!-- pixels per frame -->
<param name="PolyVertex_1" value="30 30"> <!-- poligon vertex XY -->
<param name="PolyVertex_2" value="80 30"> <!-- poligon vertex XY -->
<param name="PolyVertex_3" value="80 80"> <!-- poligon vertex XY -->
<param name="PolyVertex_4" value="30 80"> <!-- poligon vertex XY -->
<!-- you may use any number of vertexes -->
</applet>
Central Symmetry
The student can obtain the central symmetry of a shape as a rotation with fixed angle of 180°. To include this applet in a Web page use this
HTML fragment.
<applet code=transplet.CentralSimmetry archive=http://www.capuano.biz/files/transplet.jar width=300 height=300> <!-- applet name and surface dimensions -->
<!-- applet parameters -->
<param name="Background" value="236 249 237"> <!-- back color RGB -->
<param name="Foreground" value="80 80 80"> <!-- lines color RGB -->
<param name="FillPoly1" value="151 168 188"> <!-- poligon color RGB -->
<param name="DrawPoly2" value="105 120 140"> <!-- start poligon color RGB -->
<param name="FillStart" value="217 85 105"> <!-- start point color RGB -->
<param name="FillStop" value="217 85 105"> <!-- end point color RGB -->
<param name="FillMobile" value="98 98 176"> <!-- mobile point color RGB -->
<param name="DrawArc" value="217 85 105"> <!-- arc color RGB -->
<param name="Delay" value="10"> <!-- delay between frames -->
<param name="Step" value="2"> <!-- pixels per frame -->
<param name="PolyVertex_1" value="30 30"> <!-- poligon vertex XY -->
<param name="PolyVertex_2" value="80 30"> <!-- poligon vertex XY -->
<param name="PolyVertex_3" value="80 80"> <!-- poligon vertex XY -->
<param name="PolyVertex_4" value="30 80"> <!-- poligon vertex XY -->
<!-- you may use any number of vertexes -->
</applet>
GlissosymmetryThe student can obtain this kind of transformation on a shape by composing an axial symmetry and a translation whose directional vector is parallel to the axis of the symmetry. To include this applet in a Web page use this
HTML fragment.
<applet code=transplet.GlyssoSimmetry archive=http://www.capuano.biz/files/transplet.jar width=300 height=300> <!-- applet name and surface dimensions -->
<!-- applet parameters -->
<param name="Background" value="236 249 237"> <!-- back color RGB -->
<param name="Foreground" value="80 80 80"> <!-- lines color RGB -->
<param name="FillPoly1" value="151 168 188"> <!-- poligon color RGB -->
<param name="DrawPoly2" value="105 120 140"> <!-- 1st start poligon color RGB -->
<param name="DrawPoly3" value="105 120 140"> <!-- 2nd start poligon color RGB -->
<param name="FillStart1" value="217 85 105"> <!-- 1st start point color RGB -->
<param name="FillStop1" value="217 85 105"> <!-- 1st end point color RGB -->
<param name="FillStart2" value="217 85 105"> <!-- 2nd start point color RGB -->
<param name="FillStop2" value="217 85 105"> <!-- 2nd end point color RGB -->
<param name="DrawLine3" value="217 85 105"> <!-- line color RGB -->
<param name="FillMobile" value="98 98 176"> <!-- mobile point color RGB -->
<param name="Delay" value="10"> <!-- delay between frames -->
<param name="Step" value="2"> <!-- pixels per frame -->
<param name="PolyVertex_1" value="30 30"> <!-- poligon vertex XY -->
<param name="PolyVertex_2" value="80 30"> <!-- poligon vertex XY -->
<param name="PolyVertex_3" value="80 80"> <!-- poligon vertex XY -->
<param name="PolyVertex_4" value="30 80"> <!-- poligon vertex XY -->
<!-- you may use any number of vertexes -->
</applet>
OmeomorphismThe student can obtain an omeomorphism of a shape by simply clicking on it in different places. To include this applet in a Web page use this
HTML fragment.
<applet code=transplet.Omeomorphism archive=http://www.capuano.biz/files/transplet.jar width=300 height=300> <!-- applet name and surface dimensions -->
<!-- applet parameters -->
<param name="Background" value="236 249 237"> <!-- back color RGB -->
<param name="Foreground" value="80 80 80"> <!-- lines color RGB -->
<param name="FillPoly" value="151 168 188"> <!-- poligon color RGB -->
<param name="PolyVertex_1" value="150 77"> <!-- poligon vertex XY -->
<param name="PolyVertex_2" value="169 133"> <!-- poligon vertex XY -->
<param name="PolyVertex_3" value="229 133"> <!-- poligon vertex XY -->
<param name="PolyVertex_4" value="180 167"> <!-- poligon vertex XY -->
<param name="PolyVertex_5" value="199 223"> <!-- poligon vertex XY -->
<param name="PolyVertex_6" value="150 188"> <!-- poligon vertex XY -->
<param name="PolyVertex_7" value="101 223"> <!-- poligon vertex XY -->
<param name="PolyVertex_8" value="120 167"> <!-- poligon vertex XY -->
<param name="PolyVertex_9" value="70 133"> <!-- poligon vertex XY -->
<param name="PolyVertex_10" value="131 133"> <!-- poligon vertex XY -->
<!-- you may use any number of vertexes -->
</applet>
