• 11/02/15 12:40 AM
    Sign in to follow this  

    2D Transforms 101

    Math and Physics

    legends2k
    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
    Sign in to follow this  


    User Feedback

    Create an account or sign in to leave a review

    You need to be a member in order to leave a review

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now


    furiousuk

    Report ·

      

    Share this review


    Link to review
    jbadams

    Report ·

      

    Share this review


    Link to review
    Gooey

    Report ·

      

    Share this review


    Link to review
    Orymus3

    Report ·

      

    Share this review


    Link to review
    tookie

    Report ·

      

    Share this review


    Link to review
    xexuxjy

    Report ·

      

    Share this review


    Link to review
    HyperV

    Report ·

      

    Share this review


    Link to review
    Migi0027

    Report ·

      

    Share this review


    Link to review
    ferrous

    Report ·

      

    Share this review


    Link to review