Do you listen to music while you work? I write code, blog posts, and PowerPoint presentations, and I have to have some background music. I either prefer “lo-fi” or alternative rock from the 1990s. I have been listening to the Lofi Girl channel for years and it has helped me through many sticky design problems, aided me as I learned new technologies, and was my backdrop to new inventions.

One neat thing that the Lofi Girl YouTube channel does is have live streams of Lo-Fi music with 2D animated art. They change up the scene, vibe, colors, mood, art style, and motion. I always found the streams relaxing, peaceful, and engaging with Just small simple movements and changes over a long period of time. This recognition is what started me experimenting with Lo-Fi music and 2D animation in Adobe After Effects.

What is Lo-Fi Music?

Lo-fi (also typeset as lofi or low-fi; short for low fidelity) is a music or production quality in which elements usually regarded as imperfections of a recording or performance are audible, sometimes as a deliberate aesthetic choice.

Wikipedia

The way I look at Lo-Fi is that the songs are without lyrics and vocal tracks. Lo-fi music is repetitious background music usually influenced by hip hop sounds and beats along with scratching, environmental, or natural noise.

In the r/LofiHipHop subreddit, someone posted about making A Lo-fi Hip-Hop Music Generator using LSTM and recurrent neural networks. Yes, we now live in an age where this kind of innovation with AI technologies is not only possible but useable. And, of course, the code is just sitting on GitHub for anyone to use, make changes, and make improvements.

Here’s some AI generated Lo-Fi music for you to sample.

Twitch Live Stream

With some help, I was able to create an animated 2D scene using Adobe After Effects. It is a scene looped over and over but the loop is seamless. The changes a little bit: screen shows scrolling chat messages, it’s raining outside, the cat is sleeping, and the humidifier is humidifying. The CheerLights part of the logo and the body of the humidifier are transparent. This means that I can change their colors by changing the background color. MOV files support transparency. You probably already see where I am going, but I set the background color with CheerLights which changes the logo and the humidifier. This is a proof of concept and it works. I pull all of the elements together in OBS Studio to produce a composite stream: CheerLights color background, 2D animated MOV file, and the Lo-Fi music playing with the VLC plugin.

You can change my live stream right now by tweeting to @cheerlights and naming a color.

Some Ideas

So, what I basically have is a social network controlled live stream. I could make more of the show interactive. If I had more elements that were controllable, OBS could show elements or not. A tweet could influence the next song that is playing or even change the song using the procedurally generated music. I will keep exploring this space. Let me know if you have any ideas or want to contribute. Cheers.

CheerLights is an Internet of Things project where lights are synchronized to the same color. The color is controlled by anyone using Twitter. Just send a tweet to @CheerLights and mention a color name and this will set the colors of all of the lights connected to CheerLights. Learn more at CheerLights.com.

New Backend System

CheerLights is now running a Node-RED flow process matching tweets. This system takes the text from the tweets and looks for color names. If any match the supported colors, the flow sends the color to ThingSpeak, Adafruit IO, and CheerLights MQTT using MQTT.

JavaScript Library and Web Widgets

To make it easy for web developers to join the CheerLights project, we released a JavaScript Client Library for CheerLights on GitHub. We also made some web widgets that you can use to show the latest CheerLights color on a web page.

CheerLights Live Stream on Twitch

I am streaming a CheerLights display on Twitch. You can use the live stream to see if your CheerLights display is staying in sync with your display. I am streaming some lo-fi music along with some animations. I will change it up after the holidays.

CheerLights Community on Discord

The CheerLights team has set up a Discord Server to talk about our plans and share news of the project. You are welcome to join, ask questions, and share your projects. People of all skills are welcome!

Together we can build the world’s largest network of synchronized lights.