Early Experimentation: Interactive Twitch Live Streams, AI Produced Lo-Fi Music, and IoT

I have been experimenting with a new idea for interactive live streams. I wanted to share some of my early findings and results.

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.

Lo-Fi music for coding, creating, and chilling

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.


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.

AI Generated Lo-Fi Music

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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.