We’ve been inspired in part by Ruairi Glynn‘s amazing work here at UCL, and Martin has been happily experimenting with the OpenKinect bindings for Processing.

Meanwhile, I recently got to grips with the excellent Three.js, which makes WebGL — aka 3D graphics in modern browsers — as easy as falling off a log. I’m also a big fan of making things accessible over the web. And so I began to investigate prospects for working with Kinect data in HTML5.

There’s DepthJS, an extension for Chrome and Safari, but this requires a locally-connected Kinect and isn’t very clear on Windows support. There’s also Intrael, which serves the depth data as JPEG files and provides some simple scene recognition output as JSON. But it’s closed-source and not terribly flexible.

The depthcam

So I decided to roll my own. I give you: the depthcam!

Click here or on the screenshot to connect.

It’s a live-streaming 3D point-cloud, carried over a binary WebSocket. It responds to movement in the scene by panning the (virtual) camera, and you can also pan and zoom around with the mouse.

Currently you’ll need Google Chrome to try it, and the number of people who can tune in at once is limited for reasons of bandwidth. If you can’t connect, or nothing much is happening, try this short video on YouTube instead.

It might be the future of video-conferencing. It could also be the start of a new wave of web-based movement-powered games.

How it works

The code is on GitHub, and is in three parts:

1. A short Python script wiring up the OpenKinect Python wrapper to the Autobahn WebSockets library. Depending on the arguments it’s run with, this can either serve a web browser directly, or it can push the depth data up to…
2. A simple node.js server that gets us round the UCL firewall. This accepts depth data pushed from the Python script, and broadcasts it onwards (still using binary WebSockets) to any connected web browsers, which are running…
3. The web-based client, written in CoffeeScript. This connects to the node.js server, receives the depth data, and visualises it as a particle system using Three.js and WebGL.

The incoming data from the Kinect is pretty heavy, at 18 MB/s (640 × 480 × 2 bytes per pixel x 30Hz). This is more than we can expect to (or afford to!) push over the Internet. So the Python script does some basic video compression to cut this down by several orders of magnitude, to 30 – 100 KB/s. It follows this three-step recipe:

1. Reduce the amount of data by down-sampling and quantizing to 160 × 120 × 1 byte per pixel.
2. Increase the data’s compressibility. First, reduce noise — which also looks bad — by making each transmitted depth value (i.e. pixel) the median of the values received in the last three frames. Then express each value as its difference from the previous value, with just an occasional absolute-value keyframe to allow new viewers to pick up the stream.
3. Compress the data using LZMA, which gets better compression ratios than GZIP or BZIP2, and decompression times somewhere between the two.

Feel free to fork the code and do something great with it.

And ever noticed how, when using the Google Maps API, the exact same thing doesn’t happen?

This code makes Google Maps API version 3 map markers behave in that Google Earth way. Small numbers of markers (up to 8, configurable) spiderfy into a circle. Larger numbers fan out into a (more space-efficient) spiral.

Try it! (You can reload this page to re-randomise the marker positions).

The code is MIT licenced, has no dependencies, and is under 3K compiled (from CoffeeScript), minified and gzipped. I wrote it as part of the data download feature for Mappiness.

It’s on Github, where you can find out more, download or fork the code.

We decided it would be nice to allow respondents to interact with this CDF after providing some key values, and implemented this in the web browser with <canvas> (falling back on FlashCanvas for IE).

In the process, we implemented three kinds of cubic spline calculation in the ever-wonderful CoffeeScript: natural, clamped and (what we actually needed) monotonic cubic splines.

You can play with some examples below: click-and-drag the round handles, or double-click to enter values directly. Feel free to borrow the code (ideally with attribution) if it’s of use to you.

The spline code

class MonotonicCubicSpline
 
# by George MacKerron, mackerron.com
 
# adapted from: 
# http://sourceforge.net/mailarchive/forum.php?thread_name=
# EC90C5C6-C982-4F49-8D46-A64F270C5247%40gmail.com&forum_name=matplotlib-users
# (easier to read at http://old.nabble.com/%22Piecewise-Cubic-Hermite-Interpolating-
# Polynomial%22-in-python-td25204843.html)
 
