Reference transform2D()

transform2D()

This API is experimental

Its behavior may change in a future version of p5.js.

Creates a 2D transform inside a p5.strands shader callback.

A transform is a 3x3 matrix that stores a combination of moves, turns, scales, and slants. Calling transform2D() without arguments returns the identity transform, which leaves points exactly where they are.

A transform is built up by passing it to translate(), rotate(), scale(), shearX(), and shearY(). Each of those returns a new transform instead of changing the one passed in, so the result has to be assigned back, as in t = translate(t, 20, 0).

The finished transform is applied to a position with transformPoint().

transform2D() is the same function as mat3(). Use transform2D() when describing a transformation, and mat3() when thinking of the value as a plain 3x3 matrix.

It can also be called with a single number, which fills the diagonal of the matrix; a single matrix, which is resized (a 4x4 keeps its upper-left 3x3 block); 3 column vectors; or 9 values in column-major order.

Note: transform2D() can only be used inside a p5.strands shader callback.

Examples

Syntax

transform2D(values1, values2, ..., valuesn)

Parameters

values1, ..., valuesn
Number: nothing for the identity transform, one number, one matrix, 3 column vectors, or 9 values in column-major order.

Returns

a 3x3 transform.

Related References