* @module Transform * @submodule Transform * @for p5
(p5, fn)
| 5 | */ |
| 6 | |
| 7 | function transform(p5, fn){ |
| 8 | /** |
| 9 | * Applies a transformation matrix to the coordinate system. |
| 10 | * |
| 11 | * Transformations such as |
| 12 | * <a href="#/p5/translate">translate()</a>, |
| 13 | * <a href="#/p5/rotate">rotate()</a>, and |
| 14 | * <a href="#/p5/scale">scale()</a> |
| 15 | * use matrix-vector multiplication behind the scenes. A table of numbers, |
| 16 | * called a matrix, encodes each transformation. The values in the matrix |
| 17 | * then multiply each point on the canvas, which is represented by a vector. |
| 18 | * |
| 19 | * `applyMatrix()` allows for many transformations to be applied at once. See |
| 20 | * <a href="https://en.wikipedia.org/wiki/Transformation_matrix" target="_blank">Wikipedia</a> |
| 21 | * and <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web" target="_blank">MDN</a> |
| 22 | * for more details about transformations. |
| 23 | * |
| 24 | * There are two ways to call `applyMatrix()` in two and three dimensions. |
| 25 | * |
| 26 | * In 2D mode, the parameters `a`, `b`, `c`, `d`, `e`, and `f`, correspond to |
| 27 | * elements in the following transformation matrix: |
| 28 | * |
| 29 | * > <img style="max-width: 150px" src="assets/transformation-matrix.png" |
| 30 | * alt="The transformation matrix used when applyMatrix is called in 2D mode."/> |
| 31 | * |
| 32 | * The numbers can be passed individually, as in |
| 33 | * `applyMatrix(2, 0, 0, 0, 2, 0)`. They can also be passed in an array, as in |
| 34 | * `applyMatrix([2, 0, 0, 0, 2, 0])`. |
| 35 | * |
| 36 | * In 3D mode, the parameters `a`, `b`, `c`, `d`, `e`, `f`, `g`, `h`, `i`, |
| 37 | * `j`, `k`, `l`, `m`, `n`, `o`, and `p` correspond to elements in the |
| 38 | * following transformation matrix: |
| 39 | * |
| 40 | * <img style="max-width: 300px" src="assets/transformation-matrix-4-4.png" |
| 41 | * alt="The transformation matrix used when applyMatrix is called in 3D mode."/> |
| 42 | * |
| 43 | * The numbers can be passed individually, as in |
| 44 | * `applyMatrix(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)`. They can |
| 45 | * also be passed in an array, as in |
| 46 | * `applyMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1])`. |
| 47 | * |
| 48 | * By default, transformations accumulate. The |
| 49 | * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions |
| 50 | * can be used to isolate transformations within distinct drawing groups. |
| 51 | * |
| 52 | * Note: Transformations are reset at the beginning of the draw loop. Calling |
| 53 | * `applyMatrix()` inside the <a href="#/p5/draw">draw()</a> function won't |
| 54 | * cause shapes to transform continuously. |
| 55 | * |
| 56 | * @method applyMatrix |
| 57 | * @param {Array<Number>} arr an array containing the elements of the transformation matrix. Its length should be either 6 (2D) or 16 (3D). |
| 58 | * @chainable |
| 59 | * |
| 60 | * @example |
| 61 | * function setup() { |
| 62 | * createCanvas(100, 100); |
| 63 | * |
| 64 | * describe('A white circle on a gray background.'); |