# with help from:
# F N Fritsch & R E Carlson (1980) 'Monotone Piecewise Cubic Interpolation', 
#   SIAM Journal of Numerical Analysis 17(2), 238 - 246.
# http://en.wikipedia.org/wiki/Monotone_cubic_interpolation
# http://en.wikipedia.org/wiki/Cubic_Hermite_spline
 
  constructor: (x, y) ->
    n = x.length
    delta = []; m = []; alpha = []; beta = []; dist = []; tau = []
    for i in [0...(n - 1)]
      delta[i] = (y[i + 1] - y[i]) / (x[i + 1] - x[i])
      m[i] = (delta[i - 1] + delta[i]) / 2 if i > 0
    m[0] = delta[0]
    m[n - 1] = delta[n - 2]
    to_fix = []
    for i in [0...(n - 1)]
      to_fix.push(i) if delta[i] == 0
    for i in to_fix
      m[i] = m[i + 1] = 0
    for i in [0...(n - 1)]
      alpha[i] = m[i] / delta[i]
      beta[i]  = m[i + 1] / delta[i] 
      dist[i]  = Math.pow(alpha[i], 2) + Math.pow(beta[i], 2)
      tau[i]   = 3 / Math.sqrt(dist[i])
    to_fix = []
    for i in [0...(n - 1)]
      to_fix.push(i) if dist[i] > 9
    for i in to_fix
      m[i]     = tau[i] * alpha[i] * delta[i]
      m[i + 1] = tau[i] * beta[i]  * delta[i]
    @x = x[0...n]  # copy
    @y = y[0...n]  # copy
    @m = m
 
  interpolate: (x) ->
    for i in [(@x.length - 2)..0]
      break if @x[i] <= x
    h = @x[i + 1] - @x[i]
    t = (x - @x[i]) / h
    t2 = Math.pow(t, 2)
    t3 = Math.pow(t, 3)
    h00 =  2 * t3 - 3 * t2 + 1
    h10 =      t3 - 2 * t2 + t
    h01 = -2 * t3 + 3 * t2
    h11 =      t3  -    t2
    y = h00 * @y[i] + 
        h10 * h * @m[i] + 
        h01 * @y[i + 1] + 
        h11 * h * @m[i + 1]
    y
 
 
class CubicSpline  # natural or clamped
 
# by George MacKerron, mackerron.com
 
# adapted from:
# http://www.michonline.com/ryan/csc/m510/splinepresent.html
 
  constructor: (x, a, d0, dn) ->
    return unless x? and a?
    clamped = d0? and dn?
    n = x.length - 1
    h = []; y = []; l = []; u = []; z = []; c = []; b = []; d = []; k = []; s = []
    for i in [0...n]
      h[i] = x[i + 1] - x[i]
      k[i] = a[i + 1] - a[i]
      s[i] = k[i] / h[i]
    if clamped
      y[0] = 3 * (a[1] - a[0]) / h[0] - 3 * d0
      y[n] = 3 * dn - 3 * (a[n] - a[n - 1]) / h[n - 1]
    for i in [1...n]
      y[i] = 3 / h[i] * (a[i + 1] - a[i]) - 3 / h[i - 1] * (a[i] - a[i - 1])
    if clamped
      l[0] = 2 * h[0]
      u[0] = 0.5
      z[0] = y[0] / l[0]
    else
      l[0] = 1
      u[0] = 0
      z[0] = 0
    for i in [1...n]
      l[i] = 2 * (x[i + 1] - x[i - 1]) - h[i - 1] * u[i - 1]
      u[i] = h[i] / l[i]
      z[i] = (y[i] - h[i - 1] * z[i - 1]) / l[i]
    if clamped
      l[n] = h[n - 1] * (2 - u[n - 1])
      z[n] = (y[n] - h[n - 1] * z[n - 1]) / l[n]
      c[n] = z[n]
    else
      l[n] = 1
      z[n] = 0
      c[n] = 0
    for i in [(n - 1)..0]
      c[i] = z[i] - u[i] * c[i + 1]
      b[i] = (a[i + 1] - a[i]) / h[i] - h[i] * (c[i + 1] + 2 * c[i]) / 3
      d[i] = (c[i + 1] - c[i]) / (3 * h[i])
    @x = x[0..n]  # copy
    @a = a[0...n]
    @b = b
    @c = c[0...n]
    @d = d
 
  derivative: ->
    s = new this.constructor()
    s.x = @x[0...@x.length]  # copy
    s.a = @b[0...@b.length]  # copy
    s.b = 2 * c for c in @c
    s.c = 3 * d for d in @d
    s.d = 0 for x in [0...@d.length]
    s
 
  interpolate: (x) ->
    for i in [(@x.length - 1)..0]
      break if @x[i] <= x
    deltaX = x - @x[i]
    y = @a[i] + 
        @b[i] * deltaX + 
        @c[i] * Math.pow(deltaX, 2) + 
        @d[i] * Math.pow(deltaX, 3)
    y

