Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Quantum JavaScript

quantumjavascript.app

Post reply on HN
Print view View original

11–20 of 29 posts

Re: Show HN: Quantum JavaScript

#11

Post by gavinray »

This site has such a pleasant UI, and the text output formatting is so beautiful and meticulous. It seems like a lot of small details at work here too, like the micro-UX with hover effects on a lot of these elements.

Quantum anything is over my head, so I have no idea what I'm looking at, but it's really pretty at least.

---

Looking through the source, a few things pop out:

- Wow, this thing was made entirely in Vanilla JS + CSS, no frameworks of anything. Not a SINGLE dependency in the whole library or site. You don't see that everyday.

- In the code, maybe this is my not understanding, but it seems like the "quantum" bit is probabilities based on Math.random() calls?

    const outcomes = matrix.rows.reduce(function (outcomes, row, i) {
      outcomes.push({
        state:
          "|" + parseInt(i, 10).toString(2).padStart(circuit.bandwidth, "0") + "⟩",
        probability: Math.pow(row[0].absolute(), 2),
      });
      return outcomes;
    }, []);

    //  We need to “stack” our probabilities from 0..1.

    const outcomesStacked = new Array(this.results.length);
    this.results.reduce(function (sum, outcome, i) {
      sum += outcome.probability;
      outcomesStacked[i] = sum;
      return sum;
    }, 0);

    //  Now we can pick a random number
    //  and return the first outcome
    //  with a probability equal to or greater than
    //  that random number.

    const randomNumber = Math.random(),
      randomIndex = outcomesStacked.findIndex(function (index) {
        return randomNumber
Is this how quantum works "under the hood" so to speak?

Re: Show HN: Quantum JavaScript

#12

Post by d0m »

gavinray wrote: post #11

This site has such a pleasant UI, and the text output formatting is so beautiful and meticulous. It seems like a lot of small details at work here too, like the micro-UX with hover effects on a lot of these elements. Quantum anything is over my head, so I have no idea what I'm looking at, but it's really pretty at least. --- Looking through the source, a few things pop out: - Wow, this thing was made entirely in Vani…

Yeah; A real "Hello world" quantum program is randomly printing 0 or 1 without any pseudo-random generator. At the most fundamental level, the quantum-bit can be in many states, but when measured will "jump" to either 0 or 1.

In that website's playground (https://quantumjavascript.app/playground.html), just write:

   H
And you'll get 50% 0 and 50% 1.

Now, /why/ does it jump when measured? We don't know, but physicists have many cool theories.

One of which is that it doesn't really jump, but just that there are many universes created and one shows a 0 and another one shows a 1 (Called the Many-worlds interpretation). As weird as it sounds, it seems like the most promising explanation. There are other theories but they all need to add hacks to make the maths work.

Re: Show HN: Quantum JavaScript

#13

Post by stewdio »

gavinray wrote: post #11

This site has such a pleasant UI, and the text output formatting is so beautiful and meticulous. It seems like a lot of small details at work here too, like the micro-UX with hover effects on a lot of these elements. Quantum anything is over my head, so I have no idea what I'm looking at, but it's really pretty at least. --- Looking through the source, a few things pop out: - Wow, this thing was made entirely in Vani…

Wow—I didn’t even recognize my own code there with all the whitespace changed and semicolons inserted ;)

And yes—not having any dependencies or anything to install was one of my goals to help anyone get up and running with minimal fuss. I have more to say about that here: https://quantumjavascript.app/contributing.html#JavaScript_s...

You’re asking a really good question—I should probably write page on this to make it more clear; it definitely was NOT clear to me at first either! The short answer is “no.” What you’re seeing there is the Q.Circuit.prototype.try$ function which forces a circuit to choose one of its probable outcomes. I mostly added this in so users could write a simple coin-flip demo and get an actual heads or tails result—you know; feel good about making their first superposition and then collapsing it to a conclusion: Q`H`.try$() ? 'tails' : 'heads'

But it’s the management and redistribution of probabilities during the course of a circuit’s operation that is the real quantum magic—not choosing a series of random outcomes. In fact if you search the entire repo for “Math.random” you’ll see that this try$ function is the only “semi-meaningful” use of randomness. (The other calls to Math.random are either part of some included THREE.js bits for the Bloch Sphere visualizer, or for randomly tilting the click-and-draggable gate tiles in circuit palettes, or for choosing random color + animal names. Yes... Random color + animal names!) Q.getRandomName$()

The way we manage probabilities in a simulator is by representing qubits as a pair of numbers. This should give you a better idea of how that works—and what “superposition” means in this context: https://quantumjavascript.app/Q-Qubit.html

But the weirdest part for me to wrap my head around was that there is no answer until you’ve computed the ENTIRE answer. In a regular computer you can ask what the value of a particular bit is at anytime and that doesn’t effect any other piece of the circuit. But with quantum simulation like this you are mixing all of the ingredients together and it is impossible to pull one out, point to it and say “this particular qubit has this particular value!” Instead you can only know the total state of the system.

You’ve given me a lot to think about in terms of adding more content to Q :)

I need another coffee now...

Re: Show HN: Quantum JavaScript

#16

Post by drdeca »

This is cool! However, is there a way to control an operation using more than 1 input?

Like, can I say negate index 1 insofar as both index 2 and index 3 are on?

I tried adding two identity things and an x thing, and selecting the 3 of them, but the "c" button wasn't enabled when I did that.

Uh, that is still unitary, right?

Ok, yeah, it still permutes the 8 pure states, and permutation matrices are orthogonal, and therefore unitary, matrices.

edit: Oh, I see, in the https://quantumjavascript.app/Q-Gate.html page it says that that gate (apparently called the "toffoli gate" or the CCNOT gate) is "coming soon".

So, it will be added, but hasn't been quite yet.

Re: Show HN: Quantum JavaScript

#17

Post by exdsq »

Oh dear god no!

I'm in a split mind here - I'm really impressed with OPs work here, and horrified that someone is trying to drag JavaScript into the next era of computers.

Re: Show HN: Quantum JavaScript

#18

Post by stewdio »

drdeca wrote: post #16

This is cool! However, is there a way to control an operation using more than 1 input? Like, can I say negate index 1 insofar as both index 2 and index 3 are on? I tried adding two identity things and an x thing, and selecting the 3 of them, but the "c" button wasn't enabled when I did that. Uh, that is still unitary, right? Ok, yeah, it still permutes the 8 pure states, and permutation matrices are orthogonal, and t…

Good question! There’s a subtle underlying issue I need to address in order to get those working correctly: https://github.com/stewdio/q.js/issues/18

I have an idea of how to solve it while still keeping gate creation simple—I just need to find some downtime to investigate further :)

Re: Show HN: Quantum JavaScript

#20

Post by stared »

Thanks for sharing!

If you need some visualization going beyond ASCII characters, I co-developed bra-ket-vue, a quantum state & matrix visualizer in Vue.js. A working demo here:

https://codesandbox.io/s/bra-ket-vue-cydtt?file=/src/compone...

It uses a different engine https://github.com/Quantum-Game/quantum-tensors, supporting arbitrary quantum states, not only qubits.

Post reply on HN