Mission Mathematica: Making a Photo Booth App in Three Steps
June 23, 2011 — Yu-Sung Chang, Technical Communication & Strategy
Creating an interactive app could be a complex and painstaking task. Not with Mathematica. Here I will present how I created a photo booth program in three easy steps—mostly during my lunch breaks.
Step One: Architecture
The application will have four main stages. Stage one: We show live webcam images with different image effects applied (possibly multiple pages of them) as a preview, and let the user choose one. Stage two: The chosen image takes up the window, waiting for the user to click a button. Stage three: Count down. Stage four: Capture an image, apply the effect, and add it in a film strip. Repeat.
We also need nice photo effects. We are going to have three categories—three effects for each category. I chose three categories: color effects, transformations, and something else. But of course, you can add more later. We will discuss the details in the next step.
Now, it is time to think about user interface. I followed a popular UI that is pretty common in photo booth applications. The first stage will have a two-by-two grid that shows an original as well as three different effects in real time. Radio buttons at the bottom will provide navigation through the categories. The second stage is rather simple—just a big screen with the click button and the back button underneath it. At the third stage, there will be no interface change except that the counter will be shown instead of buttons. We’ll keep a separate film strip (notebook) for results, in which captured images will be added at the fourth stage.
Step Two: Effects
Let’s spend some time to come up with nice effects. The first category is “color effects”. Here are my choices.
The transformation category requires a bit more effort. The first effect is a mirroring at the center. We crop the right half of an image, create a reflection of the left, then combine them.
Here is a wiggly effect to make you feel dizzy.
The final choice for this category is a “broken mirror” effect, created by our design director, Jeremy Davis. Essentially, we cut an image into vertical pieces and flip them before combining them back together.
Let’s see how they all look.
They are very simple effects, yet very disturbing…
The last category is a mystery category. I will leave it to the readers to come up with their own. Here are my choices:
Now we are ready to get to the details.
Step Three: Implementation
Of course, you can wrap the CurrentImage with any image processing function to get the dynamic effect (or several effects together).
The main program will look roughly like this:
Interactive examples in Mathematica can be written in a more efficient way by localizing Dynamic and using TrackedSymbols to make it update only when a specific variable is changed. However, the program is efficient enough as is, so we will not go all the way to optimize it.
There are a few things that have to be handled before running the process. For instance, filters have to be defined, and the film strip notebook has to be created. These jobs can be defined in the Initialization of the DynamicModule so they will run before the process. Also, when you close the palette, there is some housecleaning that has to be done. The Deinitialization option is useful to define such jobs.
Now let’s look at the details. The two-by-two preview grid at the first stage looks like this:
filters and names are arrays of photo effects and their names. Overlay is a new function in Mathematica 8, which comes in very handy when you want to display multiple expressions at once. Here is an example.
At stage two, we show a webcam image with the chosen effect applied in real time. At stage three, we do the same thing, but we need to count down simultaneously. You can introduce Refresh or Dynamic with UpdateInterval, but as the documentation points out, it is not 100% reliable, especially when the notebook front end is busy with updating webcam images with the fast frame rate.
Is there a more reliable solution? Of course, yes. We introduced the concept of timed evaluations in Mathematica 8. Using this functionality, you can create a scheduled task that can be independently evaluated by specific time interval. For our example, we will create a task that will be evaluated every second to decrease the counter and, as an added bonus, to announce the remaining time.
The task should be created at Initialization and be removed at Deinitialization of the main Dynamic by using RemoveScheduledTask. The task will be triggered and stopped using StartScheduledTask and StopScheduledTask at the third stage.
Finally, at the fourth stage, we make a click sound, write the image into the film strip notebook using NotebookWrite, and go back to the first stage.
I created a notebook that contains all necessary code and resources for the app, including a sound byte for the camera click and some icons for buttons. Unfortunately, we can’t provide it in Computable Document Format (CDF) for the free Wolfram CDF Player, since it is accessing webcams, which is restricted. For the folks who don’t have Mathematica, here is a screen capture of me playing with the program.
So there you have it—mission accomplished! Stay tuned to the Wolfram Blog for more Mission Mathematica installments.