Upon each completion of the song, a list of keyboard engagements will be displayed under “Receipt.” This includes both the activations scripted for the animation as well as your own keystrokes and pointer interactions. (You are part of the artwork.) Here is some sample output:
. . . . . . <OPTION> <OPTION> . . . <OPTION> <OPTION> . . . <OPTION> <OPTION> . . . <OPTION> <OPTION> . . . <OPTION> <OPTION> . . . <OPTION> <OPTION> . . . <OPTION> <OPTION> . . . <OPTION> <OPTION> . . . w h a t w i l l g r o w c r o o k e d y o u c a n t m a k e s t r a i g h t i t s t h e p r i c e t h a t y o u g o t t a p a y <OPTION> <OPTION> . . . d o y o u r s e l f a f a v o u r a n d p a c k y o u r b a g s b u y a t i c k e t a n d g e t o n t h e t r a i n <OPTION> <OPTION> . . b u y a t i c k e t a n d g e t o n t h e t a r s d f t g y h u j i k o 5 l p 6 7 8
9 0 t ⌫ y u i o p 5 6 7 8 9 0 ⌫ t y u i o p 5 6 7 8 9 0 t ⌫ y u i o p 5 6 7 8 9 0 ⌫ t y u i o p a s d f g h j k l
n <OPTION> µ . <SHIFT> <OPTION> . . . <OPTION> <OPTION> . . . F U C K E D P U <OPTION> <OPTION> . . . <OPTION> <OPTION> . . . F U C K E D P U <OPTION> <OPTION> . . . <OPTION> <OPTION> . . . <SHIFT> P e o p l e g e t c r u s h e d l i k e b i s c u i t c r u m b s a n d l a i d d o w n i n t h e b i t u m e n <OPTION> <OPTION> . . . <SHIFT> Y o u h a v e t r i e d y o u r b e s t t o p l e a s e e v e r y o n e <SHIFT> B u t i t j u s t i s n t h a p p e n i n g <OPTION> <OPTION> . . <SHIFT> N o i t j u s t i s n t h a p e n i n g <OPTION> <OPTION> . . . <OPTION> <OPTION> . . . F U C K . E D P . . U . . . <OPTION> <OPTION> . . . <OPTION> <OPTION> . . . F U C K . E D P . . U . . . <OPTION> <OPTION> . . . <OPTION> <OPTION> . . . . . . . . . <OPTION> <OPTION> . . . <OPTION> <OPTION> . . . O B V I O U S <OPTION> <OPTION> . . . <OPTION> <OPTION> . . . n o i t i s n t b u t i t i s n t b u t i t i s n t
This is a fan-made music video for Thom Yorke’s “Black Swan” (2006). This birthday well-wishing is composed of #HTML #CSS #JavaScript for fellow October chaps Thom and Stanley Donwood whom I’ve never met, but have long enjoyed their work. (With a bit of Saul Bass inspiration sprinkled on.) It’s best viewed on a laptop / desktop; may melt phones.
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.)
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 :)
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/.
I like TypeScript and stuff (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.
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 :)
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.
