Want to learn how to make your photos into a slick video slideshow like the one below ? Hang on to your keyboard and start reading.

First, you have to code some effects. My preferred one is the “Kenburns” effect : slowly zooming / panning into a picture. In fact, the effect can be generalized: just imagine a moving box inside your image and you have an infinite class of different Kenburns effects, depending on the position and size of the box in the image at each instant. What is needed is then just a way to crop an image !
Easy. Try it.
But at this stage,  you will soon discover that your nice and smooth video is in fact some kind of jerky stuff you would not show to your worse enemy (ok, ok, I exaggerate, but it is not looking good, especially with slow movements…)
Why is it so bad ? It’s simple. The cropping tool available only works on pixel boundaries. And, except on special cases, your box coordinates won’t be integer. For example, on a slow pan, each frame will be moved a fraction of pixel from the previous one, and rounding to integer coordinates will break the smooth displacement.
The solution is simple : interpolate between actual pixels.
But which tool can you use ? You can do some correct work with ImageMagick, even if cropping is pixel based. What is the trick ?

Scale up your image by a reasonable factor, crop at pixel boundaries (of course after multiplying cropping coordinates by the same factor), and scale down the cropped zone to the correct size.

It works well, because scaling function in ImageMagick are very good. But it is awfully slow : it is ok for a prototype, but not for a real use.

What are the other possibilities ?

• You can write your own tool which interpolate color values between pixels and do cropping on floating coordinates. It should be reasonably fast.
• Or, if you want really fast processing, you can use OpenGL.

3D graphics have adressed this problem a long time ago. When you see 3D moving objects on a screen, you do not want to have large artifacts. Pixel interpolation is not an option, you have to compute it on each pixel on the screen, but you have dedicated hardware in the GPU to compute it. In OpenGL, an image is called a texture. And there are several types of interpolation, with various costs and quality. Basically you map your image on a plane, you setup your camera to see only the part of the plane you are interested in (and what is interesting, with float coordinates), you render the frame, and then you save the frame to the disk.
There may be some subtleties. For example, if you zoom in/out the image, you may see artifacts because of aliasing. You can use something called mipmapping to avoid it: texture are resampled at lower and lower resolution, and interpolation is done between pixels AND between different texture resolutions.

Finally, if you are interested in doing complex effects, you can use Cg, a shading language, to compute arbitrary pixel coordinate transformation (imagine for example a swirling or a look through water like effect). And if you are really interested in GPU computing, take a look at the cuda SDK from nVidia (parallel C language, quite handy to use even if it is hard to think parallel), or CTM stuff from ATI (at the level of assembly language, so quite hard to use).

I will stop here with technical details. The idea to be remembered is that today, relying on the sole CPU for such computer intensive tasks is not working anymore, the GPU is way ahead because its job is so easy that it may takes only a 1/100th of its capacity, and you are only limited by the rate you can write images to the disk.

It is to be noted that Apple, with its Core Image SDK included in every Mac, do use GPU processing power when available to perform image processing.

Finally, you output to disk a large number of images. Before you feed it to ffmepg, you may be interested in compositing the raw video with some subcaptioning, add a header and a footer to the video. For subcaptioning, ImageMagick can produce very nice text, that you can put on overlay. Then you can add a second pass of processing to add cross-fade between images sequences produced by the “raw cropper”.

There is no limit to your imagination, perhaps the time it take to render the video. On my home core 2 duo pc, with only one core working, and a standard graphic card, video generation was roughly real time, ie it would take one minute to generate a one minute mp4. It takes something like 10 days to generate the 12000 videos on TourTeaser, assuming you already have downloaded all images and text, and roughly the same time to upload them to the site (on a ADSL line). (Of course, upload runs in parallel with generation, using a good ol’ periodical rsync).

Future work includes a XML language to describe the operation you want to do on a set of images.

As you may have guessed from our previous posts we are quite busy migrating TourTeaser to Ruby on Rails. This will be the subject of an upcoming post, but what I can tell you today is that we are discovering each day new gems, literally speaking …
This is how we discovered the wonderful world of authentication in Rails. This world looks more like a jungle than a tidy shop, but gems are usually found in jungles, not in the middle of the street…
But with time comes deprecation. And things that were cool for some times, are now covered with dust. Rails 2.0 put a darwinian pressure on a lot of projects, as deprecation does not just raise warnings anymore : deprecation has come, be afraid of the Rails 2 wrath !!!
One of this projects is the Salted Hash Login generator. It is intended to be very secure, containing different seed of salt to hash each user password.
When rails 2.0 came, a few weeks after I begun to play with Ruby on Rails, I upgraded, of course.
But, basically, nothing was working anymore. Views, controllers, models, even configuration was to be fixed. Test almost all failed, and those that were not failing were doing so for bad reasons…
So I started fixing everything. It was quite a boring task, but I learned a lot about testing, and the inner parts of Rails.
When I finished, I realized that I would have to copy by hand all the Salted files if I wanted to start another project and use the generator.
So I decided to modify the generator itself. Again, that was cool to learn about generators, and then to learn how to build gems. I had to change the generator, and then to compare the generator result to my hand-modified files, to check if everything was ok, and then rechange the generator…
A few hours later (but a few days later too), I had a working generator.
The current Salted Hash Login project admin at RubyForge accepted me as admin too. Then I was able to upload the new gem. A few glitches later, it is now available as salted_login_generator-2.0.2. Ouf ! (en francais dans le texte ;-)

