Maniac Technical Instructions

Nick Winter originally did this with Telepath Logger. Bethany managed to get that working for her maniac week and helped Danny get it working on his computer but it involved hacking on the actual code and we wanted to experiment with a setup that anyone could use. Also, we wanted to do things like tail our TagTime log files in the dashboard area (aka HUD). So, with ideas from Lawrence Evalyn, here’s how we did it:

Collecting the screenshots

Set up InstantShot (Mac OSX) to take a screenshot every minute and store them to a specified directory.

Collecting the webcam footage

Instead of trying to capture a separate video from your webcam and splice it together, just leave a small window with a live-updating image from your webcam at the bottom of the sreen and let the screenshots capture it. Here are possible things to use for that:

Turning the directory full of images into a video

Lawrence Evalyn says he got the images turned into a video using iMovie. That might or might not be easier than Bethany’s uebernerd hackery with ffmpeg below…

  1. In your images directory, crop all the images and write them to numbered imgXXXXX.jpg files in a subdirectory called tmp:
    x=1; for i in *.jpg; do counter=$(printf %05d $x); convert -crop 5120x3200+0+0 $i tmp/img"$counter".jpg; x=$(($x+1)); done

  2. Or if you just need to name them to have consecutive numbers in the filename:
    mkdir tmp
    x=1; for i in *.jpg; do counter=$(printf %05d $x); cp $i tmp/img"$counter".jpg; x=$(($x+1)); done

  3. Make a movie out of the images in tmp/ with 30 frames per second. Write it to maniac.mp4:
    ffmpeg -r 30 -f image2 -i tmp/img%05d.jpg -y -s 2560x1600 -r 30 -vcodec libx264 -preset slower -tune stillimage -crf 18 maniac.mp4

  4. Find a soundtrack as an m4a file and add it to the video:
    ./ffmpeg -i maniac.mp4 -i somesong.m4a -c:v copy -c:a copy -map 0:0 -map 1:0 -map 1:0 maniac_with_soundtrack.mp4

(Bethany had issues with this that turned out to have to do with the encoding of the music. When she edited together a soundtrack in audacity and exported with an ffmpeg compatible filetype it worked fine.)

Maniacal Tips

  1. Turn off your screensaver. Your screen will be fine.
  2. Lawrence has an awesome segment in his timelapse where he pointed his webcam out the window and you can watch the clouds rolling by.

Other Goodies

Bethany also made this for showing the time and day (which dreeves regrets not keeping in his dashboard since it’s the only interesting thing to look at in the timelapse when you’re asleep). Just store it in an html file and open it in a small browser winder in your dashboard. (Change “scrIpt” to “script”.)

<html>
<head>

<scrIpt src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></scrIpt>

<scrIpt>
$(document).ready(function() {
  var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    $('#day').html( days[today.getDay()] );
    $('#time').html( h + ":" + m + ":" + s );
    var t = setTimeout(function () {
        startTime()
    }, 500);
}

function checkTime(i) {
    if (i < 10) {
        i = "0" + i
    }; // add zero in front of numbers < 10
    return i;
}
  startTime(); 

});

</scrIpt>

<style>
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 72px;
color: #333;
background-color: #e7e7e7  ;
padding-top: 40px;
text-align: center;
}

#time { font-weight: bold; }
#day {  }
</style>
</head>
<body>
<div id="day"></div>
<div id="time"></div>
</body>
</html>