A presentation/tutorial on 2D transforms for programmers and practitioners favouring intuition over mathematical rigour; animations are used to illustrate the effect of every transform explained. Click Here to view presentation. Firefox, Chrome or Opera recommended as they support animations; see Requirements below for details. Press ? while in the presentation for controls and Esc for an overview and quick navigation. Comments and suggestions are welcome.

Overview

Transformations are a general mathematical concept that is applicable to anyone working in:

• Computer Graphics
  • Animation
  • Game Programming (2D and 3D)
  • Image Processing
  • Motion Capture
  • UI Design
• Computer Vision
• Robotics
• Aeronautics
• Parallel Computing

Concepts discussed are dimension-indepedant; it's just easier to explain and visualize things in 2D but they're applicable to higher dimensions without loss of generality.

Instead of dealing with only elementary transforms (rotate, scale, translate) on points, which most resources do, it also covers:

• Basic math behind transforms (without matrices)
  • Matrix introduced past the basics since it's just a tool
• Composite transforms -- concatenation of multiple transforms
  • Anti-commutativity
  • Transforms about an arbitrary origin
• Active and passive viewpoints of transforms
• Transformation of coordinate systems
• Mapping between multiple coordinate systems
• Hierarchical Transforms

Requirements

The presentation was hand-crafted using HTML5, CSS3, JavaScript and SVG; so nothing more than a browser is required to view the presentation. Firefox, Chrome or Opera, even if you've an older version, is highly recommended since support for SVG animations isn't that great in other browsers; with browsers like Safari, Edge or IE you will not be able to see these animations -- caveat lector.

You can also view the presentation on a mobile or a tablet; the content, without any loss of fidelity, should get resized and fit to given form factor, thanks to vector graphics and CSS3. Touch (tap and swipe left/right) is supported both for navigation and animation control.

Animations

Transformations are better understood visually than with just dry theory. Hence every transformation workout is accompanied, along with the math, by an animation. Images with a graph sheet background contain animations. Simply click on such an image to cycle through the animation. Every click changes the image's state, animating it into a new figure. When you see the original figure you started with, it denotes the end of all the animation the image contains.

If you're using a keyboard to navigate the presentation, clicking the image steals focus from the presentation and sets in on to the image; simply click anywhere outside the image to give the focus back to the presentation. Now press space / -> to continue with the presentation.

Solution

The solution to problem of mapping the boy space to street space that is posed at the end of the presentation is in map_boy_to_street.md.

SVG

The demonstrations/interactive animations embedded within the presentation was done in SVG, the XML-based, open standard file format for vector graphics with support for animation. In English, all it has are just instructions like move to, line to, rect, circle, ellipse, etc. in a very readable, XML format and no unintelligible binary data. So a reader (yes, a human one too) can easily read and understand it; a renderer can render it at any resolution without any loss in fidelity. The presentation's first slide has a 3D-transformed background which too is an SVG -- it should show up as something similar to this; a simple check to see how well your browser supports SVGs and CSS3 transforms.

It's highly recommended that you fiddle with the SVGs under images directory. SVG format is very similar to PostScript (which also has commands like move to, line to, etc.) and is an excellent Hello World test bed (Short, Self Contained, Correct, Example) for learning transformations or 2D graphics in general. Oh they also have a tag for groupings which may be used to learn hierarchical transformations. An SVG is only more readable than a PS, PDF or XAML. Just open it in a (modern) browser to view it (no, not Edge, it doesn't do 3D CSS3 transforms in SVGs yet :), open it in your favourite text editor, muck around, save and refresh your browser to see the changes immediately; rinse and repeat.

Credits

• Computer Graphics using OpenGL, Francis Hill and Stephen Kelley
• 3-D Computer Graphics, Samuel R. Buss
• Essential Math for Games and Interactive Applications, James Van Verth and Lars Bishop
• 3D Math Primer, Fletcher Dunn and Ian Parberry
• reveal.js, the presentation framework, generously shared under the MIT licence by Hakim El Hattab
• MathJax for rendering beautiful math equations on any browser, American Mathematical Society
• Elementary affine transforms chart shared under CC 3.0, used as first slide background, CM Lee
• What is or isn't a linear transform, shared under CC 3.0, Ldo
• Reveal.js on Github pages, Vasko Zdravevski