Next step will be to do some more exhaustive checking/fixing on the generator.

Francois

I am proud to announce the first tourteaser contribution to an open source project, ferret, and to another one, acts_as_ferret.
Ferret is a port of Lucene in Ruby, with a significant part written in C to speed up indexing and querying.
Speed of indexing was quite impressive. But when using acts_as_ferret, the speed fell dramatically. This was quite strange. In fact, indexing speed is usually not that important, basically you just index the full base once, and then do some updates. But if for some reason you have to rebuild the full base (ie you change the data model, or when there is some corruption somewhere in the search engine), you may have a large service interruption. And when developing applications, it is of great value to be able to rebuild the search engine quickly, as you are constantly changing things around.
So I investigated, and I found that so called batch-indexing was badly named, as in the deep levels of the code, documents were indexed one at a time. Each document indexing generated loads of disk accesses, consuming precious resources. That was easy to spot : making a ‘ls’ command every second show a intense activity in the index folder, and size of temporary files where way more smaller when using acts_as_ferret.
And the serious thing was that inserting new documents or updating older ones was awfully costly too.
Next step was to patch ferret and acts_as_ferret, to allow true batch processing of documents or updates. This is not exactly rocket science, but you have to make sure that you do not break anything. This was the prextext to discover C/Ruby interface, and to understand in a better way the ferret system.
A patch was provided to the ferret developer, David Balmain, and he deeply (and very quickly!) reworked the code. He’s always happy with patches, that’s much better than just bug reports… It is now part of the ferret svn, and that’s cool !
In parallel, a very small patch was provided to the acts_as_ferret plugin : almost all the hard work was done in ferret. It has been accepted, and should be included in the next release.
So what’s the end word for this story ? The speed improvement for indexing and updating is huge : I observed a 12x speed up on my MacBook on a 15000 documents database, and it would be even higher for larger document sets. Indexing takes now 17s instead of 215s : it was worth contributing to these great open source projects !

Francois

this post is a sequel to Genesis (1/2) (we do think a lot when choosing our post titles)

3) Create the videos

Your mission is to transform a set of images into a video slide-show.
Quite simple to explain : on line is enough. As a Chinese jinx says, “May you live interesting experiences”.
Actually, this is the most interesting part of the project…
There is no freely available tool on the net to build video slide-show from simple images.
But this would the very reason someone would be interested in getting on TourTeaser : to get some video on his iPod to impress its (would-want-her-to-be-my) girlfriend. (And yes, TourTeaser can help you in your sentimental life : tell it to your friends ;-))
Of course, there are a lot of available tools to process images : for example, ImageMagick or GD ar both interfaced in PHP and Perl.
ImageMagick has more features, but it is a bit messy, and there are still some known bugs…
On one hand ImageMagick is able to read/write a large number of images format, crop, blend, scale, rotate. You can annotate images with nice antialiased text too. And you can do it from a perl script.
On the other hand, ffmpeg can assemble sequences of images into a movie. You can even add a soundtrack. Images just have to be in jpeg / png, and to be of the same format.

So, you can produce a video image per image, and assemble it. Fine. But producing each video frame is not an easy job. Basically, everything has to be done :

• For a single image, you have to code some nice moving effect, to give the illusion of a real movie
• Then you have to code transition effects between two sequences
• To give some hint to the viewer about what (s)he is watching, add some sub-caption to the images, from the Wikipedia images legend.
• Finally, add a header and a footer to the video, to brand it to your site name.
• You are done ! That was quite easy !-)

So that’s it for today. You now know the main parts of the TourTeaser project. There are still a lot of room for improvement and new features. But we have to keep some little things to tell you in the next posts !
Next time, we will detail a bit more about video generation, as there were a lot to learn about it.

Now that you know a bit more about what is the purpose of TourTeaser on earth, you may wonder how it was built, and where do all these nice videos come from. So let’s me go back to those dark times when TourTeaser was not invented yet (hum…)

At the very beginning, there was only chaos on the net. Images without alt, unreliable legends, etc… Then came the Wikipedia. It was still chaos. But with some nice images and text along with, XML export, with some nice bits of unspecified wiki language within.

A bit later, mashups were born, and started to become more and more complex, with multiple sources of information, maps, widgets, etc. And geo-tagged wiki articles, collaborative sites to geo-tag everything on earth. And RSS, iTunes, video iPod, and holidays are coming so fast, and I have told my girlfriend I will prepare our trip, and I have nothing at the moment…

