This commit is contained in:
Caleb Braaten 2024-04-03 18:10:25 -07:00
parent 4ced372eff
commit 819ffca552

View File

@ -4,17 +4,17 @@
For the gender reveal of my second kid, I wanted to do something unique and fun. It was the perfect excuse to justify the purchase of a Philips Hue Lightstrip to the Mrs. For the gender reveal of my second kid, I wanted to do something unique and fun. It was the perfect excuse to justify the purchase of a Philips Hue Lightstrip to the Mrs.
I wrapped the light strip around our Christmas tree and wrote some Javascipt to alternate between blue and pink. There were a couple iterations I wrapped the light strip around our Christmas tree and wrote some Javascipt to alternate between blue and pink. There were a couple iterations.
## Technical Details ## Technical Details
`lib.js` contains some helper functions (and authentication to the Hue Bridge) that leverage the Philips Hue REST API. These functions are used in `main.js` to control the light strip. `lib.js` contains some helper functions (and authentication to the Hue Bridge) that leverage the Philips Hue REST API. These functions are used in `main.js` to control the light strip.
The first iteration of the light show was a simple alternating sequence that loaded all the color transitions into the event loop at the start with the setTimeout progressively having a longer delay to create the sequence. The first iteration of the light show was a simple alternating sequence that loaded all the color transitions into the event loop at the start with the setTimeout progressively having a longer delay to create the sequence.
The linear nature was a bit boring, so I pulled in a [bezier.js library](https://github.com/Pomax/bezierjs/blob/master/src/utils.js) (Thank you [Pomax](https://github.com/Pomax)) to create a more dynamic pacing of the sequence. The linear nature was a bit boring, so I pulled in a [bezier.js library](https://github.com/Pomax/bezierjs/blob/master/src/utils.js) (Thank you [Pomax](https://github.com/Pomax)) to create a more dynamic pacing of the sequence.
Following the same setTimeout strategy, I created a list of values from the bezier curve to use as the root of the setTimeout delay making the sequence speed up and then slow down to a stop. Once the sequence was complete, the final color would start to glow in and out. Following the same setTimeout strategy, I created a list of values from the bezier curve to use as the root of the setTimeout delay making the sequence speed up and then slow down to a stop. Once the sequence was complete, the final color would start to glow in and out.
## Video ## Video