Slow In Translation, v1

A web-based Very Slow Movie Player, inspired by Brian Boyer

Recently Kottke.org linked to a really fun idea called The Very Slow Movie Player. Imagine a little picture frame that shows a movie at 24 frames per hour. That’s far too slow to watch the movie, but over the course of a day, you’d see the scene move forward ever so slowly. How cool!

The concept comes from Bryan Boyer, and he wrote a fascinating essay explaining the thinking behind it and how to make a device like this yourself. He even links to the code. And it got me thinking of how I could reproduce something like this myself. I thought maybe I could do the same with a webpage, so I whipped this together in a few days:

This is the actual frame on the page right now, on the 2nd of January

This is Slow In Translation, a webpage that plays Lost In Translation over the course of a year, starting on January 1st. I love little internet experiments like this, so I’m excited to be able to contribute some for a change :)

If you’d like to do something like this, it’s not too tough. You get a movie file, extract all the frames as images, then write some code to figure out what image to show based on what the date and time is. In my case I also used some image filters in order to give the images that retro effect.

Here’s how to do it on a Mac:

1. Install homebrew

Homebrew is great. It helps you install things on your Mac, and we’ll be using it to install two utilities today, ffmpeg and imagemagick. Learn more here.
If you’re impatient like me, just put this into Terminal.app:

/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

It’ll ask for a password, then install Homebrew for you.

2. Install ffmpeg

Once homebrew is installed, just type

brew install ffmpeg

… into Terminal.app and ffmpeg will install. This is how we’ll extract images from the video file.

3. Install imagemagick

Next you’ll want to install imagemagick by typing this in Terminal.app. Imagemagick lets us do all kinds of cool stuff to images.

brew install imagemagick

4. Convert the movie into images with ffmpeg

With our two utilities installed, now we’ll convert the video into images.

I ran this code in Terminal.app:

ffmpeg -i yourvideo.mov thumb%09d.png -hide_banner

Make sure you’re in the same directory as your video, and remember to change “yourvideo.mov” to the actual filename for your video. Learn more about this step here. Then get comfortable, because this process going to take a while and make about a jillion little image files.

4. Dithering frames with imagemagick

Eventually the conversion process will be complete. It will take a lot of space, and will freak out Finder.app because of all the new files. Next we’ll be converting everything into our retro style using the documentation here.

First make a separate directory. I called mine “dithered”:

mkdir dithered

Then I did this, which converts everything into greyscale, so it looks like it’s on a Kindle. Again, be warned. This is going to take a very long time. In my case it took over 3 hours. I let it run overnight:

mogrify -path dithered -colorspace Gray -ordered-dither o8x8 “*.png”

I’ve also been playing around with an approach that uses colour rather than greyscale. If you’d like to try that instead, just take out the -colorspace bit, like so:

mogrify -path dithered -ordered-dither o8x8 “*.png”

The same o8x8 dithering algorithm, one greyscale and one colour

5. Write some code to load the right frame at the right time

The steps for this are pretty simple. First we figure out what percentage of the year is done. Then we use that percentage to figure out what frame we should use. So let’s say we decide the year is 45% done. And let’s say Lost In Translation has 137522 frames. We just multiply 137522*.45 and that returns 61885. Then we load that frame. Simple! Here’s some simple PHP:

How many seconds since the beginning of the year?

// how long since the year started?
$timeFirst = strtotime(‘2019–1–1 00:00:00’);
$timeSecond = strtotime(“now”);
$differenceInSeconds = $timeSecond — $timeFirst;

How many seconds in a year? What percent complete are we?

// how many seconds in the entire year
$entireYearInSeconds = “31536000”;
// what percentage of the year have we done?
$percentageComplete = $differenceInSeconds/$entireYearInSeconds;

So what frame do we need to load?

// how long is our movie?
$movieTotalFrames = 137522;
// ok, so what frame should we load?
$currentFrame = ($movieTotalFrames*$percentageComplete);

How can we make this a background image?

<style>
 body
 {
 background: url(<?php echo “‘img/dithered/”.$currentFrame.”.jpg’”; ?>) no-repeat 50% 50% fixed;
 background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 -webkit-background-size: cover;
 } 
</style>

6. Get excited and make things

I’m already bursting with new ideas. Imagine going to a restaurant where all the art on the walls was based on something like this? What if My Neighbor Totoro was on one wall, Baby Driver was on another, Citizen Kane was on another, and so on? That’d be an interesting look.

And it would change with the seasons and acts! Looking at the art on January 15th would show all the opening scenes. It would make the entire gallery have a hopeful, new feeling. But going to the same restaurant In late October would be right at the height of the drama. Visiting on New Year’s Eve would be beautiful, beause each of the movies would be on their final, gorgous shots. For example, here’s how the Lost In Translation piece would look on that day:

And the famous scene where Bill Murray’s character whispers something unknown to Scarlett Johansen’s character? That’d happen right around Christmas. Wouldn’t that be interesting?

And that’s just one idea. I have lots of others. That’s my favourite thing about building stuff like this. It can inspire you to build further. Done is the engine of more. Happy building!