Have I said video ? Video. How do you transform all that stuff into something you can’t wait to put in your favorite portable thing ? It is quite easy. You ” just” have to know Perl, Imagemagick, ffmpeg, and optionally a bit of OpenGL and Cg. (In fact, it is not that difficult : that was the first time I used Perl, Imagemagick and ffmpeg, even if I have some notable experience in other development areas. So, if you are an absolute beginner in a domain, there is still some hope !)

So how does it look like ?

1. Gather the data
   • Wikipedia offers several way to download its articles. You can download a full XML dump each month, or you can access by some magic url to the raw content, without HTML rendering. Then, the main obstacle is parsing the wiki language. That’s why PERL was chosen : with good regular expression skills, you can extract whatever data you want from wiki article. Then, you have to download images from the site (there is no recent image dump available), with a very gentle and slow crawler, not to be blacklisted for abusive bandwidth consumption. What you get is some XML with articles and images, and image related legend.
   • Placeopedia reference English Wikipedia articles on a map, and it has an almost clean XML export. You can also directly use geo reference in the Wikipedia articles
   • Other sites, such as Flickr or Panoramio, Geonames, offer geo-tagged information, so you can add several layers to your map.
2. Assemble the data and put it on a map
   • Choose a provider to host your site (for example, site5.com which has a very good support team).
   • Import all the geo-tagged data in a database
   • Use a map API, such as Google Maps, Yahoo Maps, or use Mapstraction, which is an abstraction layer on top on existing maps API
   • Create some PHP scripts to feed ajax queries with dynamic set of points
   • Build a nice and user-friendly interface with jQuery…
   • We will come back later on these topics, in another post.

to be continued…

You have surely noticed (or maybe even complained about) the lack of updates on the Tourteaser blog lately, but I can assure you that the enthusiasm previously shown is still intact !

So, you may ask, what is TourTeaser about ? Assume you want to go visit Roma. You are flying tomorrow, and you have prepared nothing, you have just heard about some old Roman stuff, but you do not know how it looks like, where it is, etc…. So you open your favorite browser, enter tourteaser.com, search for Roma in the search bar. Then you can browse through the points on the map, select some interesting ones, and export video guides to your iPod… If you have an iPhone, you will even do that at the airport, and view the videos in the plane… So why bothering about preparing you trip now ? You have plenty of time !

So how do you exactly do that ? We’ve been busy working on the functionalities of TourTeaser. So let me show you what we’ve got :

• Layers : this option situated in the right panel allows you to turn on/off the three different layers of Points Of Interest displayed on the maps : Wikipedia articles, Dailymotion videos, and Panoramio pictures.
• “Select” option : in every info bubble popping out of the Wikipedia POIs (the red ones), you now have the option to add the POI to a list (your itinerary) by clicking “select”. The added POI is thus displayed in the right panel. You can remove it by clicking the little gray cross. (I guess you’d spotted this one)
• Preview and reorder your itinerary. Once you’ve selected a few points, click the second tab (”Organize”) to access a more detailed view of your selection. You can reorder them by Drag&Drop and preview the corresponding video clicking the “play” link next to the title.
• Videos. That’s where it gets cool. Thanks to loads of technological tricks and coffee, the images and texts of each Wikipedia article get packed into a video slideshow, with Ken Burns-style transitions and auto scrolling text in overlay.
• And yes, you can have those on your iPod. Just click “export to iPod” at the bottom of the first tab right panel. This will create a TourTeaser video podcast in iTunes for you.

Keep in mind that all these are very pre-pre-alpha, but all your comments and suggestions are welcomed !

I will start here the diary of my attempt to build a nice wikipedia / placeopedia / panoramio / google maps / dailymotion / enter_here_your_favorite_geo_thing mash-up. So, for those who like new buzz words, it could be called some kind of “meta mash-up”, as it is built upon several other ones. For the moment, it’s just an hobby, but if I get rich with it, I won’t be too afflicted, I swear…

Oh, by the way, it is called TourTeaser, for those who would not have seen the blog title, url, post title or category…

I am quite new at javascript / css / php / development, but as I am part of some kind of web company, I am quite used at handling web-sized data and so I should not be afraid to handle a few gigabytes of wikipedia text… (err, my wife don’t want to transform our home into a web-sized data-center either, my personal reason to think about algorithms before coding).

To tell a bit more about me, I am one of those men who work on the “dark side” on web projects, extracting, storing, cleaning, processing data. Then some guys of the “GUI side” use that data, build with it some hyper-sexy-ajax-CSS-web-3.0 app, and take all the credit/fame/love for the full project… So, now it is time to say stop! and to cross the line. And I invite all “dark side” men to follow me !

Hum. OK. I take a breath, and calm down.

So, I have a well thought plan to take over the world : open a text editor, a browser, and go, go, go !