Stephen Smith's Blog

Musings on Machine Learning…

My First Experience Writing an iPad App

with 2 comments


Introduction

To get a feel for iOS programming I thought I would create a simple iOS application to display a Koch snowflake. There would be a simple edit box where you enter the fractal level and then it will draw the snowflake. I thought this would be a good example to get a feel for the XCode development environment, simple user interaction with controls and a flavor for some graphics programming.

Two jobs before I started with Computer Associates to work on CA-Accpac/2000, I worked for a company that created stock market software. They were working on a new workstation version for the NeXT computer. So with that company (over 20 years ago), I gathered good experience in this environment. We programmed in Objective-C and used the innovative NeXTStep development environment which had many neat features like using DisplayPostScript for rending on-screen graphics.

Now so many years later, here I am programming iOS and relearning Objective C. Although Apple has had many battles with Adobe over the years resulting in display postscript never being mentioned, I still see it there in how you do things. Since I’m newly relearning all this stuff and there have been many changes in the past 25 years, don’t take everything I say as the best way to do things, they are the way I first figured out how to do things for this simple project. Especially if you can do something visually in XCode versus writing code, I probably wrote code because that’s what I’m most comfortable with.

XCode

XCode is Apple’s IDE for doing both native Mac OS and IOs development. XCode is a very rich development environment with many built in tools for things like unit testing, debugging, screen designing and such. It has built in support for the Git source code control system, which is used by default for all projects. There is much built in documentation and help, as well as emulators to test and debug your iPad and iPhone applications. The main requirement of XCode is that it runs on MacOS. Hence I have to run it on my trusty MacBook Air.

XCode has a great many productivity helpers like auto-complete and many way to graphically create your programs rather than coding them. The thing that gave me the most trouble was the graphical part, I’m fine with writing code, but graphically connecting things wasn’t as intuitive to me as I would have expected.

xcode

Koch Snowflakes

Koch snowflakes are simple fractals that are a good way to give an idea of how fractals can build complexity out of simplicity. Basically you start with a base shape, in this case a triangle, then you replace each line segment with a new shape, in this case the two lines with a “v” in the middle. Then you do this recursively to get more and more complicated shapes. Below is the progression from level 0, the base shape to level 1, with the base shape lines replaced by the fractal generator and then so on as the level increases.

koch-snowflake-progression

This is a fractal because in the limit as the level goes to infinity, the shape has a fractal dimension, in that it is somewhere between 1 dimensional and 2 dimensional in a defined mathematical sense.

Turtle Graphics

To me the easiest way to draw fractals is with a turtle graphics library. This is a simple drawing library where you tell a turtle to either turn or move forwards. As he moves he leaves a trail. Hence the base shape for the Koch snowflake is forward 1, turn 60, forward 1, turn -120, forward 1, turn 60 forward 1. This is then really easy to apply recursively to draw fractals.

Objective C

Objective-C was one of the first object oriented extensions to C. It was implemented as a pre-processor that generated C code which was then compiled using regular C development tools. This greatly simplified implementation, but the syntax reflects that it was designed to be easily processed by a preprocessor. It’s certainly evolved since its early days, but is perhaps considered a bit clunky as a result. Objective-C has all the object oriented features like inheritance and classes, but lacks a lot of the complexity of C++. The object oriented features are more similar to Java, but unlike Java, Objective-C still has all of C under it, meaning all the pointers and pointer related features that Java removed; hence you can easily crash your iOS app if you make pointer mistakes like in a C program.

Both Java and C++ overloaded the pointer syntax to call methods and such making them behave like function pointers in a structure. Objective C tried for a syntax to reflect message passing using their square bracket syntax of [object method] to send a message to an object. See the source code listings below for some examples. Recently Objective C has adopted the pointer type syntax as an option but considers it good coding practice to only use this for accessing class properties.

My iPad App

When you create a new project in XCode you get a complete working program and then only have to fill in your own code for your functionality. I edited the iPad storyboard to have a single page consisting of a label and text field for the fractal level and then a view to draw the image on. I created a couple of classes, one for turtle graphics, another to draw the fractal and then one to act as the interface to the UI form. All in all, not a lot of code and it seems to run fairly well. I placed the source code listings at the end so as not to clutter up this article. Beware that WordPress often changes characters for typographic reason, things like regular double quotes to 66 or 99 type quotes, this tends to introduce syntax errors if you cut and paste the code, so beware.

Storyboards are a relatively new feature to XCode, they allow you to define many screens within a single file and to connect them all together, so a button on one screen can trigger a transition to another screen, all setup graphically with no code. This is a great tool for quickly prototyping applications, but since for this app, I only have one screen it isn’t really used.

To connect the controls in the storyboard to the code, you create matching variables in the generated interface file and then drag an arrow from a small o in the margin to the matching control in the storyboard file (a process I find a bit cumbersome). Then you can ask for notifications and set properties for the various controls. You can see a couple of examples in the interface file below.

With any object oriented framework like Cocoa Touch there is quite a steep learning curve. Not only do you need to find the properties and methods to call to do things for you, but you also need to learn when you have to extend one of the system base classes. In the case of drawing the fractal, it’s a matter of putting a view control on the page, but then you need to extend the default class to override its drawRect method that is called whenever the view need redrawing. This is similar to handling a WM_PAINT message in Windows. Again you can have a look at the code down below.

