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.

There are two ways to control the animations in this piece. The first way is at our booth using a web interface running on the new Chromium-based version of Edge (ask us about it!). The second is by creating your own Azure Function-based Serverless endpoint, which gives you a lot more control over the animation than the booth interface.

Basic Animations

Don't let the name fool you, there's nothing boring about these animations! I'm just bad at naming things, to be completely honest.

At the booth, you can submit an animation from tablets we'll have on hand running the new Chromium-based version of Edge. If you haven't heard yet, we're rewriting our browser to be based on Chromium! We're still hard at work getting it ready for general use, but you can download canary and dev channel builds today for Windows 10 and macOS.

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';

const animation = createWaveParameters(
  // Create the moving purple wave on top
  createMovingWave(215, 255, 8, 2),

  // Creating a pulsing green on top of the blue, but below the purple
  createPulsingWave(85, 255, 2),

  // Create the solid blue on bottom
  createSolidColorWave(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.

Happy Hacking!