The Making Of

If I had any sense at all, I would probably have used some kind of screen recording software to make yesterday’s video.  I doubt it would have taken more than an hour or two.  But where would be the fun in that?

Here’s what I did instead:

• Had a Saturday morning conversation with Jessica about a fancy Internet valentine one of her friends had just received, and about the Internet in general.

• Idea!

• Outlined a script in Google Docs.  Turns out you can copy and paste formatted text from Web pages, including images, directly into your document.  At least, you can do it with the kind of markup that was popular in early 1997.  So my script turned into a mock-up.

• Captured some raw footage.  On the Mac, you can press Cmd-Shift-4 to turn the cursor into a crosshair that you can drag to save a rectangular area of the screen into a PNG file on the desktop.  Who knew?  Bonus: the crosshair shows the cursor’s coordinates!  This came in handy later, I’m sorry to say.  I grabbed a chunk straight off of primordial Yahoo, seven or so pasted-and-edited groups of links right out of my script/mock-up, a big chunk of Firefox dolled up in a fanciful outfit, and a smaller chunk of Firefox with the Back button held down.  (If you hold it for a bit it shows a menu and stays pressed.  I chopped off the menu underneath.)

• Still missing a very important piece of raw footage: the mouse cursor!  Cmd-Shift-4 won’t buy me that.  Grovelled through Google Images until I found something pretty close, then basically traced over it using the pencil tool in a drawing program.  The real OS X arrow cursor has fancy antialiased edges and a subtle drop shadow with blended transparency.  I didn’t need or even want subtle for this, so my low-tech version only has 3 kinds of pixels: 100% black interior, 100% white border, and 100% transparent background.

• The original draft of the shooting script called for a ridiculously zoomed-in look at the web page, with big fat square pixels and no extraneous browser decorations in the frame, then a jump cut over to the Back button and back to the text.  Two problems: First, my 2010 web browser was drawing nice smooth blended antialiased text, which would have drawn undue attention to itself when zoomed in so the pixels were visible.  Probably there’s a way to turn that off.  But, also, the groups of 5 bullet points I’d ended up with were much wider than they were tall — too wide even for a 16:9 widescreen version of the movie.  Rather than go back and wrack my brain for more bullet points or edit down to get the good parts to fit, I settled on the 1:1 scale 320×240 version you see now, where the browser chrome takes up half the frame and the Back button is visible the whole time.  (I’d heard that YouTube scales uploaded videos to 320×240 anyway, so I figured I’d try for that.)

