Developer Blog: Matrix Times, an iOS App Demonstrating Matrix Transformations

A couple of days ago I decided that a good way to show my maths for graphics skills would be to produce an app that allows graphing of polygons. This wouldn’t be possible without understanding how to measure the size of the screen, and to control the drawing of points, lines and fills. So far I haven’t added the transformation matrices, but that won’t actually be as difficult as what I’ve done so far.

The first thing I did was learn how to override the draw function of the UIView class. A good introduction to this topic can be found on AppCoda, which suggests creating a custom UIView subclass called DemoView. In this class, the draw function is overridden to run functions that draw shapes using UIBezierPath objects. My class is called GraphArea and I based my polygon on their createTriangle() function, but added three more points.

Each point in the polygon obviously has an X and a Y value, so my control panel needed to have a UIStepper to control each value, and a UITextField to display them all. In my main ViewController file, I created outlets actions for my 12 steppers. Within their actions, the steppers run a function that basically takes all the stepper values and passes it to the GraphArea instance. Once the polygon was being displayed properly, I thought it would be useful to also draw a circle at each point so they’re easier to track. Once I did this, I thought it would be even better if all 6 points were colour coded, and these colours were matched by the control panel so you knew which point you were moving.

I added the ability to maximise the graph area so that you can get a better look at the shape. This involves changing the constant of the constraint that positions the control panel (which has a fixed height) against the bottom of the screen to a negative value equal to its height. I used UIView.animate to make the change a smooth sliding motion and, since the GraphArea is within a constrained UIScrollView which scales automatically, it has to scale accordingly.

Although the height becomes equal to the ViewController’s height, the width has to scale by the same amount. Otherwise the polygon would only scale in one direction, and stretch instead of ‘zooming in’. It took  a while to get this right, but it basically involves increasing the width by the same amount as the height increases.

This is all I have so far. Hopefully the transformation matrices will be as easy to implement as I think they’re going to be. Then I can try to do some 3D graphics, which will obviously involve projecting a 3D cube onto the 2D plane of the phone screen.

Sounds easy enough…