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!
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.
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 ))Portfolio Blog | 🌶️ Résumé | UX micro-library | PWA WASM | Web Tool Toys | Neodigm UX Wiki | NPM | Github | LinkedIn | Gists | Salesforce | Code Pen | Machvive | Arcanus 55 | Medium | W3C | InfoSec
