Skip to main content

Livestream Background Generator

I sometimes stream some silly things on my twitch channel. At 1st of October we had a semi-blind race with friends from the PolishSpeedrunners community in Grand Theft Auto IV. It took around 10 hours for the last person to finish, you can find the summary on the racetime.gg page. GTA speedrunning community has always had a knack for filling the empty screen space creatively.

2014 GTA 100% Trilogy Race layout.
2014 GTA 100% Trilogy Race layout. Source: @AdamKuczynski

I wanted to pay homage to them so I did my best in the little time I had before the stream.

My layout for GTA IV Blind Race.
My layout for GTA IV Blind Race)

I was satisfied with the result but something was missing. It lacked the dynamism and after a moment of studying you already knew everything what it had to offer. So after the race I thought I could make it more unpredictable by increasing the number of images. And showing them in random order. And adding random entry animations.

Example run of the generator.
Example run of the generator.

It took some time and money to get all the assets but the final effect was definitely worth it. I wrote everything in pure javascript embedded on a static website so I could easily use it as a background in my OBS via Browser Source. Some of the APIs for drawing work only in Chromium based browsers at the time of writing this.

You can find project’s repository on my github account. The live demo is available on my website (the first load will be slow because all the images have to be downloaded).