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)
Day 7: Improved Flickr support, ability to page through results, load multiple search results, etc. Added spiral stack.
Day 9: Added the menu system. Added the twist menu item to twist a stacked pile. Allowed breaking piles you made.
Day 10: Added the fan layout method.
Day 11: Added the grid layout method.
Day 12: Added the leafing layout method.
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.
















Entries (RSS)
August 4th, 2007 at 6:55 pm
That has to be the coolest thing I’v seen today.
August 4th, 2007 at 7:29 pm
[...] 4th, 2007 digg_url = ‘http://tuggo.org/paul/2007/01/13/the-apple-iphone/’; digg_title = ‘The making of TileUI’; digg_bodytext = ‘This is gonna be really cool when it comes out.http://dougmccune.com/blog/2007/08/04/the-making-of-tileui/ ‘; ( function() { var ds=typeof digg_skin==’string’?digg_skin:”; var h=80; var w=52; if(ds==’compact’) { h=18; w=120; } var u=typeof digg_url==’string’?digg_url:(typeof DIGG_URL==’string’?DIGG_URL:window.location.href); document.write(“”); } )() [...]
August 4th, 2007 at 8:09 pm
Very cool Doug! Keep up the excellent work. I’m definitely monitoring your progress.
BTW – If you need any help, please let me know. I’d love to contribute.
-Andy
August 7th, 2007 at 6:46 am
Very impressive! And so smooth. I’ll be keeping an eye on the progress.
August 7th, 2007 at 8:04 am
That’s some fast codin’! Freaking hot.
August 7th, 2007 at 9:04 am
Increndible! Congrats, Mr. Insanity. Hahahe!
August 7th, 2007 at 12:00 pm
You sir, are fucking awsome, damn i hope to one day beable to do stuff like that in 2 freakin weeks! Cant wait to see more.
August 7th, 2007 at 12:06 pm
“On the 14th day Doug created light.”
Impressed….
August 7th, 2007 at 1:32 pm
Very very cool, and fast dev, really great job on the execution. You should come work for BLITZ, we could put your talents to really good use – check out our blog.
August 7th, 2007 at 1:36 pm
Speaking of open source you could the least have acknowledged the work of Anand Agarawala ( http://www.ted.com/index.php/talks/view/id/131 ) in his bump top… Copyleft is about crediting where your inspirations come from.
August 7th, 2007 at 7:37 pm
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?
August 7th, 2007 at 9:30 pm
Sweet!
Well done. It is amazing to see this all progress so quickly. I am here in Seattle and know that friends at Adobe want to meet and support the Papervision network of talent. Cheers, Tim
August 7th, 2007 at 9:42 pm
“At last count I am using 10 different open source libraries in the TileUI project in one way or another.” Does that mean you will be releasing this as open source?
August 8th, 2007 at 8:32 am
[...] Flex-Guru Doug McCune hat ein Video seines neuesten Projekts veröffentlicht. Die Entwicklung dauert noch an, so dass noch keine Flash- oder AIR Files zur Verfügung stehen. Aber das Video spricht für sich, ein wahnsinnig gut gemachtes Flex-Projekt, was auch in der AIR Variante sicherlich überzeugen wird. Coole Ansätze für ein Userinterface zum Dateihandling etc. [...]
August 11th, 2007 at 9:31 am
Great work –
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?
August 13th, 2007 at 2:55 am
[...] you can view the make of tileui at doug mccune’s blog, and also check out the working prototype here. [...]
August 14th, 2007 at 2:18 am
It’s interesting to see the last 12 days of working on this advanced application.
However, it is not always easy to detect the last 12 days of project’s work
August 15th, 2007 at 9:30 am
[...] Dynamic shaders – drawing on to 3d objects The making of TileUI – video describes the process of creating a 3d desktop app with Papervison, Flickr and APE – an AS3 physics engine [...]
August 15th, 2007 at 11:54 am
TileUI : l’interface complémentaire de l’écran tactile…
Il y a quelques mois, Microsoft présentait Surface, son projet de table tactile, avec de multiples options comme la reconnaissance d’objets, etc. Je vous présente aujourd’hui TileUI, le parfait complément de ce type d’écrans……
August 20th, 2007 at 7:43 am
this reminds me of somthing i saw on googlecode a wile ago. this is really tight. the pv3d team loves it, and cant wait to see more.
August 20th, 2007 at 6:56 pm
[...] And the star of the day, Doug Mccune’s Tile UI [...]
August 27th, 2007 at 6:10 am
alec cove not alex cove
August 27th, 2007 at 7:09 am
@John, thanks, updated
September 16th, 2007 at 8:02 pm
[...] Along that same wavelength of technology was BumpTop. Again, I’d seen videos of this and it was interesting to see how it performed. When I walked up to the display, one of the people there asked me if I’d ever interacted with files like this before and I responded with “You mean like TileUI?” The person seemed to pretend they didn’t hear me and proceeded with the demo. It didn’t seem as responsive as the Perceptive Pixel multi-touch device and I noticed some people struggling with the metaphor it was trying to use to allow user-interaction with a file system. The demo was given using a stylus that looked like a dry erase marker, but you could also use your fingers. I imagine the stylus was used for precision, as there were a number of tiny icons to be clicked. [...]
October 18th, 2007 at 4:31 am
Very, very cool work! I’m soooo burned out on all the usual component stuff… Are your plans to release the component to the world or sell it and try and make a few bucks? When do we get to play?!?!
October 23rd, 2007 at 7:14 am
[...] This is the area that allows Synthesizers to move faster then anyone else. They know what is going on, they’re “plugged in.” They know who is doing good work and they know how to stick those disparate parts together in order to get something better. Doug Mccune ( my model synthesizer ) has put it best in a post about TileUI: …how badass [the] 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. [ The making of TileUI ] [...]
January 14th, 2008 at 1:11 pm
[...] You could build a quick FLEX demo in 12 days that will be one of the best things ever — because there aren’t a lot of good FLEX apps. Check this one out, for example, it uses an existing 3D toolkit and the code isn’t even that long. Or you could build an ExtJS demo in less than 2 days that will make you look like you are a Web Genius. It doesn’t even have to look that great or work completely. You’ll also free good about yourself in the end. [...]
June 25th, 2008 at 5:06 am
I’m just so happy I am able to post on this site, with the big boys. Doug… U de Man!
February 12th, 2009 at 9:08 pm
Doug,
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.