Interacting with Microsoft's LED art piece at JSConf EU

Hi CSSConf/JSConf EU friend! If you're here, then you've probably heard that we brought an LED art piece with us to the conferences. This article will tell you all about this project at a high level, and how you can engage with it.

This art piece is very loosely inspired by bamboo forests. This device features multiple LED "shoots" that are controlled from the cloud, by you. The hardware was built by my amazing teammate and Microsoft Cloud Advocate PM for Europe Jan Schenk from designs I created. Here is what the finished version of the art piece looks like:

Creating animations for this piece may look daunting at first glance, but don't worry. I put a lot of work into this project over the years to make it approachable for a wide variety of folks.

This project is based on another project I created called Raver Lights. I started this project back in 2016 to control LEDs on art pieces destined for Burning Man and similar events. Suffice to say, it's pretty well tested at this point, having survived the extremes of the desert multiple times now.

I decided to have a little fun building this app. My design skills may not be the best, but I did get to use some pretty new technologies here: CSS Grid, the new CSS filter property, and Web Assembly. If I'm at the booth, ask me all about how I wrote it (I'm the one with purple hair). You can also check out the code on GitHub.

While these animations are certainly pretty, you don't quite get the same control as custom animations.

Custom

You can also write a custom Azure Function to gain complete control of the animation. For the curious, here is the code to create the default animation you see running at the booth:

import{createWaveParameters,createMovingWave,createSolidColorWave,createPulsingWave}from'rvl-node-animations';constanimation=createWaveParameters(// Create the moving purple wave on topcreateMovingWave(215,255,8,2),// Creating a pulsing green on top of the blue, but below the purplecreatePulsingWave(85,255,2),// Create the solid blue on bottomcreateSolidColorWave(170,255,255,255));

This code uses the same tools you'll use to create a custom animation. Not so bad, right? Trust me, writing the animation engine that takes these parameters was considerably more difficult.

To get started writing a custom animation, head over to our starter repo and read the instructions there.