Wireframes

One of the first things I get asked when explaining the 52apps business model is “How can you possibly design an app in a week?” After all, most development companies spend months building just one; at least a week is spent on storyboarding and wireframing alone, so how is it feasible to conceptualize, mock up, and build one from the ground-up in five days?

It was this aspect that I grappled with the most in taking this position. Over the past several years, I've gotten better at thinking—or, well, designing—on my feet, but condensing the multi-step development process into a week is still pushing it. I get asked for a homescreen mockup before I've even considered a color palette. This is only the surface of the matter, though; an equal, and perhaps greater, conflict arises when the deadline-driven environment meets the time-intensive, perfectionistic side of design. Let me explain.

The past decade has seen a greater push for designers to explore the origins of the profession, a back-to-basics approach that has resulted in the revival of the letterpress and old-school design. Designers who have grown up viewing computers as the tools of the trade are discovering the tactile pleasure of inking cast-metal type and pressing it into paper. We are encouraged through our peers and myriad design blogs to be more than just pixel-pushers and day-job designers; we are encouraged to be craftsmen and lifetime students of design, for whom “pretty good” isn't good enough. Inevitably, I've been swept up in this movement. And that's alright. In an increasingly lukewarm society, it feels good to be passionate about something.

But it's this passion that has to be tempered. Take it, mold it, beat it into the shape of a week, but know that there are people waiting on you—so don't be too perfectionistic. Compromises have to be made. In the words of one of my friends, “Where are your wireframes?” Sometimes there aren't any. A thumbnail sketch, maybe, and then it's off to the races. Design compulsions have to be reconciled with deadlines. It's the only way you can hope to design an app in a week.

The Tweet Within the Tweet

When one sees Tweets in their newsfeed, its unlikely they look too far past the message, the user, and the image of the user who posted it.

But what information is really sent with a Tweet? Just that?



Actually, all of that.

From a single Tweet, we can take all of the user's info (see the 'user' dictionary within the Tweet dictionary), the Tweet's text, how many times it has been retweeted, if you have retweeted it, where it was posted from, and (if the user sent them) location properties, among other things.

To a user this information may be boring, but for development purposes this makes developing custom Twitter clients much easier. For example, when coding a tableview, all you need to use is the "screen_name" value under the user dictionary for an author, the "text" value for the tweet, the "profile_image_url_https" value under the user dictionary for the image, and the "created_at" value for the time it was posted if you choose to include that.

We can also construct an entire user profile from the tweet. Because the user dictionary is passed as well, we have all the information that the user has on his/her profile. So, we can tell that this tweet is from a news source, is from Columbia, SC, how many followers the news source has, how many users the news service is following, their background/background color, description, etc. This is enough to recreate an entire user profile.

I can't comment on what we're building this for quite yet, but it will be much bigger than the apps we have already put out.

The Penguin Formerly Known as Pepper

Until about a month ago I never thought I'd be involved with the making of a children's game, much less code one with a framework I'd never used before. But looking back on it, I'd have to say I had a blast doing it. Not only did I learn a ton about cocos2d and iOS in general, but as a team we really made the app our own.

A large part of that was the sounds, so without further ado, I figured I'd let yall see an old development preview of the app before the final audio was recorded. The sample audio you hear is from Andrew and Gabe.

See Arctic Math on the App Store.

This Bar Sucks, Let's Bounce! (How to Recreate Apple's Bounce Animation)

First an introduction. My name is Andrew Askins. I am a rising sophomore in the Computer Science program at the University of South Carolina where I am in the Honors College. I like bad puns, and good books. I've always liked computers and been fascinated by the incredible things modern technology can do, especially from a software stand point, but I also love the outdoors and so always told myself I'd get a job where I could be outside, moving around. In high school I tried to convince my parents on multiple occasions that everything I was doing was pointless and I should just head out West and become a mountain guide. Then I came to college and took Algorithmic Design I and got completely hooked on coding. Now less than a year later three of my friends and I somehow landed a job with this awesome new company called 52apps. And so here we are.

Also the reason I'm posting now rather than a week ago when we got our blog up and running is that I just got back form Omaha, Nebraska, where I was covering the College World Series for the Daily Gamecock, the student newspaper at USC, where I also work as a Photo Editor. If you're interested you can check out our coverage here:

For any aspiring software developers out there like myself, let me fill you in on something I never realized, but learned very quickly on arriving here at 52apps. You can never know everything, obviously. SO the really important thing isn't how much you know. The important thing is knowing how to search for what you don't know, and how to learn quickly from what you find. In one of the first weeks that I was here I asked Brendan a question about how to do something rather trivial, his response was this.

So one of the first really interesting things that I had to figure out how to do after coming to work here was to create a bounce animation to imitate the animation that occurs when you tap the camera icon on the iPhone lockscreen. I was working in the iPhone version of TapNotes which consisted of a screen like the one below with a view for all of your notes, a view for the current note you're working on and a bar in between with controls for the recorder.

So I've gotten all of the panning and resizing done and am feeling pretty good, and Brendan comes in and shows me the tap animation on the iPhone lockscreen and says, now make it do that! Luckily I found a really awesome blog entry by Soroush Khanlou (If you get a second you should check it out here), who is probably considerably smarter than me that does a great job of explaining damped oscillation equations and how to code them. From there I was able to take his code and adapt it to write my own bounce animation that's extremely close to Apple's.

Accomplishing this neat animation is not actually that difficult. It requires a little bit of math and some trial and error but all in all it takes maybe 20 or 30 lines of code. First we need our equation for damped osciallation. I took the equation given in Khanlou's blog post and then edited it to fit our needs. One important difference is that the values it will generate need to all be negative, this is because the values apply to the y position of whatever we are going to bounce, and because the coordinate system in iOS is inverted, then we need all of these positions to be negative (because we want our bar to bounce upwards). So the equation we get is this:

Sin gives us a wave, and then by adjusting the equation we can take this wave and damp it down so that it will eventually peter out and the values will approach zero, and thus our screen won't keep bouncing forever and ever and ever, because that would probably tick off the people using it. To adjust the size of the equation, simply adjust the constants. What we get when we graph our equation is this...

And the final product should look like this:

Now down to the coding... if you haven't already, add the UIGestureRecognizer Delegate to your header file...

@interface TapNotesRecorderViewController_iPhone : UIViewController<UIGestureRecognizerDelegate>

Next go into your viewDidLoad method and initialize your UIGestureRecognizer...

UITapGestureRecognizer *myTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleMyTap:)];
    [tapView addGestureRecognizer:myTap];
    myTap.delegate = self;
    [myTap release];
    tapView.userInteractionEnabled = YES;

For our purposes we needed to confine the gesture recognizer to a small area on the controls bar so to do this I created a small rectangular view in interface builder, linked it up and and added it in the header file so that I could add the gesture recognizer to this view.

Next you have to create a handleMyTap method so that you can call the animation when the view is tapped...

- (void)handleSingleTap:(UITapGestureRecognizer *)sender { 
    if (sender.state == UIGestureRecognizerStateEnded)    
    { 
[self bounceAnimation:aView]; /*This is the view that we want to bounce, not the view to handle the tap Gesture*/
    } 
}

The if statement just checks to make sure that the tap has ended before firing the bounce animation, and then once inside you call your bounce animation method. And finally implement the bounce animation (it is best to separate this out into a separate method so that you can re-use it later if you have to)...

-(void)bounceAnimation: (UIView *)myView
{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position.y"];
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    animation.duration = 1.5;
int steps = 100;
float value = 0;
float e = 2.71;
    float origin = myView.frame.origin.y;
for (int t = 0; t < steps; t++) 
    {
        value = -abs(60 * (pow(e, -0.055*t) * sin(.144*t)));
  
 [values addObject:[NSNumber numberWithFloat:difference]];
    }
    animation.additive = YES;
    animation.cumulative = NO;
    animation.values = values;
    
    animation.removedOnCompletion = YES;
    animation.fillMode = kCAFillModeForwards;
    animation.delegate = self;
    [myView.layer addAnimation:animation forKey:nil];
}

What this code essentially does is run through a for-loop, generating 100 values at different places along our bounce. We then populate an array with these values and the CAKeyFrameAnimation uses the array of values to generate the animation. Be sure to set animation.additive = YES, so that it will continue to add the values to our starting point, but set animation.cumulative = NO, or else rather than a bounce you'll get a rocket flying offscreen. And if you follow this you should be able to closely replicate apple's bounce animation! Thanks for reading and be sure to keep up with 52apps, we'll have lots more exciting things coming soon.

How to Transcend Space and Time!

Okay, maybe that title was a bit misleading…if not incredibly. However, overcoming position and timing issues were big obstacles in WordTower. One of the biggest pitfalls in cocos2d's animation engine is how it creates animations based on their duration instead of their speed. For static animations, this is fine. However, when it takes the same amount of time to move the crane to the 1st box that it does to the 3rd, that is not cool. With this method, we are either waiting 3 seconds to move the equivalent of maybe 5 feet, or we are flying across the screen in a millisecond. Once again, not cool.

So, how do we get around this?

If you remember back to high school geometry class, the distance formula can be used to get the distance between two points on a graph.

If we use this formula in our app, it can be used to do the same thing: calculate the distance between two points (sprites in our case). However, this isn't useful because we want our value to be in seconds, not positions.

However, if we divide by a set variable, we'll call it speed, we can convert our number to a useable amount in seconds.

In Objective-C, this looks like this:

//New method

-(float)getCraneTimeToPoint:(CGPoint)Point1 fromPoint:(CGPoint)Point2 speed:(int)Speedvar {
    return sqrt( pow((Point1.x-Point2.x),2) + pow((Point1.y-Point2.y),2) ) / Speedvar;
}

Also, note the use of floats. Do. Not. Use. Ints. In. Animation. Durations. You can, but I can guarantee you that you're going to want something much more precise if you're going for continuity between animations, and you also have much more choice of what you can do with floats.

The use of a 'speed' variable is also nice, because it gives you control of how multiple animations flow together, regardless of position or the time of the animations.