Zach's Journal

AutoMotivator has a special fancy high res version so you can, in theory, make a motivational poster big enough to print and hang on your wall.

This has worked out reasonably well, but one sore point is the performance of ImageMagick for big images.

AutoMotivator works by taking the original photo, creating two PNGs for the title and inspirational text, and compositing them together against a black background with convert. On big images (2000 pixels or more on a side), it gets very slow (5-20+ seconds) and sucks up a lot of memory.

I'm not sure why it's so slow, but I suspect it's loading all the input images into memory, creating a big output image in memory, filling in the output, and then writing the output to disk.

Since my compositing needs are pretty simple, I don't have to load all that image data: producing each row of the output image only requires reading one row from each the images that single output row intersects. (This thought was originally inspired by picturetile, which must be incredibly slow.)

With that idea in mind, over the weekend I wrote a small compositing program in C. It uses the row-at-a-time input and output functions from libpng and libjpeg. The basic algorithm is:

• get the dimensions and placement of the input data sources
• note which data sources appear on each row
• create a jpeg output object, and one output row
• for each row in the output:
  • for each input source on that row:
    • merge a row from the input into the output row
  • write the output row out to disk
• finish the output jpeg

I'm really rusty at C (it's been over ten years since my last useful C program), but the end result is working well: my compositor is about ten times faster than ImageMagick at assembling big poster images. Sure, it also has a hundredth of the features, but it fortunately does exactly what I need. And the difference in user experience quality between producing a poster in two seconds and 20 seconds is huge.

I'm king of the world!

The Thrillist bit on AutoMotivator ran today and has resulted in a nice bump in traffic. Yay!

"Can't take much credit for how realistic the motivational poster looks - awesome site here does all the work."

If you're generating images dynamically, it's sometimes feasible to update the colors immediately and cheaply on the client side.

AutoMotivator is a motivational poster generator that offers a quick preview of what a poster will look like. Here's an example poster:

There are several distinct elements. The title is the red text "HOPE".

For the interactive preview, the border and title color, title string, and lower white text string can be updated independently.

My initial design used a transparent colored PNG for the title in the preview:

Each time the color was updated, I sent an Ajax request to the server for a new colored title, waited for the response, then replaced the old title with the new one when it arrived. It was pretty fast, but there's an even faster, easier way.

Instead of defining the interior of the title with a colored PNG, it's possible to define the exterior of the title with a black PNG that acts as a stencil.

All that remains is to wrap the stencil in a div with a background color style. The stencil only changes when the string is changed; color updates to the wrapping div can be made instantly with JavaScript.

background: #DD0000

background: blue

background: green

This won't work in all situations, but when it can work for you, it's a great way to get fast updates with dynamic content.