Jump to content
  • Advertisement


  • Content Count

  • Joined

  • Last visited

Community Reputation

473 Neutral

About legends2k

  • Rank

Personal Information

  1. legends2k

    2D Transforms 101

    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
  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!