Exploring Color Spaces with Gesture Tracking and Smart Bulbs

Daniel Luxemburg "@dluxemburg"

Distill 2014

1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20

require  'lifx'  client  =  LIFX::Client.lanclient.discover    while  client.lights.count  <  1  sleep(1)end    puts  "Found  #{client.lights.count}  light(s)"  puts  "Turning  them  on"client.lights.turn_on    puts  "Waiting  5  seconds"sleep(5)  puts  "Turning  them  off"client.lights.turn_off

exploring-color-spaces/lifx1.rb

#35879d

rgb(53, 135, 157)

3*16 + 5 = 53

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

puts "Found #{client.lights.count} light(s)”

puts "Turning them on"client.lights.turn_on

puts "Turning them teal"teal = LIFX::Color.rgb(53, 135, 157)client.lights.set_color(teal)

puts "Waiting 5 seconds"sleep(5)

puts "Turning them back to white and then off"white = LIFX::Color.rgb(255, 255, 255)client.lights.set_color(white)sleep(5)client.lights.turn_off

exploring-color-spaces/lifx2.rb

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

.

exploring-color-spaces/lifx3.rb//..client.lights.turn_on

Signal.trap("INT") { client.lights.turn_off exit}

while raw = $stdin.gets numbers = raw.split(',').map(&:to_i) color = LIFX::Color.rgb(*numbers) client.lights.set_color(color)end

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var Leap = require('leapjs')

var controller = new Leap.Controller()

controller.on('frame', function(frame){ console.log(frame)})

controller.connect()

exploring-color-spaces/leap1.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var Leap = require('leapjs')var controller = new Leap.Controller()

var lastFrameTime = 0 controller.on('frame', function(frame){ if (Date.now() - lastFrameTime < 1000) return lastFrameTime = Date.now() var hands = frame.hands.map(function(hand){ delete(hand.frame) return hand }) console.log(frame.hands)})

controller.connect()

exploring-color-spaces/leap2.js

1 2 3 4 5 6 7 8 9 10 11 12

var Leap = require('leapjs')var controller = new Leap.Controller()

var mapPositionData = function(positions){ var ext = [[-240,240],[120,480],[-80,80]] return positions.map(function(p,i){ var n = (p - ext[i][0])/(ext[i][1] - ext[i][0]) return n < 0 ? 0 : (n > 1 ? 1 : (i == 2 ? 1 - n : n )) })}//...

exploring-color-spaces/leap3.js

12 13 14 15 16 17 18 19 20 22 23 24 25 26 27 !!

//..var lastFrameTime = 0controller.on('frame', function(frame){ if (Date.now() - lastFrameTime < 250) return lastFrameTime = Date.now() if (frame.hands.length > 0) { var palmPosition = frame.hands[0].stabilizedPalmPosition var rgb = mapPositionData(palmPosition).map(function(n){ return Math.round(n*255) }) console.log(rgb.join(',')) }})controller.connect()

exploring-color-spaces/leap3.js

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

//..client.lights.turn_on

Signal.trap("INT") { client.lights.turn_off exit}

while raw = $stdin.gets args = raw.split(/,| /) space = args.first.to_sym args = args.slice(1,3).map(&:to_f) args.unshift(space) color = LIFX::Color.send(*args) puts "#{space}(#{args.slice(1,3).join(',')})" client.lights.set_color(color)end

exploring-color-spaces/lifx4.rb

12  13  14  15  16  17  18  19  20  22  23  24  25  26  27  28  29  30  31

//..var  lastFrameTime  =  0controller.on('frame',  function(frame){  if  (Date.now()  -­‐  lastFrameTime  <  250)  return  lastFrameTime  =  Date.now()  if  (frame.hands.length  >  0)  {      var  palmPosition  =  frame.hands[0].stabilizedPalmPosition        var  pl  =  frame.hands[0].pointables.length        var  space  =  [‘rgb','rgb','hsl','hsl','hsv','hsv'][pl]        var  multipliers  =  space  ==  'rgb'  ?  [255,255,255]  :  [360,1,1]        var  vals  =  mapPositionData(palmPosition).map(function(n,i){          return  (n*multipliers[i]).toPrecision(3)      })        console.log(space+"  "+  vals.join(','))  }})  controller.connect()

exploring-color-spaces/leap4.js

“Enable us to build technology and interact with our peers, community and users in exciting new ways.”

Thanks!