While working with the unofficial Philips Hue API, another idea appeared to me. What if I could take a live videofeed, calculate the average color, convert it to HSL, and send it to any connected hue bulbs? Well, I would have one big-ass Ambilight setup, that is what!
After a couple of hours coding tonight, mainly working on pixel selection, I got a prototype up and running.
I plan to sell this for around 5$, do you think that is reasonable?
Videos of the prototype:
Pixar trailer test
Let me know what you guys think :)
4 months ago
Thats genius man. Awesome.
Nice! What did you implement it in? I'm basically doing the exact same thing on iOS :-)
Early Ambify Video Demo
@Kai Aras that looks great mate! I used Adobe Air, as I've been coding in AS3 for years now. How often do you poke the api to get your transitions working?
@Kevin Andersson well, keep it up, look great so far! How do you process the frames? I've tried extracting multiple colours but simply using the average color seemed to work best. I used an interval of .5 seconds I think. It's been a while though, been focusing on the music part for now.
@Kai Aras thank you. I am currently sampling from a user-selected area (which you can see in the first video).
I also tried with several samples, but one sample works the best. For movies, sampling either the corner area, or center gives a really nice effect.
@Kevin Andersson ah, overlooked that first part. Can't wait to see more!
@Kai Aras ah! Just fixed a major issue with my brightness calculation, now it works great. Let me see if I can't shoot another video!
Thats great.!!! I had a same idea when Hue was launched but I'm only designer and dont have developer to do that:-)
Making quite a lot of progress on the live feed for hue.
Nice, I'm doing something similar (or trying) with a native Mac toolbar app, but it's my first time diving into Objective-C, so it's more of an experiment than anything. I hope to use it while gaming to get more atmosphere. :)
Very cool, aside from the fact that the one second lag would drive me crazy.
@Doney den Ouden it was basically a proof of concept. I've coding everything from scratch this morning, and is has a way better response rate now. I'll see if I can upload something later.
@Kevin Andersson Cool, I'm really excited for the Hue's possibilities and your application, might get them in the future, if the response rate increases.
I'd also make 2 color options available if I were you:
1) Take the average color of the whole screen and send them to both lights
2) Take the average color of the left 25% of the screen and send that to the bulbs on the left, same for the bulbs on the right
@Doney den Ouden as for 2. I've already included a screen selection tool. You can either leave it at default (the whole screen) or select an area which then is used for the average. I'll probably also add independent sources for different lights.
@Kevin Andersson Neat, so basically I could play a movie using VLC on my Mac and then use this to have an Ambilight kind of effect?
Another idea; an overall maximum-brightness slider, so that you can set the brightness to a low point when watching tensive movies in the dark.
@Doney den Ouden
Currently you need your webcam to point at the screen, as that is where I get the data from.
The maximum brightness is another thing which is already thought of in my build. I have variables for a brightness multiplier, as well as another variable increasing the color saturation.
Updated prototype video. Everything completely rewritten.
Here's a couple of new features:
Value that defines when the Camera Sampler should dispatch a new color value. The sampler checks the difference in color value, from the previous entry - if the gap is larger than the defined value it fires a change color event.
Defined the overall transition speed for color / brightness change. However, if black is detected transition will change to 1 second to prevent flickering.
Because most cameras don't do well in low lumen, black often comes out as blue / green - this value tells the sampler when to transition to black. If the brightness goes below this value the sampler will turn the lights off.
Value per light source - multiplies the saturation.
Value per light source - multiplies the brightness.
Learned SO much about colorspaces doing this little sideproject. HSL, HSB, RGB, HEX - damn.
Color for that background is perfect.
by Kevin Andersson
This is just to give you an indication of where the app is heading, and to let you know that I am still alive an breathing.
Let me show you the changelog while I'm here:
New Class :: VideoDisplay
Decoupled video from Camera / Camerasampler
New Class :: UIKitPanel
New Class :: UIKitToolbar (header)
Class :: ColorSamplePicker
Added offset_x, offset_y to input target
Added selection preview
Class :: UIbutton
Added UIIcon support
Moved all buttons, sliders, panel elements into panels
New Class :: UIAsset
Class to reference static external assets and load them dynamically (icons, video, sound)
New Class :: UIIcon
New Class :: UISlider
New Class :: UIButton
New Class :: UIPanel
4 months ago
While building Hue Ice: Live, most of my time has been spent on making the building blocks for a scaleable, cross-platform application (not so much on UI design). I've been developing with OOP AS3 for years, which is also my real job, and when Adobe Air came out I started developing stuff with that as well. Mostly I've just been writing classes upon classes to control the most basic functionality; this is the turning point.
This UIKit is being developed from the ground up, with a goal of having a complete library of objects to drag & drop into my projects. All elements will be compiled as Flash / Air components, which will enable external parameters (just like you know from XCode).
Please note that this isn't a matter of UI Design, but Code design, so please refrain from commenting on the looks; don't judge the lady on her looks man'!
Just another status update from my ever expanding project.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter