Stian Venum Mollersen: Making maths come alive with JavaScript

Stein Venum Mollersen (@mollerse) was talking about making maths come alive with JavaScript at Scotland.js, these are my notes from his talk.

Transforms are used a lot in graphics on the web, they allow us to alter the positions and shapes of objects.  What's actually happening?

The Matrix

Rectangular array of values, form the basis of calculations.   Underlying representation of transforms, apply a matrix to a point to get the new location of the point - maps one set of coords to another.

As matrixes have rows you can apply each row of the transform to each corresponding component of the coordinate.  I.e. the [x, y] of a coord.  However, 2D points still have three points - used for the perspective, normally 1 at all times.  Transform matrix must have same number of rows as point has columns.

Coordinate systems

Start with an 0,0 origin in the top left, then define x,y.  If we change the origin we get a different effect when applying a transform, the x and y are different.  CSS and Canvas/SVG have different default origins.

Representation of transforms

The definition of transform properties (e.g. translate()) map onto values in the transform matrix.  For a rotate transform the values in the matrix will be sin() and cos().  Skew/sheer transform uses tan() of the opposite coord (e.g x => tan(y), y => tan(x)).

Composing transforms

If we apply more than one transform to an object then we multiply the individual transformation matrixes together before applying to the points.  The order in which the transforms are applied matters.  When you do this with a lot of transforms it gets very hard to reason about.

3D transforms

The principle is the same but we now have more maths - not more complex, just more volume.