Matrix Times is out now

To quote the App Store description:

Create a polygon with an outline and fill. When you’re happy with your shape, you can apply up to 3 transformations of any of these types:

– Rotation
– Translation
– Scaling
– Reflection
– Shearing

Watch the numbers in any of the 3 transformation matrices change as you control them with easy-to-use sliders and switches. Watch in real time as the shape changes, mirroring the preview of the transformation matrix.

My original graph area class was relatively simple, only drawing the shape based on the points given.

However, with the addition of custom reflection line locations, as well as an optional ‘ghost’ of the original shape to contrast with the transformed shape, the class quickly became much more complicated.

Attack of the Assembly Line (GMTK 48 Hour Game Jam)

We were given the challenge in this game jam to create a game that followed the theme ‘genre without mechanic’. We basically had to think of a genre, and remove an essential component of how that genre usually works. We decided to go for a platformer in which the player has no control of their movement. This was achieved by the player character being a robot’s head going along a conveyor belt in a factory. Over the course of the game, the player can use the treadmills as well as trigger springboards to launch themselves to the next body part as they gradually rebuild themselves piece by piece.

A web-based version of this game can be found on our team page, or embedded below.

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…