Trifork Blog

Learn to write with Tracy

April 26th, 2012 by

I am very proud to announce Orange11’s first iPad application: Learn to write with Tracy (dutch: Leren Schrijven met Tracy) which has just been released world wide in both Dutch and English. I personally developed this app from scratch with the help of my colleague Dennis de Graaf for the graphical design work. I thought this would be a great opportunity to tell you a little bit what the app is all about and a sneak behind the scenes as to how it was made.


Learn to write with Tracy is targeted towards children between the ages of 4 and 7 who are ready to learn how to write. This app lets them do just that in a playful manner. This amazing looking app contains lots of different exercises which offer a variety of numbers, letters, letter combinations and capital letters. A child can complete an exercise by drawing on the screen with their finger or by using a stylus pen.

Exercises are grouped together into eight groups. Whenever a child completes all the exercises in any given group they are rewarded a fun sticker with the image of a ladybug, butterfly, etcetera.

How it works

To create the app I mainly used the UIKit and Core Animation frameworks to do all the graphical and animation work which is kind of straightforward. The interesting part is how the hand writing recognition works and how I created all the exercises themselves. I would like to tell you all about it.

Hand writing recognition

I created the hand writing recognition part of this app by implementing a custom subclass of the UIGestureRecognizer. This subclass reacts to touch events (touch down, touch moved, touch up, etc) and decides whether the character or number was written correctly when the user lifts his finger from the screen. The implementation of this class is simpler than you might expect.

Exercises basically consist of one or more arrays of x and y coordinates which I call checkpoints. Each array forms a single line you need to draw. For example a “g” needs just one line but a “4” requires you to draw two lines. As you’re drawing a line, the gesture recognizer records which checkpoints you passed. You pass a checkpoint if you come within a 25 pixel radius of the checkpoint. Only if you have passed all the checkpoints when you lift your finger up from the screen, the gesture recognizer marks the gesture as “recognized” and you can move on. You’re done once you’ve finished all lines in the exercise.

Drawing the exercises on screen

Based on the arrays of coordinates I described above, the exercises are dynamically drawn onto the screen. If I would have used straight lines to connect all the “dots” (checkpoints), all the exercises would look like the screenshot on the left:

In an attempt to smooth out the lines like you see in the screenshot on the right, I took an algorithm written in C# from a blog and translated it to Objective C. This turned out to do the trick perfectly! The C# code is quite complicated but executes rather quickly. I still don’t understand any part of the algorithm but hey, it does what I expected it to do! I now have smooth looking exercises, so I’m happy!

Creating the exercises

Take another look at the left screenshot in the Hand writing recognition section above. This is actually a screenshot of a little tool I built (Mac OSX app) to provide me with an easy way to create all the exercises. I called it the Character Designer and it simply allows me to point and click to create the exercises. Afterwards I can simply adjust the checkpoints by dragging them around on the screen. For this tool I copied the drawing logic from the Tracy iPad app so you can immediately see what the exercise is going to look like inside the iPad app.

The Character Designer tool saves all created exercises to a single JSON file. This JSON file is then packaged along with the Tracy iPad app which will take that very same JSON file as the input for drawing the exercises on the screen and being able to recognize the correct hand writing to complete the exercises. Here is an example of part of that JSON file. It describes how the lines of the letter “i” must be drawn and recognized.

        		{"x":265, "y":181, "arrow":true},
                {"x":245, "y":239},
                {"x":227, "y":292},
                {"x":229, "y":321},
                {"x":269, "y":298}
            	{"x":283, "y":116}

As you can see, the letter “i” contains two arrays of x and y coordinates (lines). One for the line and one for the dot. So a dot is simply expressed as a single-point line. Also, this JSON file contains information about where to place the guiding arrows on screen to help a child to write the character correctly. The exercise for the letter “i” contains just one arrow which is represented by the "arrow":true attribute on the first checkpoint on the first line. This implies that an arrow must be drawn from the first to the second checkpoint in that line. The JSON file above produces the following character in-game:

App Store

So this is it, this is how I made my first iPad app “Learn to write with Tracy”! It’s not only a great app with a worthy cause, it’s also a great test case for Orange11 seen as we are very active in the Education domain too. I hope your kids will all enjoy this fun way of learning how to write. If you want to know more read the case study. Otherwise, it is available in the App Store right now in both Dutch and English! Priced at €2,39 / $2.99 it is a pretty reasonable price for an educational iPad game like this that has a great learning benefit too. App Store link

2 Responses

  1. […] you want to read more about the application check out our blog or visit our website for the case […]

  2. December 26, 2013 at 09:57 by Jaco

    Hoi Tom, erg leuk dat je je ervaringen deelt mbt bouw van apps, en helemaal dat je ook bespreekt hoe je bepaalde dingen technisch hebt gedaan, erg leerzaam. Zelf net begonnen met leren apps te bouwen, vind je blogs hierover top, bedankt!