
Show HN: Quantum JavaScript - stewdio
https://quantumjavascript.app
======
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 <= index;
          });
    

Is this how quantum works "under the hood" so to speak?

~~~
d0m
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](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.

~~~
autonoshitbox
This comment is being taken way too seriously.

------
stewdio
I entirely forgot to mention that TODAY is Q.js’ first birthday. And here’s a
write-up of how I got started with it:

[https://medium.com/@stew_rtsmith/quantum-
javascript-d1effb84...](https://medium.com/@stew_rtsmith/quantum-
javascript-d1effb84a619)

------
darepublic
I can't help but chuckle when I think about what the js haters would say about
this.. You can't even escape js on the quantum level

~~~
coolspot
The actual quantum level physics itself is probably running in some nodejs
process started by forgotten continuous integration server at someone’s home
lab.

It is all javascript all the way down.

------
AlexCoventry
This is great. I was just thinking today, I don't yet have enough uncertainty
about the javascript I have to interact with, and I should add some more,
programmatically.

~~~
rrishi
Hillarious! Had me in splits.

------
tenaciousDaniel
This looks really cool, though it goes way over my head. Is there an ELI5
somewhere that explains what this is?

~~~
stewdio
I’ve begun to put together useful resources for learning more here:
[https://quantumjavascript.app/resources.html](https://quantumjavascript.app/resources.html)

I’d like to really flesh out that page; I’ve now come across so many folks
that are amazing at explaining this stuff... It’s just a time crunch to juggle
all this as you might imagine ;)

These two videos in particular helped me get started:

1\. What is a physical quantum computer?
[https://www.youtube.com/watch?v=OWJCfOvochA](https://www.youtube.com/watch?v=OWJCfOvochA)

2\. How might one compute using it?
[https://www.youtube.com/watch?v=F_Riqjdh2oM](https://www.youtube.com/watch?v=F_Riqjdh2oM)

------
hmwhy
I just want to echo what everyone has already said that this is indeed very
cool in many aspects.

The API documentation is what really jumps out to me: it's an absolute joy to
read, and makes me feel that the developer actually respects me as a potential
user. Thank you!

~~~
stewdio
Thank you for the kind words. As I’m writing it I just keep thinking “How
would I want to be taught this?” As another parallel rule of thumb I pretend
that I’m writing to someone who is smarter than I’ll ever be but,

1\. Doesn’t know anything about this particular subject yet.

2\. Is probably very tired from whatever it is they’ve been doing. (Day job,
raising kids, just general anxiety keeping them awake all night, etc.)

3\. Might be drunk.

So I try to be plain in my language choices, calming when facing something
with an aura of complexity (eg. “this thing that you heard is complex is
really just a fancy name for these two simple elements combined”), consistent,
and to present actual examples instead of everything just being an
impenetrable brick of text.

(And then occasionally I break all my rules by throwing in hyperlinks to
random tangents / hiding Missy Elliott lyrics in the code / whatevs.)

------
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](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.

~~~
stewdio
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](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 :)

------
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...](https://codesandbox.io/s/bra-ket-vue-
cydtt?file=/src/components/QuantumCircuits.vue)

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

~~~
stewdio
Woa—this is really beautiful! I need to give this some serious thought since
I’ve gone heavy on the idea of not having dependencies, not using modules, not
requiring Node, etc. You’ve definitely given me something to mull over here.
Well done :)

For reference, here’s some of my original reasoning:
[https://quantumjavascript.app/contributing.html#JavaScript_s...](https://quantumjavascript.app/contributing.html#JavaScript_style)

~~~
stared
Not requiring external libraries is by large a good thing. I am not sure if I
agree with other parts, though. Personally, I consider ES6 a huge improvement
when it comes to code clarity and readability. It makes it easier to write,
and less error-prone. Right now it is supported by major browsers, desktop and
mobile: [https://kangax.github.io/compat-
table/es6/](https://kangax.github.io/compat-table/es6/). I like TypeScript and
stuff ([https://p.migdal.pl/2020/03/02/types-tests-
typescript.html](https://p.migdal.pl/2020/03/02/types-tests-typescript.html)),
but I appreciate the no-Node philosophy (especially in the case of no
dependencies).

If you want to continue developing it, I can connect you with Unitary Fund and
Quantum Open Software Foundation.

...

Side note: I really appreciate the music notes analogy.

------
egfx
I've never been as confused by an onsite demo in my life but it looks Very
interesting!

------
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.

------
qubots
Thanks for sharing, this is very cool! Is there a way to add a second CNOT
gate in the circuit by just dragging and dropping the pieces?

~~~
stewdio
Certainly :) You can add as many CNOT gates as you’d like.

There are a few ways to do this in code, so you can pick the style that feels
right for you / your particular case:
[https://quantumjavascript.app/#Quantum_JavaScript](https://quantumjavascript.app/#Quantum_JavaScript)

But it’s also easy to make CNOTs in the visual editor. Here’s an animated GIF
demonstrating it:
[https://quantumjavascript.app/tutorials.html#Create_controll...](https://quantumjavascript.app/tutorials.html#Create_controlled_gates)

And for further clarity, here’s a description of the relevant steps in that
animated GIF: 1\. Drag an Identity gate (the circle) onto your circuit board.
2\. Drag a Pauli X gate (the X) onto the same moment (column) of your circuit
board. 3\. Select both (by tapping on them). 4\. Tap on the "C" button to join
them into a controlled gate.

------
ngz00
Coolest thing I've ever seen

------
liamcardenas
The parts are simultaneously both good and bad

