Kinetoscope

A short code excerpt from this visualization I created for the longform article “Iouri Podladtchikov – You only fly once” by the Neue Zürcher Zeitung.

It's a very simple way to create an interactive animation based on video material. Hover over the image to go through the animation.

I used Final Cut Pro to crop and export the frames of a short video sequence, which I then stitched together into a single film strip using ImageMagick: convert folder-of-stills/* +append filmstrip.jpg

<!DOCTYPE html>
<head>
  <title>Kinetoscope</title>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style type="text/css">
  .viewer {
    border: 5px solid #6d95ad;
    cursor: ew-resize;
    margin: 60px auto 0 auto;
    opacity: 0;
    overflow: hidden;
  }
  </style>
</head>
<body>
<script>
var frameWidth = 0,
    numberOfFrames = 0,
    posToFrame = d3.scale.linear().clamp(true);

var viewer = d3.select('body').append('div')
    .attr('class', 'viewer');

var frames = viewer.append('img')
    .attr('src', 'filmstrip.jpg')
    .on('load', init);

function init() {
  frameWidth = this.offsetHeight;
  numberOfFrames = this.offsetWidth / this.offsetHeight;
  posToFrame
    .interpolate(interpolateFrame)
    .domain([frameWidth, 0])
    .range([0, ((numberOfFrames - 1) * -frameWidth)]);

viewer
    .on('mousemove', onMove)
    .on('mouseleave', onRelease)
    .on('touchstart', function(){ d3.event.preventDefault() })
    .on('touchmove', onMove)
    .on('touchend', onRelease)
    .style({
      width: pct(100),
      height: px(frameWidth)
    })
    .transition().duration(1000)
    .style('opacity', 1)
    .transition()
    .style({
      'border-radius': px(frameWidth),
      width: px(frameWidth)
    })
}

function onMove(){ frameAtPos(d3.mouse(this)[0]) }
function onRelease(){ frameAtPos(frameWidth) }

function frameAtPos(pos) {
  frames.style('margin-left', posToFrame(pos) + 'px');
}

function interpolateFrame(a, b) {
  return function(t) {
    return Math.floor(((b - a) * t)/frameWidth) * frameWidth
  }
}

function pct(val){ return val + '%'; }
function px(val){ return val + 'px'; }
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js