Javascript Random Number Generator Animation

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.

‍

‍

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.