5 ms·

Show HN: Quantum JavaScript

210 points by stewdio 6y ago

tenaciousDaniel 6y ago
This looks really cool, though it goes way over my head. Is there an ELI5 somewhere that explains what this is?
- currymj 6y ago
  It simulates a simple model of a quantum computer, so that you can implement and test out quantum algorithms, albeit at potentially huge computational cost. quantum.country is a good introduction to quantum computing for people with no background other than linear algebra. Even if you don't understand linear algebra you could probably skim it and get a sense for what's going on.
- stewdio 6y ago
  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
justincredible 6y ago
I thought JS already exhibited the Uncertainty principle.
darepublic 6y ago
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 6y ago
  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.
egfx 6y ago
I've never been as confused by an onsite demo in my life but it looks Very interesting!
liamcardenas 6y ago
The parts are simultaneously both good and bad
qubots 6y ago
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 6y ago
  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_controlled_gates https://quantumjavascript.app/tutorials.html#Create_controll... 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.
gavinray 6y ago
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 6y ago
  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.
  - 6y ago
ngz00 6y ago
Coolest thing I've ever seen
stewdio 6y ago
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-d1effb84a619 https://medium.com/@stew_rtsmith/quantum-javascript-d1effb84...
drdeca 6y ago
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 6y ago
  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 :)
exdsq 6y ago
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.
gazelle21 6y ago
As others have pointed out your CSS is amazing
stared 6y ago
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/components/QuantumCircuits.vue https://codesandbox.io/s/bra-ket-vue-cydtt?file=/src/compone... 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 6y ago
  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_style https://quantumjavascript.app/contributing.html#JavaScript_s...
  - stared 6y ago
    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.
AlexCoventry 6y ago
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 6y ago
  Hillarious! Had me in splits.
hmwhy 6y ago
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 6y ago
  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.)

210 points by stewdio 6y ago

tenaciousDaniel 6y ago

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

currymj 6y ago
It simulates a simple model of a quantum computer, so that you can implement and test out quantum algorithms, albeit at potentially huge computational cost. quantum.country is a good introduction to quantum computing for people with no background other than linear algebra. Even if you don't understand linear algebra you could probably skim it and get a sense for what's going on.
stewdio 6y ago
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

justincredible 6y ago

I thought JS already exhibited the Uncertainty principle.

darepublic 6y ago

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 6y ago
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.

egfx 6y ago

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

liamcardenas 6y ago

The parts are simultaneously both good and bad

qubots 6y ago

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 6y ago
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_controlled_gates https://quantumjavascript.app/tutorials.html#Create_controll... 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.

gavinray 6y ago

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 6y ago
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.
- 6y ago

ngz00 6y ago

Coolest thing I've ever seen

stewdio 6y ago

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-d1effb84a619 https://medium.com/@stew_rtsmith/quantum-javascript-d1effb84...

drdeca 6y ago

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 6y ago
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 :)

exdsq 6y ago

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.

gazelle21 6y ago

As others have pointed out your CSS is amazing

stared 6y ago

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/components/QuantumCircuits.vue https://codesandbox.io/s/bra-ket-vue-cydtt?file=/src/compone... 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 6y ago
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_style https://quantumjavascript.app/contributing.html#JavaScript_s...
- stared 6y ago
  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.

AlexCoventry 6y ago

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 6y ago
Hillarious! Had me in splits.

hmwhy 6y ago

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 6y ago
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.)