Apply translations, rotations, reflections, and dilations to shapes. Compose transformations and see matrix representations.
Geometric Transformations Playground maps a shape through translations, rotations, reflections, and dilations, showing how its position, orientation, and size change. Multiple operations can be composed, with matrix representations connecting the geometric picture to its coordinate mapping. The most common source of confusion is operation order. Rotating a shape and then translating it generally produces a different result from translating it first, because each operation receives the coordinates produced by the preceding one.
A concrete input and expected output from the current implementation.
Input
Triangle vertices: (0, 0), (2, 0), (0, 1) Transformation: translate by (3, -1)
Expected output
Transformed vertices: (3, -1), (5, -1), (3, 0)
Translation by (3, -1) adds 3 to every x-coordinate and subtracts 1 from every y-coordinate. The triangle keeps its side lengths and orientation because all three vertices move by the same displacement.
Each transformation is applied to every vertex of the shape. For example, translation by (a, b) sends a point (x, y) to (x + a, y + b). Rotation, reflection, and dilation instead change coordinates relative to a center or reference line. The transformed coordinates and displayed shape describe the same geometric mapping.
When transformations are composed, the result of one operation becomes the input to the next. Matrix multiplication represents this combined mapping, but its written order depends on the displayed row-vector or column-vector convention. The reliable interpretation is the playground's stated transformation sequence. Applying its individual steps should place every vertex at the same final coordinates as the combined transformation.
Transformation composition is generally not commutative. For example, translating a point and then rotating it also rotates the translation displacement, while rotating first and translating afterward does not. Some pairs can commute in special cases, but swapping operations is not generally valid. Compare both sequences using the same original vertices and reference center.
No. Translations, rotations, and reflections are reversible, and a dilation is reversible when its scale factor is nonzero. To undo a sequence, apply each inverse transformation in reverse order. A zero-factor dilation collapses all points to its center, discarding their former positions, so no inverse transformation can reconstruct the original shape.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Calculate percentages, percentage change, and what percent one number is of another with step-by-step breakdowns.
Calculate tips and split bills between multiple people with customizable tip percentages and rounding options.
Calculate monthly payments, total interest, and generate amortization schedules for loans and mortgages.
Calculate Body Mass Index from height and weight with category classification and healthy range guidance.
Calculate sale prices, savings amounts, and final costs after single or stacked percentage discounts.
Compute mean, median, mode, standard deviation, variance, and other descriptive statistics from a data set.