Goal #1: Basic new features

In a way, this rewrite had to happen no matter what, since you can never really know what features a program needs until you’ve played with it a bit. When I first wrote TiMo C1, I completely forgot about important features like the ability to select and move around multiple objects at a time. So much of TiMo has been built around the idea that only one object would be selected (the inspector, the guide system, even the UI), that adding in the ability to select multiple object would have taken a week or more, and even then been buggy. Other features that C1 didn’t/couldn’t have that C2 does/will include multicolored guides, the ability to move and animate the ‘camera’/viewpoint, the ability to rotate objects (that’s one of those “well duh” things that I had completely forgotten about until months into development), a large number of powerful hotkeys, and more.

Goal #2: Code Efficiency

TiMo C1 was pretty much my first Xcode project ever, right after “Hello World”. So, as you can imagine, memory management and code efficiency were not exactly my chief concern, no, my chief concern was “Hey, look at me, I’m an Xcode programmer now!”. Just about everything in C2 is more efficient, from the core all the way up to the UI (which I’ll talk about later). Possibly the biggest change in C2 is the completely new way of linking Items and Layers. ‘Items’ are the entities that store the properties of an object and handle keyframing. ‘Layers’ are what show up the editor, in other words, what you see. In TiMo C1 these were completely separate, the only way you could find the layer corresponding to a certain item (or vice-versa) was by searching through an array for an object with the same name. The thing is that Layers get all of their instructions (where to go, how big to be, what colors to draw, etc) from the Item, so every time you changed a frame or resized an object TiMo would have to look through the array as many as a hundred or so times. This was, as you can imagine, slow. Furthermore, the actual code that drew the objects into the layers was completely separate from the code that handled their properties, which lead to very messy code and a very messy plugin architecture.

I admit it, TiMo C1 was pretty awful, playing even simple animations could take as much as 50% of my processor power. TiMo C2 has a completely different approach to this. Items have direct pointers to their corresponding layers, and likewise, layers have direct pointers to their parent items. No more searching through arrays. Also, each type of object has it’s own subclass of  ’Item’ now, so all of the drawing code is right next to the keyframing code, and any object with special properties or requirements can implement that cleanly by overriding some functions. This not only makes my job easier, but now plugin development gets simplified from multiple protocols to just one subclass.

Goal #3: UI Efficiency

TiMo C2 has a lot of UI changes, many that you can see (the new Library view, for example), and many that you cannot (like the newly recreated editor). All of the new stuff goes by a new philosophy, “Use a lot of layers”. The library view, for example, is comprised of 49 layers. The reason for having so many layers is that nothing ever has to be redrawn. In the old TiMo, many large controls (like the timeline) were drawn into one layer, so every time you resized them, the entire layer had to be redrawn. The new library uses a lot of different layers with CALayerConstraints to automatically move them around, instead of redrawing them. Moving layers is handled by the graphics card, redrawing them is handled by the processor, so my new methodology makes TiMo run many many times faster (especially on newer machines). The same methodology was applied to the editor view in TiMo C2. The editor used to have 1 ‘overlay layer’ on top of all of the user layers that drew things like guides, rulers, and drag handles. That meant that every time you moved an object, the entire overlay had to be redrawn, which was the main reason why moving layers took so much power. In TiMo C2, everything has it’s own layer, even individual guides, so that hardly anything ever needs to be redrawn.

Goal #4: Clean Code

TiMo C1 had been through 3 complete UI overhauls before I abandoned it. There were about 20 full code files and hundreds of other methods that where no longer in use, remnants of old UIs. Not only that, I kept tacking on new features to the core, instead of having them be part of it from the start, so there was code strewn everywhere (it sort of resembled my bedroom, in a way). Unlike my bedroom, I’m making an effort to keep everything in the right spot, and get rid of things I don’t need anymore.

And there you have it, if you understood everything I just said, you have a lot of patience and a lot of coding experience. Congratulations :p -Keaton

• Be the top result of every google search imaginable.
• Find a plot hole in reality
• Write an autobiography of someone else, just to prove that the actual meaning of words doesn’t apply to me
• Become the next Shakespeare by writing a 1000 page book comprised entirely of adjectives
• Have a party where literally everybody in the world is invited, travel expenses paid
• Get the phone number: (481) 516 2342
• Write a song so beautiful that it makes Chuck Norris cry
• “Set” the “world record” for “number” of “air” quotes “used” in “one speech”
• Become a role model to myself
• Legally change my name to “Señór Choolo”
• Discover that The Hitchhikers guide to the Galaxy is actually non-fiction
• Become so awesome that the US government issues a search warrant to find the source of my awesomeness.
• Be famous for my mode of transportation – Steve Woz style (maybe I’ll use a jetpack or something)
• Invent a sport with so many rules that only people with an IQ of 200 and above can play it.
• Do another episode of iEye
• Get dugg so often that my website is never up
• Invent a really stupid internet term that sweeps the nation
• Eat an entire wheel of goulda cheese
• Become a macbreak weekly regular, make my personal jingle an hour and a half long
• Build a house entirely out of empty coke cans
• Make a video so awesome that YouTube’s servers are all brought down
• Have more twitter followers than the population of my town
• Do a TED talk without using any words with more than 2 syllables in them
• Discuss cream cheese for twenty minutes on at least 1 major news network
• Twitter so often that the public timeline and my twitter page always look exactly the same
• Go to the TWiT Cottage and ask for Evan Williams
• Get beat up by Leo Laporte (possibly as a result of the latter)
• Discover that Coca-Cola cures every disease known to man
• Buy the first Moon Bounce that is actually on the moon.
• Have so much money that I have to invent my own currency to keep track of it.
• Become Iron Man
• Hold the world record in something so ridiculous that it’s impossible to explain.
• Become the CEO of Microsoft, Re-incarnate BOB, ‘Accidently’ go bankrupt
• Make a documentary entirely about paint drying, make millions from people who lost bets.
• Have an asteroid named after me that later turns out to be on a collision course with earth.
• Star in “XKCD the movie” as a stick figure (I might have to loose some weight)
• √ Write a “My goals in life” blog post instead of doing homework

