LIVE VERSION (16:9)

‍

‍

The Idea

We wanted to create a random number generator for MGC's streams, featuring a 3D grenade animation that reveals the randomly drawn number.

The main challenge was ensuring this worked live on stream, rather than generating the number and then rendering a custom animation afterward in After Effects (or rendering every possible combination). I used Blender, After Effects, Webflow, and ChatGPT to bring this idea to life.

‍

The Design

For the grenade, I aimed to make it eye-catching and cohesive with the existing visuals of the event.

I found a suitable grenade model on CGTrader for $2, which fit perfectly for this purpose.

After a simple setup in Blender, I exported the animation with no background, allowing me to adjust the timing and explosion in After Effects.

Background Design Loop

Prizing Graphic Animation

‍

The Code

‍

For the code, I asked ChatGPT to build a random number generator using JavaScript. I provided the context of the implementation and iterated through a few versions to achieve a viable product for this application.

I tested the code with a code embed on Webflow and exported the HTML content for local delivery and access. This process ensured that the random number generator was seamlessly integrated into the live stream setup.