The document discusses exploring different color spaces like RGB, HSL, and HSV by tracking hand gestures with a Leap Motion controller and controlling LIFX smart bulbs. Code examples are provided in Ruby and JavaScript to discover LIFX bulbs, map hand position data to color values, and set the bulb colors. The goal is to enable new ways of interacting with technology through gesture control and different representations of color.

1. Exploring Color Spaces
with Gesture Tracking and Smart Bulbs
Daniel Luxemburg "
@dluxemburg"
Distill 2014

8. exploring-color-spaces/lifx1.rb
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.lan
client.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

9. #35879d
rgb(53, 135, 157)
3*16 + 5 = 53

10. 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
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

11. exploring-color-spaces/lifx3.rb
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
numbers = raw.split(',').map(&:to_i)
color = LIFX::Color.rgb(*numbers)
client.lights.set_color(color)
end

14. 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()
controller.on('frame', function(frame){
console.log(frame)
})
controller.connect()

15. exploring-color-spaces/leap2.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()

16. exploring-color-spaces/leap3.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 ))
})
}
//...

17. exploring-color-spaces/leap3.js
12
13
14
15
16
17
18
19
20
22
23
24
25
26
27
!
!
//..
var lastFrameTime = 0
controller.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()

21. exploring-color-spaces/lifx4.rb
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

23. exploring-color-spaces/leap4.js
12
13
14
15
16
17
18
19
20
22
23
24
25
26
27
28
29
30
31
//..
var
lastFrameTime
=
0
controller.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()

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

29. Thanks!