Like lots of folks on the internet, I saw the DIODER and felt that it could be improved. And what better way than to make it internet-controlled? Given that I had a Nanode lying around looking for a use it seemed like providence.

So the plan was this:

- Instead of just cycling between some gaudy colours, lets pick some classier ones
- Let’s allow the colours to be updated via the web, saving them to EEPROM
- Using 1D Perlin noise to blend between a pair of colours will allow for pleasing fades and far more interest than just transitioning from A->B (so much interest that it turned out 2 colours is all it needs … for now)
- Use HSL colour space for super-classy fading

// based on http://www.dipzo.com/wordpress/?p=50 void hslToRgb( int hue, byte sat, byte light, byte* lpOutRgb ) { if( sat == 0 ) { lpOutRgb[0] = lpOutRgb[1] = lpOutRgb[2] = light; return; } float nhue = (float)hue * (1.0f / 360.0f); float nsat = (float)sat * (1.0f / 255.0f); float nlight = (float)light * (1.0f / 255.0f); float m2; if( light < 128 ) m2 = nlight * ( 1.0f + nsat ); else m2 = ( nlight + nsat ) - ( nsat * nlight ); float m1 = ( 2.0f * nlight ) - m2; lpOutRgb[0] = hueToChannel( m1, m2, nhue + (1.0f / 3.0f) ); lpOutRgb[1] = hueToChannel( m1, m2, nhue ); lpOutRgb[2] = hueToChannel( m1, m2, nhue - (1.0f / 3.0f) ); } byte hueToChannel( float m1, float m2, float h ) { float channel = hueToChannelInternal( m1, m2, h ); byte uchan = (byte)(255.0f * channel); return uchan; } float hueToChannelInternal( float m1, float m2, float h ) { if( h < 0.0f ) h += 1.0f; if( h > 1.0f ) h -= 1.0f; if( ( 6.0f * h ) < 1.0f ) return ( m1 + ( m2 - m1 ) * 6.0f * h ); if( ( 2.0f * h ) < 1.0f ) return m2; if( ( 3.0f * h ) < 2.0f ) return ( m1 + ( m2 - m1 ) * ((2.0f/3.0f) - h) * 6.0f ); return m1; }

I also experimented with adding a gamma curve to the output, but while it definitely improved colour matching, it made fading a lot more jerky, so I didn’t go with it in the end.

Once I had reliable HSL->RGB working, I needed a good HSL interpolate function. That took some effort. I found you can use a straight linear interpolate on the S & L channels, but you need a custom one for the Hue channel as it needs to pick the shortest way to go around the circle. I also wrote it all to treat the interpolation parameter as a value from 0 to 1 in 0.8 fixed point format. This is how it looks:

void lerpHsl( const int* a, const int* b, byte t, int* lpOutHsl ) { lpOutHsl[0] = lerpHueFp8( a[0], b[0], t ); lpOutHsl[1] = lerpFp8( a[1], b[1], t ); lpOutHsl[2] = lerpFp8( a[2], b[2], t ); } int lerpFp8( int a, int b, byte t ) { long t0 = ( b - a ) * t; return ( a + ( t0 >> 8 ) ); } int lerpHueFp8( int a, int b, byte t ) { // adjust inputs so we take the shortest route around the circle int cwdist = b - a; if( abs(cwdist) > 180 ) { if( b > a ) a += 360; else b += 360; } long t0 = ( b - a ) * t; int l = a + (t0 >> 8); return ( l % 360 ); }

The last colour-related piece was to get a good 1D Perlin noise-like function. After some googling failed to turn up a nice implementation for Arduino, I built this, based on Hugo Elias’ great page here.

#define kPerlinOctaves 3 static const float kaPerlinOctaveAmplitude[kPerlinOctaves] = { 0.75f, 0.4f, 0.1f, }; float perlinNoise1( long x ) { x = ( x<<13 ) ^ x; return ( 1.0f - ( (x * (x * x * 15731 + 789221L) + 1376312589L) & 0x7fffffff) * (1.0f / 1073741824.0f) ); } float perlinSmoothedNoise1( long x ) { return perlinNoise1(x)*0.5f + perlinNoise1(x-1)*0.25f + perlinNoise1(x+1)*0.25f; } float perlinLerpedNoise1( float x ) { long xInteger = long(x); float xFraction = x - xInteger; float v1 = perlinSmoothedNoise1( xInteger ); float v2 = perlinSmoothedNoise1( xInteger + 1 ); return lerpFloat( v1, v2, xFraction ); } float perlinNoise1D( float x ) { float total = 0.0f; for( int octave = 0; octave < kPerlinOctaves; octave++ ) { int frequency = 1 << octave; float amplitude = kaPerlinOctaveAmplitude[octave]; total += perlinLerpedNoise1( x * frequency ) * amplitude; } // map from [-1,1] to [0,1] and constrain return constrain( (total + 1.0f) * 0.5f, 0.0f, 1.0f ); }

This generates the following output, which looks pretty sweet when used as the interpolation parameter

With that, all of the RGB LED controlling was done 🙂

For the web interface, I used the excellent EtherCard library, which made it super-easy.

Job done*!

*actually, I still need to build a nice jQuery’d webpage to make setting colours easier. Currently I need to go to http://192.168.1.25/hsl?i=0&h=135&s=90&l=50, which isn’t exactly as futuristic as I’d like 🙂

Pingback: Adding HTTP to Ikea DIODER - Hack a Day

Pingback: Adding HTTP to Ikea DIODER » Geko Geek

Pingback: Adding HTTP to Ikea DIODER « HuntAll

This guy did something like this too…

http://bit.ly/ueHkV1

Pingback: Adding HTTP to Ikea DIODER | ro-Stire

Nice work !

for the jQuery’d webpage take a look on Andy blog http://blog.thiseldo.co.uk/?p=599 and code https://github.com/thiseldo/EtherShield_RESTduino . It’s based on EtherShield library but Andy also work on Ethercard, he can probably help.

Pingback: leds by pearljames - Pearltrees

If you need javascript color manipulation, look no further than chroma.js released this week https://github.com/gka/chroma.js

Looks interesting, thanks!