Transformations are a general mathematical concept that is applicable to anyone working in:
- Computer Graphics
- Game Programming (2D and 3D)
- Image Processing
- Motion Capture
- UI Design
- Computer Vision
- 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
- Transforms about an arbitrary origin
- Active and passive viewpoints of transforms
- Transformation of coordinate systems
- Mapping between multiple coordinate systems
- Hierarchical Transforms
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.
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.
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.
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
- 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