diffy.js

This presentation:

• Installation: Interactivity & Motion
• Browser as platform: JS 💛 Art
• diffy.js [working title]

Teh/YC

Dumbo arts festival 2012 NYC

Tool: OpenFrameworks [C++]

Pros

• Compiled executable

Cons

• Compiled executable

The Night

Dumbo arts festival, 2013 NYC

Tool: Browser, JavaScript

Pros

• Portable, universal

Cons

• Performance

Placemaking

Tehran Architecture Biennial, 2016 Tehran

Diffy.js

Inferring movement by differntiating two consecutive frames of a video stream.

Diagram

Demo time ✧･ﾟ: *✧･ﾟ:* 　　 *:･ﾟ✧*:･ﾟ✧

Optimizations: Workers

Optimizations: Workers

// main.js
differ.addEventListener('message', drawBlendImage);
differ.postMessage({
  buffer: buffer,
  data1: data1,
  data2: data2,
  sensitivity: .5,
  width: blendWidth,
  height: blendHeight
});

// differ.js (worker)
this.addEventListener('message', createDiffBuffer);
this.postMessage(buffer);

Optimizations: Bitwise

// Math.abs
function abs(value) {
  return (value ^ (value >> 31)) - (value >> 31);
}

Optimizations: Typed Arrays

// main.js
blendImageData
    .data
    .set(
      new Uint8ClampedArray(messageEvent.data)
    );

Optimizations: Bit Shifting

var data = new Uint32Array(buffer);
data[i] =
  (255   << 24) |    // alpha
  (delta << 16) |    // blue
  (delta <<  8) |    // green
   delta;           // red

Plans

• clean up
• + bower
• + npm

Github :)

Diffy.js on Github

Thank you!

Mani Nilchiani
@mani_art
hello@maninilchiani.com