Download:

• the above CoffeeScript
• the compiled JavaScript
• the minified compiled JavaScript

Some years ago, when working on a secure web app for a large organisation — let’s call them Secret Testing Ltd — I was keen that people shouldn’t choose hopelessly weak passwords. I was particularly concerned by my sysadmin colleague’s fondness for passwords of the form ‘p/\55w0rd’ or ‘S3cr3t-T35t|ng’.

I therefore wrote some simple Ruby code to try to catch very weak passwords:

class PasswordUtils
 
  def self.look_and_sound_alikes(original)
    look_or_sound_alikes = { \
      '0' => ['o'] ,
      '1' => ['i', 'l'],
      '2' => ['to', 'too'],
      '3' => ['e'],
      '4' => ['a', 'for'],
      '5' => ['s'],
      '6' => ['g'],
      '8' => ['b', 'ate'],
      '9' => ['g'],
      'i' => ['i'],
      '$' => ['s'],
      '|' => ['i', 'l', ''],
      '!' => ['i', 'l', ''],
      '@' => ['g', 'a'],
      '(' => ['c'],
      '[' => ['c', 'e'],
      '{' => ['e'],
      '&' => ['and'],
      '*' => ['star'],
      ')' => ['d'],
      '^' => ['a'],
      '/' => ['a', 'v'],
      '\\' => [''],
      '<' => ['k']
    } 
    # the penultimate two substitutions catch /\ (A) and \/ (V), albeit without
    # distinguishing them, and the last (in conjunction with the empty options 
    # for ! and |) catches !< and |< (K)
    versions = ['']
    original.downcase.each_char do |c|
      versions.collect! do |v|
        alikes = look_or_sound_alikes[c] || [c]
        alikes.collect { |c1| v + c1 }
      end
      versions.flatten!
    end
    versions
  end
 
  def self.obvious?(password, custom_banned_list = '')
    standard_banned_list = File.read("#{RAILS_ROOT}/config/banned_password_words.txt")
    banned_words = standard_banned_list.downcase.split(/\W+/) + 
      custom_banned_list.downcase.split(/\W+/).delete_if { |w| w.length < 4 }
    alike_words = [password.downcase] + PasswordUtils.look_and_sound_alikes(password)
    banned_words.any? do |banned_word|
      alike_words.any? { |alike_word| alike_word.include? banned_word }
    end
  end
 
end

The first method of the class undoes some common substitutions:

> PasswordUtils.look_and_sound_alikes('p/\55w0rd')
=> ["password", "pvssword"]
>  PasswordUtils.look_and_sound_alikes('S3cr3t-T35t|ng')
=> ["secret-testing", "secret-testlng", "secret-testng"]

And the second method uses this in conjunction with a list of banned words to check that an entered password isn’t hopelessly weak.

> PasswordUtils.obvious?('p/\55w0rd')
=> true
>  PasswordUtils.obvious?('S3cr3t-T35t|ng')
=> true
> PasswordUtils.obvious?('gkAsd76!o')
=> false

Obviously, you need a good banned words list — perhaps starting with some top N passwords lists, and including the name of your company, the web app, and words related to the area of business, local pubs, and so on.

It’s also a good idea to include custom banned words for individual users. For example:

custom_banned_list = "#{first_names} #{surname} #{department} #{organisation} #{email}"
PasswordUtils.password_obvious?(password, custom_banned_list)

Passing these tests isn’t a sufficient condition for ruling out a weak password, but it’s arguably a necessary one, and a good start.

JavaScript does neither of these: it doesn’t recognise the extended syntax, and its version of multi-line only allows the ^ and $ characters to match the beginnings and ends of lines within a string (it will never allow the . to match a newline).

