I was watching a Sean Carroll video, and in the first few minutes Carroll used an Apple app to decide whether to hop left or right based on the results of a quantum event.

This got me thinking that it would probably be fairly easy to write a Vue component that would flip a coin based on a quantum event. All I had to do was find some code to display an animated coin flip, and a way to get data from quantum events.

The coin toss ended up being available via a CodePen example. So far, so good.

For the quantum event, I first found some hardware that I could buy - but this seemed like a bad solution for my static site blog setup!

Thankfully I then chanced upon an API for the ANU Quantum Random Numbers Server. Yay - free quantum events, from quantum fluctuations in a vacuum.

Heads or Tails

Putting the two together, and with a little bit of Vue magic, we get a simple coin toss that gives a truly random result for each flip. Click the coin to flip it (and be patient - sometimes the ANU website is a little slow!).

Roll a d20

Of course, this method isn't restricted to coin flips, or quantum events. We could also use random data from atmospheric noise, courtesy of random.org, borrow a CSS d20 example, and make it into a Vue component. Click on the die to roll it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Don't forget, if you have a Google Home or any device with Google Assistant, you can flip a coin, roll a die, roll a d20, etc:

Code

Here's the Vue I put together to make this happen.