• Futzed around with ancient Unix command-line image manipulation tools to crop the unevenly-sized margins out of my bulleted lists (pnmcrop), add uniform margins (pnmpad), and paste the new text into the content area of the web browser shot (pnmcomp).  Did the same with a cropped rectangle of the Yahoo page (pnmcut, pnmcomp).  Needed the height to match exactly for that one, which took me a few tries.

  [Side rant: Last time I tried to install pbmplus from source and typed pnmcut --help — which is of course the first thing you do when you want to use pnmcut, because who can remember all those crazy options? — instead of giving me a cheat sheat, it told me to run “man pnmcut.”  Fine, I said, and typed man pnmcut.  But then, instead of revealing how to use the program, it gave a link to the HTML documentation on the web site.  Which, okay, maybe that’s not so terrible.

  Now, the manual page with the link is auto-generated, and the HTML doc is maintained in sync with the program itself, so presumably it would have been possible (though perhaps not convenient) for the pbmplus people to rejigger it so that it auto-generates actual useful man pages from the HTML, instead of autogenerating crappy placeholders.  Maybe it could even have taken the good stuff from the top of the HTML and put it in the –help output.  But, you know, it’s a pain to do stuff like that, and I can totally understand why the pbmplus people might have felt that their time was better spent working on the actual software to do image manipulation and what have you.

  However, this placeholder man page took a novel approach that I haven’t seen elsewhere: after telling me ha ha, just kidding, no useful information here, please go to such-and-such URL instead, it had a new boilerplate paragraph with words to the effect of: Please note that, if your system administrator truly loved you, he or she could have installed this suite of programs in such a way as to make it so that right now, after typing man pnmcut, you would be reading the very documentation you are looking for, instead of this stupid autogenerated boilerplate with just a link in it.

  Now, if you yourself are the poor chump who originally installed this thing on the computer, and you read that message, you’re probably going to be all like, “Okay, I’ll bite — how do I install this thing such that I will get man pages that aren’t completely useless?”  And you go look it up… and, after much research, it turns out that, what the pbmplus people apparently expect you to do (or expected, at the time — no idea if this is still true) is to take your perfectly good “man” command and replace it with a different man command, written by the pbmplus people, that checks to see if you’re trying to view the man page for one of these pbmplus programs and, if so, pulls up the corresponding web page in, like, lynx or something.  Because that’s totally reasonable, right?  It just starts up a completely different program!  It has different keyboard navigation keys and everything!  But, you know, probably no one will notice.  That is, until they finish reading and press q to quit and it’s all like Are you sure you want to quit lynx? and they’re like “Yes!!!  WTF am I doing in lynx in the first place?  What is this, 1997?  This is terrible!  I never asked for this!”

  And oh, man, I can just imagine the conversations that must have ensued between innocent users typing man pnmcut and getting that passive-aggressive message and going straight to the IT manager or whoever and saying, “Dude!  Where’s my man page!  I just want to know how to run pnmcut, and this thing says that you could have done it right but you didn’t because you hate freedom!”  And then this poor system administrator has to sit there and somehow try to explain to this irate user that, no, actually, the cake is a lie.  And it’s sad to think about, because you just know that conversation is not going to end well for anyone.  Because, I mean, best case: the sysadmin is like, fine, no problem, let’s see… replace man, ok, sounds perfectly reasonable, I’ll get right on that… and the user ends up in Lynx, right?  And nothing works like it should!  And the user comes back and says, “Dude, you broke the man command!”  And the sysadmin says, “Only because you insisted I do it!”  And then they both go find the pbmplus people, and the pbmplus people are all like, “Geez guys, what do you expect?  It’s free software!“

  And then, even after everyone has jumped through all those hoops, the pnmcut web page that you end up reading still says infuriating things like, oh, so sorry, pnmcut is deprecated now, we decided last Wednesday afternoon that we don’t like it anymore, so now we use pamcut, which is highly superior in every way but works differently.  You’ll love it, we promise.  Don’t worry, pnmcut is still there, but we’re certainly not going to tell you how to use it.  Now run along. So you dutifully click the link for “pamcut” and figure out how to rewrite all your stuff to use it and then finally go back and type pamcut -foo=bla frobozz.ppm and it’s all like pamcut: command not found.  Because you still have the version from Tuesday morning.  Oops!  Sucks to be you, I guess.

  Thankfully I don’t have to think about any of this anymore because somebody (either the pbmplus folks, or some other fork, or Ubuntu, or Debian, or someone else — my money’s on Debian, actually, but I’m too lazy to try to find out) stepped up and installed some sane man pages on Ubuntu, so if you type man pnmcut it very calmly explains how to use pnmcut with no passive aggression whatsoever.  And absolutely no lynx.  I’d managed to forget the whole thing until I clicked through that pnmcut link.  Wouldn’t that have been a shame?

  Here endeth the rant.  Back to making a YouTube!]

• Turns out I forgot about a few small details!  If you click on a link in a web browser, even in early 1997, a number of things happen:

  1. As soon as you move the cursor over the link, it changes from an arrow into a little pointing hand.
  2. The link itself turns red during the click.
  3. A little dotted rectangle appears around the link as soon as you click it, to show that it has the keyboard focus.
  4. When you come back to it later, the link is purple.

  I decided to forego 1, 3 and 4 — again, not going for realism here! — but 2 is kind of an important cue, especially if you’re not going to bother trying to do foley.  Rather than go back to my script and make versions of the bulleted lists where some of the links were red instead of blue (which would have produced identical results and been much easier to do — Google Docs has a little “font color” doodad right there, for Pete’s sake), I ended up finding the coordinates of the rectangles corresponding to my links (which involved scribbling down numbers from the crosshair cursor onto a bunch of sticky notes and subtracting them with bc -l), cropping them out with pnmcut, swapping the red and blue channels using a 17-line Python program whipped up for the purpose, then splicing the channel-swapped rectangles back in with pnmcomp.  Now I had clicked and unclicked versions of each page.  Used a similar but less complicated trick to comp the depressed Back button into copies of the applicable frames.

