# Theory and Practice of Tangible User Interfaces

### Announcements

November 24, 2007
Reading for November 27th, are now posted. Enjoy!

October 2, 2007
To upload your thoughtless acts, create a new assignment page like any other lab. You'll see "Thoughtless Acts" listed as one of the assignment options.

May 24, 2008
This site has been archived and is no longer editable. Stay tuned for the next version, coming in the fall!

# HSV to RGB with two pots

Project Members:
Hannes Hesse

### Description

For this assignment, I decided to use two potentiometers to control hue and brightness values to define a color, composed by three LEDs (red, green and blue).

This involves reading numeric values from the pots, composing a color in the HSV (Hue, Saturation, Value) color space, transforming it to a color in the RGB color space and rendering this color with three LEDs.

I decided to hard-code the saturation value to 1 (maximum) to achieve the best effect and to be able to use this demo with two hands.

The HSV to RGB conversion function was taken from http://www.cs.rit.edu/~ncs/color/t_convert.html and adaped to run on Arduino.

### Hardware Components Used

3 Light Emitting Diodes (LEDs)
3 220 Ohm resistors
2 Potentiometers
Arduino computer
Jumper wires
Styrofoam coffee cup
Plastic lid

### Arduino Code

/**
* This program treats two potentiometers as hue and brightness pots and
* outputs these values using red, green and blue LEDs.
*/

float r, g, b;

int bPot = 1;   // select the input pin for the potentiometer
int hPot = 2;
int rLed = 11;   // select the pin for the LED
int gLed = 9;
int bLed = 10;

/**
* Converts a color encoded in HSV (Hue, Saturation, Value) to an
* RGB color.
* Ranges for arguments are:
* - h: 0 - 360 (hue in degrees)
* - s: 0 - 1
* - b: 0 - 1
* Return values (global variables r, g, b) are 0 - 1.
*
* Code borrowed from http://www.cs.rit.edu/~ncs/color/t_convert.html and adapted by Hannes Hesse.
*/
void hsb_to_rgv(float h, float s, float v )
{
int i;
float f, p, q, t;
if (s == 0 ) {
// achromatic (grey)
r = g = b = v;
return;
}
h /= 60;            // sector 0 to 5
i = int( h );
f = h - i;            // factorial part of h
p = v * ( 1 - s );
q = v * ( 1 - s * f );
t = v * ( 1 - s * ( 1 - f ) );
switch( i ) {
case 0:
r = v;
g = t;
b = p;
break;
case 1:
r = q;
g = v;
b = p;
break;
case 2:
r = p;
g = v;
b = t;
break;
case 3:
r = p;
g = q;
b = v;
break;
case 4:
r = t;
g = p;
b = v;
break;
default:        // case 5:
r = v;
g = p;
b = q;
break;
}
}

void setup() {
Serial.begin(9600);
}

void loop() {
float h = ((float) analogRead(hPot)) * 360/1024;
float s = 1;
float v = ((float) analogRead(bPot)) * 255/1024;

// Convert from HSV to RGB
hsb_to_rgv(h, s, v);

analogWrite(rLed, r);
analogWrite(gLed, g);
analogWrite(bLed, b);

}

Photo to follow

### nice find with the hsv to

nice find with the hsv to rgb code.

### feedback

Hey Hannes,

waiting for photo. Please send us an email once you've uploaded it (or did you have a problem?)