TiMo UI Demo

Me showing off a bunch of TiMo’s new features, like it’s new Timeline, Inspector, and Library! You can see the animations in action, which is like porn for geeks. That’s hot!
By the way, sorry for the poor picture quality, I’ll make it better next time, promise!

NOTE: This post is ongoing, and will keep changing as TiMo’s new interface keeps changing, nothing is final. If you have any ideas please leave a comment below, but you knew that already.

TiMo is the first cocoa app I’ve ever made, and it’s been a bigger learning curve than I anticipated. I thought that as soon as I learned to code I was done, but as it turned out a whole new set of challenges lurked just around the corner. When I started TiMo I had no clue about interface design, and so up until about a week ago it was littered with sheet windows, panels, and wasted space. Just to convince myself that it was actually feasible to make a vector animation program that grandma could use, I decided to redesign before it was even close to being done. The main point of the redesign is getting almost everything into one window and making it all accessible with as few clicks as possible.

One of the other things I realized is that even though the interface has to fit in a small space, it can’t be cramped.  Essential controls, such as the object library pictured here, need some breathing room. The library has it’s own tab now, meaning that when you want to add an object, the entire sidebar is devoted to the task of helping you find the one you want, which is especially helpful if you’ve got a big library of plugins or presets (both of which will be supported somewhere down the line). Each item has an icon so users can see what an object is at a glance, and a title and description so that if an object catches the users eye they can see exactly what it does without having to go through the docs. My old toolbar method took up way less space, but didn’t have any of those advantages.

Another thing I’ve noticed is the importance of visual cues, less obvious UI components that hint to the user what exactly is happening. Notice this image, for example. The plus badge is a cue that releasing the mouse button will cause something to be added, the picture icon suggests that it will be a picture of some sort, and the little blue highlight (which goes all the way around the view that the mouse is over, the image had to be cropped to fit) suggests that the view is ready to have something dropped on it. Combine those cues, and the user can infer that releasing the mouse button will add an picture to that view, which is exactly what it does. Animation also infers a lot, when you let go of the mouse, the view quickly scales down to nothing, then in it’s place an image object scales up. Of course, that’s a basic example, OS X has done that from the beginning, but since I had to write that from scratch in TiMo I had to actually think about it.

Turns out the OS X toolbar is there for a reason. This one is pretty self-explanatory, and most people know this already, but you can put essential controls, not just buttons, in the toolbar. TiMo is using a segmented control in it’s toolbar to switch between the different sidebar views. Controls in the toolbar stand out, are always visible (unless the user chooses to temporarily hide the toolbar), and tend to look pretty good. Don’t over-use the toolbar though, more than one or two controls can make the app look cluttered and messy (although it can be done well if you know what you’re doing).

For actual the actual graphics of the UI, I admit it’s quite tempting to make my own skin for UI controls that’s unique to my application. Don’t do it. A big part of the beauty and usability of OS X is it’s unity, every app looks and feels more or less the same, with enough wiggle room that they are all unique. Basically: USE COCOA! The only exception to this rule is if you need a control that’s not part of cocoa, like my keyframe indicator (to the right of all of the objects). In that situation, just make it look as cocoa-ish as possible (A surprisingly hard task that I haven’t quite figured out myself yet).

I’m still working on lot’s more stuff, like a nice timeline editor, a more complete inspector, a redesigned (unfortunately for me, also mostly re-written) CIFilters editor, and so on and so forth. Also, if anybody is interested in professionally designing me some better graphics (Object icons, Keyframe indicators, etc) for a cut of the profits that would be very nice, although I should probably worry about those later.

The exact year:

Yeah, I admit it, that last re-design wasn’t much of an improvement over the lack of a website that it replaced. This is take 2, with a more modern design backed by a powerful CMS (You’ll never figure out which … unless you look down a bit). It’s got a blog now, but you knew that already, or at least I hope you did, if not then you can’t possibly be reading this, which is impossible since you just read that. You little trickster you.

Hmm, writing all of this is a surprising amount of work. I should probably just have used Lorem Ipsum. The problem with that is that I have no idea what Lorem Ipsum is, it could be some satanist prayer for all I know, and I’m not entirely sure I want to be associated with that. I wonder if there’s some group of satanists somewhere just laughing at all of the accidental convert web designers.

Ok, just wikipedia’d it, turns out ‘The text is derived from Cicero’s De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or alternatively [About] The Purposes of Good and Evil)‘, or so they claim. Maybe this is some giant conspiracy, because really, does anybody speak latin anymore?