So I wrote the following function to convert extended and fully-multi-line RegExp source strings to the basic syntax that JavaScript understands.

function convertRegExpSource(source, ext, multi) {  // string, boolean, boolean
  if (! ext && ! multi) return source;
  var convertedSource = '', len = source.length;
  var inCharClass = false, inComment = false, justBackslashed = false;
  for (var i = 0; i < len; i ++) {
    var c = source.charAt(i);
    if (justBackslashed) {
      if (! inComment) convertedSource += c;
      justBackslashed = false;
      continue;
    }
    if (c == '\\') {
      if (! inComment) convertedSource += c;
      justBackslashed = true;
      continue;
    }
    if (inCharClass) {
      convertedSource += c;
      if (c == ']') inCharClass = false;
      continue;
    }
    if (inComment) {
      if (c == "\n" || c == "\r") inComment = false;
      continue;
    }
    if (c == '[') {
      convertedSource += c;
      inCharClass = true;
      continue;
    }
    if (ext && c == '#') {
      inComment = true;
      continue;
    }
    if (multi && c == '.') {
      convertedSource += '[\\s\\S]';
      continue;
    }
    if (! ext || ! c.match(/\s/)) convertedSource += c;
  }
  return convertedSource;
}

Use it

The starting example below is the Daring Fireball monster URL regex.

Extended RegExp source (editable)

Basic RegExp source output

Let me know if you find any bugs, or if you know a nicer way to do this (I know nothing about parsing, so there surely is one).

I think I may suggest extended RegExp support as a possible CoffeeScript enhancement.

This is somewhat annoying — the site’s original design has it communicating independently with Amazon (using Amazon’s XSLT API feature to transform their XML data into JSON), and that’s no longer possible with the use of a private key. But it’s not unfixable. The site now sends its API call first to my server, which returns a signed version, and then forwards the signed call on to Amazon.

I found most of what I needed for this on Chris Roos’ blog, but his version still wasn’t quite working for me (the two problems I recall are that Ruby’s CGI.escape doesn’t quite follow Amazon’s requirements, and that times need converting to GMT).

Anyway, in case you’re looking to do the same, here’s what I ended up with:

#!/usr/bin/env ruby
 
# Note: You need hmac.rb and hmac-sha2.rb from http://deisui.org/~ueno/ruby/hmac.html 
# somewhere in your require paths. ruby-hmac is currently broken under Ruby 1.9.
 
%w(rubygems cgi time hmac-sha2 base64).each { |lib| require lib }
 
ACCESS_IDENTIFIER = 'YOUR_PUBLIC_ID'
SECRET_IDENTIFIER = 'YOUR_PRIVATE_ID'
 
def aws_escape(s)
  s.gsub(/[^A-Za-z0-9_.~-]/) { |c| '%' + c[0].to_s(16).upcase }  
  # for 1.9, you'd replace [0] with .ord -- but ruby-hmac seems broken under 1.9
end
 
cgi = CGI.new
params = cgi.params.dup
 
amazon_endpoint = params.delete('amazon_endpoint')
amazon_path = params.delete('amazon_path')
js_callback = params.delete('js_callback')
 
signing_params = {
  'AWSAccessKeyId' => ACCESS_IDENTIFIER,
  'Timestamp' => Time.now.gmtime.iso8601
}
 
params.merge!(signing_params)
 
canonical_querystring = params.sort.collect do |key, value| 
  [aws_escape(key.to_s), aws_escape(value.to_s)].join('=') 
end.join('&')
 
string_to_sign = "GET\n#{amazon_endpoint}\n#{amazon_path}\n#{canonical_querystring}"
 
hmac = HMAC::SHA256.new(SECRET_IDENTIFIER)
hmac.update(string_to_sign)
signature = Base64.encode64(hmac.digest).chomp
 
params['Signature'] = signature
querystring = params.sort.collect do |key, value| 
  [aws_escape(key.to_s), aws_escape(value.to_s)].join('=') 
end.join('&')
 
signed_url = "http://#{amazon_endpoint}#{amazon_path}?#{querystring}"
 
cgi.out('type' => 'text/javascript') { "#{js_callback}('#{signed_url}');" }

