Exploratories   Transformation Game


This applet introduces the user to the usage and mathematics of two-dimensional transformations using a fun, interactive play space.


Computer science students, anyone programming 2D or 3D computer graphics, or any interested in a better understanding of how transformations work.


The goal of this applet is to move the house (originally located at the origin of the play space) using individual transformation blocks so that it matches the darker destination house which is also located in the play space. When a match is detected by the program, the house will flash and a sound will be played. Move through individual challenges (of increasing levels of difficulty) by clicking on the Prev and Next buttons in the lower portion of the screen. There are currently twenty levels available.

The small puzzle-like pieces on the right side of the area represent individual transformation blocks (T = Translation, S = Scale, R = Rotation). Drag individual transformation blocks to the transformation chain area in the lower portion of the screen. The currently active transformation block is highlighted. When multiple blocks are present in the transformation chain, click on a block to activate it. When a transformation block is active, clicking and dragging the house in the central play area changes the parameters of the transformation (i.e., click and drag the house to translate it when a translation block is active). A transformation block whose legend includes a small asterisk indicates that the transformation will be animated by the program.