Data Artist

The making of TileUI

I’ve posted a video that shows the progress that I made during the first 12 days of working on TileUI. For about the first 2 weeks I saved a snapshot of the progress I had made (I tried to save a snapshot each day, but I missed a few). The video below is a combined video of each of these, it starts at day 1 and goes through day 12.

I stopped taking daily snapshots (and I stopped making much progress) after the first two weeks because I started working on a contracting gig. I’ve gotten much further with the software now (as the previous AIR demo video shows). But I’m not making the day to day advances like I did the first few days (man, if only I could be unemployed forever).

Here’s a quick breakdown of how things went:

Day 1: Learn Actionscript Physics Engine. By the end of the day I had a decent physics simulation running that allowed me to throw around particles. Prior to this project I had never worked with APE, it’s a solid physics engine (my only complaint is how CPU intensive it is).

Day 2: Learn PaperVision 3D. Combine PaperVision with APE. Prior to this I hadn’t played with PV3D and I figured it was about time I learn. By the end of the day I had figured out the basics of PV3D and managed to map APE particles to 3D tiles in PV3D. Damn, these libraries are good.

Day 3: I got the tiles to display images. And I got the basic selection system working where you can lasso a set of tiles and they get grouped. The group was just a messy group of tiles, but it was a start.

Day 4: Added Flickr support to load tiles straight from Flickr. Added dynamic sizing of tiles.

Day 6: Made grouping tiles put them into 3D stacks. Added double clicking tiles to do something based on the tile content, ie open larger Flickr image. (I don’t remember why I don’t have a day 5 or 8 snapshot)

So what?
I thought this was cool because it shows a) how awesome and fast developing in Flex/AS3 is and b) how badass open source community libraries for Flex are. I was able to grab these open source libraries and within a few days have something pretty sweet to show for it. A big thanks to everyone behind the PaperVision project, and to Alec Cove for the APE engine. You guys make this stuff easy.

At last count I am using 10 different open source libraries in the TileUI project in one way or another.

Related:

I'll be at Adobe this Friday for the FlexCamp event. If you're there then find me and say hi (sadly no mohawk at the moment, so I'm not as easy to spot). I'll probably be one of the people drinking in the back. I don't know how the whole sessions…

For various reasons, which I may or may not discuss in the future, I will not be entering TileUI into the AirDerby contest. Good luck to everyone entering the contest. My AIR app would've kicked your AIR app's ass :P Anyone want to just give me $100,000 so I can…

Here's a demo video of tileUI Desktop running as an AIR app. The video shows drag and drop of local files into tileUI, drag and drop photos from iPhoto, using motion detection on a webcam to take pictures, extracting contents of a zip archive and removing a subset of tiles…

Yeah, big credit to Anand and his work on BumpTop. I guess I haven’t explicitly talked much about BumpTop because I thought the link was so obvious. I mean, I copied everything down to the background colors for christ sake 🙂 So yes, I am outright copying everything I saw in the BumpTop video. No question about it. I started the project after having seen that video and suddenly it occurred to me that the stars had aligned in such a way with the Flex component libraries (PaperVision and APE) so I could pretty easily do it in Flex.

So I hope Anand doesn’t mind me getting “inspired” by his idea, don’t they say that’s the biggest form of flattery?

I did a little playing around with APE — but I couldn’t get RectangleParticles to rotate when they bump into each other without breaking each tile out into multiple particles and connecting them with springs, which really slows things down. Is that what you did?

Can you give us a little hint on how you mapped the 3DTiles onto the ape particles? I’ve tried everything to get this working…even working “backwards” and mapping my particle engine onto a movieMaterial on a pv3d plane – still a no-go. Just a small hint would be greatly appreciated.