You can test this locally by feeding key/value parameters to CGI, followed by Ctrl-D. These, for example:

amazon_endpoint=ecs.amazonaws.com
amazon_path=/onca/xml
js_callback=do_stuff
Service=AWSECommerceService
Version=2009-03-31
Operation=ItemSearch
SearchIndex=Books
Keywords=george+monbiot

These include:

• Caslon Pro
• Chaparral Pro
• Garamond Pro
• Minion Pro
• Myriad Pro

If you don’t want to actually install InDesign, you can get to the fonts like so (if you’re a Mac user):

• Mount (double-click) the downloaded disk image
• Mount another disk image found on the newly mounted disk, at Adobe InDesign CS4/payloads/AdobeFontsAll/AdobeFontsAll.dmg
• The fonts are inside /Assets/contents on this second disk

Note that these fonts may well be covered by a very restrictive licence: I haven’t checked.

This is brilliant for Mac users who need to test websites in IE, because you get a real installation of each browser in its home environment, with the right JavaScript engine and working conditional comments, plug-ins, Windows Media Player, and so on. With the alternatives, such as running under Wine or using Multiple IEs in a single Windows virtual machine, one or more of these things tends to be missing.

Unfortunately, the images are supplied as self-extracting .exe files, which of course are Windows programs. But happily, the Mac ports of Wine, the open-source Windows emulation software, can run them.

• Get hold of the self-extracting archives from Microsoft. I find XP+IE6 and XP+IE8 a useful combination.
• Install Darwine.
• Open /Applications/Darwine/WineHelper, choose File > Open… and pick one of the .exe files you downloaded in the last step.
• Ignore any Darwine messages about needing to install Mozilla, and click Next/Agree/etc. as necessary in the installer to extract the .vhd file. (I understand the free VirtualBox will take such a .vhd directly, but I’ve not tried this myself).
• Download Q. This is a largely useless program for Intel Mac users, since its purpose is to emulate the CPU you already have. But bear with me: it includes a very handy utility.
• Open /Applications/Utilities/Terminal, and paste in the following command, substituting in the correct path to your .vhd file and a path of your choice for the .vmdk file it will be converted to:

/Applications/Q.app/Contents/MacOS/qemu-img convert \
  -f vpc -O vmdk path_to_old.vhd path_to_new.vmdk

• Nothing will appear to be happening for a few minutes, but don’t worry. Wait for the prompt to reappear.
• Create a new Virtual Machine in Fusion, based on the new .vmdk you just created. Agree to Fusion’s request to convert the format of the disk.
• Before starting up the new machine, remove its USB controller, sound card and serial port, and disable 3D graphics (this is all optional, but it reduces the number of requests for drivers you’ll have to deny later).
• Start the virtual machine, canceling any requests for driver disks or Windows Update attempts.
• Install VMWare Tools. I find everything works except the mouse, so at this point I choose the custom installation and deselect the mouse driver.
• Reboot and you’re done.
• Don’t forget to move the original .exe and .vhd files to the Trash: they’re big and completely useless now.

You have to create a ‘component’, which entails a fair chunk of unintelligible boilerplate code (well, unintelligible unless you’re much better acquainted with Firefox’s innards than developing a basic extension generally requires you to be).

Plenty of places will tell you roughly how to do it. But, after some experimentation, let me show you exactly how.

• Copy this JavaScript file into your extension’s /components directory (if that directory doesn’t exist yet, create it).
• Add these lines to your chrome.manifest:

component {723079F5-F880-40BB-8283-8266DEA93960} components/getExtDir.js
contract @mackerron.com/getExtDir;1 {723079F5-F880-40BB-8283-8266DEA93960}

• Use it from elsewhere in your extension like so:

var own_path = Components.classes["@mackerron.com/getExtDir;1"]
  .createInstance().wrappedJSObject.getExtDir();

Update, August 2011 — Firefox 3 made this a bit less hairy, and Firefox 4 introduced a small but incompatible change. The updated code above works in Firefox 3 – 6, and most likely beyond. However, to make knowing your own directory useful (e.g. in order to locate and run an AppleScript there) you may have also to set <em:unpack>true</em:unpack> in install.rdf. This activates the old extension unpacking behaviour, which is deprecated because it increases load time.