• Another missing ingredient: Title cards!  My script called for a black background with centered white text in some suitably florid font.  Fired up the ol’ drawing program again.  Zapfino was the closest font on the list to what I had in mind, so I ran with that.  I have no idea how to get this GUI to center text, and I’m far too lazy to try to center it by hand, so I ended up doing the pnmcrop/pnmpad trick again.  Except that if you do it that way, it centers the bounding box for the visible white pixels, not the baseline of the text!  I probably wouldn’t have noticed or cared, except that “Love” has no descenders and “Jacques” has this giant swoosh under the Q, which makes the whole line jump upwards by a very noticeable amount when pnmpad tries to center it vertically.  So I had to manually crank it back down by 16 pixels or something with an extra trip through pnmpad.  After that, everything looked sufficiently plausible to my eye, so I moved on.

• Almost there!  By this time I have a big ol’ shell script that’s assembling all of these frames in order and putting them in numbered files and stitching them together into a video file, so I can view my work in progress.  Originally the video conversion happened in two steps: mencoder mf://*.png -o out.avi to make an AVI file, and then ffmpeg -i out.avi -o out.flv to convert to Flash Video, since YouTube’s going to do that if I don’t and I’d rather find out sooner what it’s going to eventually look like.  But then it turned out that some of the title cards at the end had only 16 shades of gray (you’d think only 2, black and white, but no: antialiased text strikes again!), so pnmtopng was using a 4-bit encoding for those frames when the rest of the frames used 8 bits per pixel (I guess — maybe this is why it so proudly announces how many colors it found?), which in theory you’d think wouldn’t matter at all but in practice mencoder was apparently failing to do the right thing with its crazy MPNG encoding, so the frames at the end were getting squished horizontally and were pretty much illegible.  I’m sort of surprised it didn’t just decide to douse my computer with gasoline and set it on fire at that point, actually.

  Anyway, it turns out that, unlike mencoder, ffmpeg can read PPM files directly, so long as you number them in strict sequence, starting from 1.  You just do ffmpeg -r 6 -i %d.ppm -o out.flv.  No pnmtopng, no mencoder, no stupid issues with the PNG encoding scheme changing mid-stream.  Terrific.  The -r 6 tells it to play 6 frames per second, for that extra lo-fi feel, just like the terrible Saturday morning cartoons of my youth.  (It also means I need to make fewer frames.)

• You know, I still have to somehow splice a non-rectangular mouse cursor into all of these images and animate it moving around and all that.  Apparently you can use pnmtopng -alpha to extract a transparency mask from the PNG and get pnmcomp to use that when blending in your image, and then all you need is the X and Y coordinates of where you want your mouse cursor to go.  Wrapped that logic up in a shell function, cut and pasted a bunch of lines (one for each frame, basically), and started plugging in numbers for the mouse coordinates.  At first I was measuring things with the Cmd-Shift-4 crosshair cursor and the Post-it notes and the subtraction, but after a while I was like, well, gee, all I really want for this next shot is for the cursor to move up by two bullet points, and they seem to be about 16 or 19 pixels tall I think, so let’s just try this (type type type)… oops, didn’t quite get there, let’s try that again (type type type)… ok, that looks better.  But it’s going too fast!  Need to duplicate some frames, to make it pause a bit between steps, to slow down the pacing.  It’s funnier if you don’t rush, you know?  Probably could have stretched it out to run twice as long and ended up with something twice as funny.  Ah well, maybe next time.

• Woo, done!  How’d that happen?  Wound up with 370 frames, which, at 6 frames per second, comes to 61 and 2/3rds seconds, so I cut a total of 10 frames from the various title cards to bring it down to 60 seconds exactly.

And there you have it!  Only took two days.  I even had enough time left over to have dinner with my favorite Valentine!

Jacques Visits the Internet

I made a YouTube!