🪙Let’s Become a Millionaire in a Second (Gold Fountain with React Three Fiber)🪙

#ai #webdev #rust #docker

Intro🚀

Have you ever wanted to become a millionaire? I have always wanted to become a millionaire. I'm working hard and seriously every day and night. However, I'm not getting rich at all.😿 If you have the same problem, or even if don't but just want to become a millionaire, leave it to me! I created a perfect app for this dream. Ta-da! It's the Gold Fountain!🪙 It will burst out gold coins every time you click the magical box. This app will definitely satisfy our minds without doing anything illegal to get lots of coins.🤤

How to Enjoy Gold Fountain🪙

Just click the box in the center of the screen, and the coins will explode vigorously from the box. When you click the box repeatedly, we can see a magnificent brspurt scene. We can enjoy this until the screen is full of coins.🪙🪙🪙

I added OrbitControls to Gold Fountain to change the viewing angle of the scene. You can zoom in and zoom out using the mouse wheel and enjoy far and close views. Also, when you click the screen and drag, the view rotates so you can enjoy the view from the top, left, right, and even the bottom. You have the freedom to enjoy the piled-up coins wherever you want.🪙🪙🪙

Gold is quite expensive these days. I checked the price and found that one-ounce coins are roughly $6,000. One click sprouts 2,000 coins, so this means $12,000,000 worth of gold per click! Ah! It's so easy to become a millionaire, isn't it?🪙🪙🪙

      🤤
     🪙🪙
    🪙🪙🪙
   🪙🪙🪙🪙
  🪙🪙🪙🪙🪙
 🪙🪙🪙🪙🪙🪙

Gold Fountain🪙

How I Created Gold Fountain🪙

I created Gold Fountain with React Three Fiber with the help of AI. It is a wrapper of famous 3D graphics library, Three.js, for React. After I checked that it worked locally, I made a CodePen demo so that everyone can enjoy the Gold Fountain. Try clicking the CodePen demo and fill your display with gold coins.🤤

Technical Points of Gold Fountain🪙

I used InstancedMesh for better performance. The GPU can render all 50,000 coins in a single draw call using shared geometry with different transformations. If I used individual meshes instead, the CPU would have to issue 50,000 separate draw calls, which would severely hurt performance.

I only enabled collision detection for the coins that land and pile up to keep performance high, and skipped it for the rest. However, the thin coins penetrated each other because they could move completely through another coin between frames (tunneling). By making the coins thicker, their collision volumes became larger, making it less likely for them to pass through each other within a single frame, so collisions were detected more reliably.

I used typed arrays (Float32Array and Uint8Array) for faster physics calculations. They are much faster than regular JavaScript arrays for numerical data because they use contiguous memory with fixed-size elements and avoid object overhead, making them more cache-friendly. Float32Array stores 32-bit floating-point numbers, while Uint8Array stores 8-bit unsigned integers.

You can check all the code on CodePen. I added beginner-friendly detailed comments to the code for better understanding and learning.

Rust to the Rescue💨

Rust runs very fast, which makes it well suited for heavy physics computations. Since I had to run collision detection for thousands of coins, I wanted to see how much faster it would be in Rust, so I tried using WebAssembly (WASM) to integrate Rust with JavaScript. Rust compiles ahead of time to native code and provides predictable performance with no garbage collection. Memory is managed deterministically, so there are no GC pauses. JavaScript engines are highly optimized with JIT compilation, but they still have some runtime overhead and garbage collection, which can occasionally cause frame drops or stuttering during physics simulations.

I added code that can calculate Rust and JavaScript computing time and display them on the screen. Rust has an overhead when transferring data from JavaScript to Rust and from Rust to JavaScript. Even though using Rust was faster than using JavaScript only. The difference in speed got bigger as the coin calculation increased.

You can test the demo using the link below.↓
https://ubiquitous-taffy-dd5f77.netlify.app/
You can also check all the code on GitHub.↓
https://github.com/webdeveloperhyper/gold-fountain-public
I added beginner-friendly, detailed comments to the code for better understanding and learning.

Docker to the Rescue🐳

I added a GitHub Actions CI/CD pipeline. It uses a Docker container (rust image) to build the WebAssembly in a clean environment and then automatically deploys to Netlify. This solved the local build issues, such as my antivirus blocking Rust compiler.

There are several reasons why Docker is helpful:

Isolation: Each container runs in an isolated user space, which helps prevent dependency conflicts between projects.
Consistency: Docker lets you reproduce the same environment everywhere, reducing “works on my machine” issues.
Multiple environments: You can run multiple projects side by side, each in its own container without interfering with others.
Clean builds: Containers provide reproducible, clean environments, so leftover dependencies or local state are less likely to cause strange bugs.
Security: Containers add an extra layer of isolation from the host system, making it safer to run external or untrusted code.

You can check all the code on GitHub.↓
https://github.com/webdeveloperhyper/gold-fountain-public
I added beginner-friendly, detailed comments to the code for better understanding and learning.

Future Update Ideas for Gold Fountain💡

Add metallic sounds of coins.
Change coins to other valuable things.
Add an action when clicking the piled coins.
Use WebGPU to speed things up.
Add AI features to make it more fun.
Please let me know if you have any ideas.

More about Animation and AI🎢

My posts about fun 2D/3D animation. ↓

Also, here are my posts about AI. ↓

My Brain Training App (Muscle Brain) 💪🧠

Available as Chrome Extensions for Free
https://chromewebstore.google.com/detail/muscle-brain-ultimate-edi/nmlolddnfpfambkcnplggphjgbjeabfc

Available on Microsoft Store for Free
https://apps.microsoft.com/detail/9NG572QMV56M

Collab Project in Progress🤝

I'm now working on a collab project with my DEV Community friend @itsugo. Looking forward to releasing it soon.

Outro🚀

Thanks to my app Gold Fountain, I can get as many gold coins as I want with just one click. Now I'm a millionaire on the web. I hope you also got as many coins as you wanted. If you need more coins, just grab your favorite mouse and have a nice click.🤤

I'm glad you enjoyed this post. Thank you for reading. Happy AI coding!🧠 You're absolutely right!🤖

Do you have any ideas to make this app more fun?
Do you have any ideas on how to become a millionaire? I would love to hear your thoughts!⬇️⬇️

Top comments (4)

Aryan Choudhary • Feb 2

Wow, I'm loving the creativity that went into Gold Fountain. The way you've used React Three Fiber and AI to bring that fountain to life is seriously cool. I'm especially impressed by the fact that you've managed to balance performance and visual appeal – it's a really delicate balance to strike, but it totally pays off when you're clicking and watching those coins orbit. ヽ(￣ω￣(￣ω￣〃)ゝ