Below are a couple of screen grabs of running this iPad app in the iPad emulator on my MacBook Air:

level2

 

level4

Summary

Sadly you can’t just post and distribute iPad apps, but have to go through the Apple iTunes store. I’m not going to bother posting this app, so you can’t play with it. I do like being able to post source and app to let people just run it, but Apple doesn’t allow this.

Creating this app was fun. XCode is quite a good development environment and they make it easy to write code quickly. iOS is a very full featured operating system with many built in services and a great deal of power. This are tons of books and internet articles on iOS development along with all the Apple documentations. Now to dig in a bit deeper to what you can do.

Source Code Listings

//
//  csFractal.m

//  Fractal1
//
//  Created by Stephen Smith on 2013-03-05.
//  Copyright (c) 2013 Stephen Smith. All rights reserved.
//

#import "csFractal.h"
#import "csTurtleGraphics.h"

@implementation csFractal
{
    csTurtleGraphics *tg;
    CGContextRef context;
}

- (id)initWithContext: (CGContextRef) inContext
{
    self = [super init];
    if (self)
    {
        context = inContext;
        tg = [[csTurtleGraphics alloc] initWithContext:context];
    }
    return self;
}

- (void) KockSnowflake:(int)level
{
    [tg turn: 60];
    [self KockSnowflakeSide: level size: 500];
    [tg turn: -120];
    [self KockSnowflakeSide: level size: 500];
    [tg turn: -120];
    [self KockSnowflakeSide: level size: 500];
}

- (void) KockSnowflakeSide: (int)level size:(double) size
{
    if (level == 0)
    {
        [tg move: size];
    }
    else
    {
        [self KockSnowflakeSide: level-1 size: size/3];
        [tg turn: 60];
        [self KockSnowflakeSide: level-1 size: size/3];
        [tg turn: -120];
        [self KockSnowflakeSide: level-1 size: size/3];
        [tg turn:60];
        [self KockSnowflakeSide: level-1 size: size/3];
    }
}

@end

//
//  csTurtleGraphics.m
//  Fractal1
//
//  Created by Stephen Smith on 2013-02-23.
//  Copyright (c) 2013 Stephen Smith. All rights reserved.
//

#import "csTurtleGraphics.h"

const double pi = 3.14159;

@implementation csTurtleGraphics
{
    double x, y;
    double angle;
    CGContextRef    context;
}

- (id)initWithContext: (CGContextRef) inContext
{
    self = [super init];
    if (self)
    {
        context = inContext;
        x = 50.0;
        y = 150.0;
        CGContextMoveToPoint(context, x, y);

        angle = 0.0;
    }
    return self;
}

- (void)move:(int) dist
{
    x = x + dist * cos( angle * pi/ 180.0);
    y = y + dist * sin( angle * pi/ 180.0);
    CGContextAddLineToPoint(context, x, y);

}

- (void) turn: (int) angleIncrement
{
    angle = angle +angleIncrement;
}
@end

//
//  csViewController.m
//  Fractal1
//
//  Created by Stephen Smith on 2013-02-10.
//  Copyright (c) 2013 Stephen Smith. All rights reserved.
//

#import "csViewController.h"

@implementation csViewController

@synthesize textField;
@synthesize fracView;

- (void)viewDidLoad
{
    [super viewDidLoad];
                // Do any additional setup after loading the view, typically from a nib.
    textField.text = @"2";
    [fracView setLevel: 2];

    [[NSNotificationCenter defaultCenter]
        addObserver:self
        selector:@selector(textChangeNot:)
        name:UITextFieldTextDidChangeNotification
        object:textField];

}

- (void) textChangeNot: (id) object
{
    [fracView setLevel: textField.text.intValue];
    [fracView setNeedsDisplay];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

//
//  csFractalView.m
//  Fractal1
//
//  Created by Stephen Smith on 2013-02-17.
//  Copyright (c) 2013 Stephen Smith. All rights reserved.
//

#import "csFractalView.h"
#import "csFractal.h"

@implementation csFractalView
{
    csFractal *frac;
    int level;
}
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        level = 1;
    }
    return self;
}

- (void) setLevel: (int)lev
{
    level = lev;
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code

    UIColor* currentColor = [UIColor blackColor];
    CGContextRef    context = UIGraphicsGetCurrentContext();

    //Set the width of the "pen" that will be used for drawing
    CGContextSetLineWidth(context,1);
    //Set the color of the pen to be used
    CGContextSetStrokeColorWithColor(context, currentColor.CGColor);

    frac = [[csFractal alloc] initWithContext: context];
    [frac KockSnowflake: level];

    //Apply our stroke settings to the line.
    CGContextStrokePath(context);
}

@end
Advertisements

Written by smist08

March 16, 2013 at 4:59 pm

2 Responses

Subscribe to comments with RSS.

  1. SutoCom

    March 29, 2013 at 1:32 am

  2. […] and wrote a small Objective-C program to draw a simple fractal on an iPad. Which I then blogged on here. Now we are a few years later and I thought I would give Apple’s new programming language Swift a […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: