• # 2D Transforms 101

Math and Physics

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

Report Article

## User Feedback

Although I dislike math, you made it almost enjoyable to learn through the presentation (though nothing new to me).

I like the animations.

##### Share on other sites

I really dislike this form of presentation. Would you want to read a text book where you have to open every previous page if you want to read a random page? And you have to push a button for every sentence to appear?

##### Share on other sites

I really dislike this form of presentation. Would you want to read a text book where you have to open every previous page if you want to read a random page? And you have to push a button for every sentence to appear?

Do you really understand the difference between a book and a presentation? That too, an interactive one and why it relates well with transforms? If you'd looked carefully, pressing O while in the presentation gives you the option of seeking randomly too.

Constructive comments, as the site recommends, are much better than rants; try giving objective suggestions upon which we can work together to make the article better.

## Create an account

Register a new account

• ### Game Developer Survey

We are looking for qualified game developers to participate in a 10-minute online survey. Qualified participants will be offered a \$15 incentive for your time and insights. Click here to start!

• 0
• 0
• 4
• 3

• 16
• 11
• 9
• 25
• 54
×