In graphical applications flipping is common and useful. A flip transform can be used to show a mirror image, like a character in a 3D scene peering into a pond or a reflection on the fender of a chopper. Flips can also be used to change between orthonormal coordinate systems. For example, OpenGL uses a right-handed coordinate system whereas DirectX uses a left-, and a flip transform can convert between the two. Likewise, a JavaScript canvas has a y-axis that grows downward, causing programmers to turn their heads upside-down or contort their hands to figure out the right-hand rule. (Thumb points right, index finger down, middle finger… what is this, yoga?) A simple flip can make the y-axis “normal.”
This article covers flip transformations, and by the end you’ll be able to create the neat kaleidoscopic drawing application that’s showcased in the above image. The accompanying code is written in JavaScript so that it can be run directly in a browser. It uses one external library, glMatrix, which handles matrix math. A 2D scene is used for simplicity, but the operations of course abstract to 3D. To follow along, you’ll need a basic understanding of linear algebra, and you should be comfortable with rotation, translation, and scale matrices. In particular, you should know how to rotate and orbit objects in a scene about arbitrary points. If you don’t…