Roll-Dice-in-High-Fidelity-3D

Roll Dice in High-Fidelity 3D 🎲

Rolling dice virtually is not the same experience as rolling dice physically. It just doesn’t feel real. The dice do not appear to tumble or make sounds. This disconnected experience makes one suspect that maybe these on-line dice are not really random.

It would be great to recreate the experience of actually rolling dice in the browser. It would be reminiscent of marathon Monopoly with your friends. It would be like Vegas baby!

DataVis 👁️ UX 🍭 PWA 👁️ ThreeJS ✨ Vue 🚀 Svelte 🌶️ htmlx 🚀TypeScript && Go Vivid Vector 🌑🌒🌓🌔⭐🌖🌗🌘🌑 Skullduggery Vivid Vector Skullduggery Vivid Vector ✨ Cypress && JavaScript && TypeScript && Go 🪐 Infographics UX PWA Typescript Svelte ThreeJS Vue ✨htmlx Vivid Vector 👁️ D3 Parallax Three.js Greensock && WebGL 🍭

🏖️ Inspired Problem Solver 🚀 Visual Storyteller Vivid Vector Skullduggery 🚀 TypeScript && Go Vivid 👁️ D3 Parallax Three.js Greensock && WebGL 🍭 Vivid Vector 👁️ D3 Parallax Three.js GSAP && WebGL 🍭 Vivid Vector Skullduggery🚀 TypeScript && Go
3d dice DataVis 🚀 Micro Frontend 🚀 PWA 3d dice 3d dice 3d dice 3d dice Skullduggery 3d dice 3d dice 3d dice DataVis 👁️ UX 🍭 PWA 👁️ ThreeJS 3d dice 3d dice 3d dice
3d dice 3d dice 3d dice 3d dice 3d dice 3d dice 3d dice 3d dice 3d dice 3d dice 3d dice 3d dice Infographics UX PWA Typescript Svelte ThreeJS Vue ✨htmlx

In this article I introduce a gamified micro-interaction in which dice are rolled virtually by shaking the phone. The sensation is complete with haptic feedback making it seem like the bones are rattling in your sweaty palm. The mathematical integrity of the roll result is achieved through the high entropy of the Web Crypto API.

“Why?”, you might and should ask. I prefer to answer the “Why” in terms of business value.

1). The PWA proposition: It is not uncommon for startups to develop a web app, an iPhone app, and an Android app. When management is convinced that a web app can be just as engaging as native they will decide to focus solely on the web app and get to market much quicker (PWA=MVP). I believe that this project proves beyond doubt the immersive potential of browser APIs.

2). The argument for Gamification: Framing customer touch-points as playful games has the potential to differentiate, engage, and persuade like nothing else.

3). Asset Branding: I am doing this because it allows me to integrate emerging browser APIs in such a way that I have a slick deliverable to demonstrate when I am done.

High Entropy Dice Roll

The web crypto API provides pretty good random numbers. The numbers have greater entropy and less bias. Here is a simple JavaScript function that returns a random whole number between 1 and 6. Digital computers struggle to produce quality random numbers. They need a seed that represents something that is truly random like a dice throw. See how I brought it full circle. A computer needs a physical representation to create a true random value, even a digital dice would benefit from a physical dice throw. It’s a self referencing meta rabbit hole thought experiment.

function getCryptoRange(min, max) {
    const range = max - min + 1
    const mBits = Math.ceil(Math.log2(range))
    const mBytes = Math.ceil(mBits / 8)
    const nAllowed = Math.floor((256 ** mBytes) / range) * range
    const arBytes = new Uint8Array(mBytes)
    let value
    do {
        crypto.getRandomValues(arBytes)
        value = arBytes.reduce((acc, x, n) => acc + x * 256 ** n, 0)
    } while (value >= nAllowed)
    return min + value % range
}

console.log( getCryptoRange( 1, 6 ))

This site is open source. Improve this page.