-
Notifications
You must be signed in to change notification settings - Fork 28
/
index.html
692 lines (604 loc) · 26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
<!DOCTYPE html>
<html>
<head>
<title>Quantum JavaScript (Q.js)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Quantum computing in your browser.">
<meta name="copyright" content="Stewart Smith 2019–2020">
<meta name="keywords" content="
Q, Q.js, Q-js, Qjs, quantum JavaScript,
quantum, quantum physics, quantum mechanics, superposition,
quantum computer, quantum computer programming, quantum computing, QC,
quantum simulator, quantum computer simulator,
qubit, qbit, gate, Hadamard, Bloch, Bloch Sphere,
Web, Web site, website, Web browser, browser, HTML, HTML5, JavaScript, ES6, CSS,
Chrome, Firefox, Safari, Opera, Brave, Edge, WebKit, Blink, Gecko, Mozilla,
Stewart Smith, Stewart, Stew, Stuart, Steven, Steve, Stewdio, stewartsmith, stew_rtsmith, @stew_rtsmith,
Moar, Moar Technologies Corp, MTC,
Google, IBM, Microsoft, Amazon, NASA, DWave, D-Wave,
Quil, OpenQASM,
ProjectQ, Qiskit,
Quantum Development Kit, Cirq, Strawberry Fields, t|ket>,
QCL, Quantum pseudocode, Q#, Q|SI>, Q language, qGCL, QFC, QML, LIQUi|>, Quipper,
Stanford CS 269 Q: Quantum Computer Programming">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@stew_rtsmith">
<meta name="twitter:creator" content="@stew_rtsmith">
<meta name="twitter:title" content="Quantum JavaScript (Q.js)">
<meta name="twitter:description" content="Quantum computing in your browser.">
<meta name="twitter:image" content="https://quantumjavascript.app/assets/Q-website-preview.jpg">
<meta property="og:type" content="website">
<meta property="og:title" content="Quantum JavaScript (Q.js)">
<meta property="og:description" content="Quantum computing in your browser.">
<meta property="og:image" content="https://quantumjavascript.app/assets/Q-website-preview.jpg">
<meta property="og:url" content="https://quantumjavascript.app/">
<link rel="canonical" href="https://quantumjavascript.app/">
<link href="assets/Q-favicon-064.png" rel="icon" type="image/png">
<link href="assets/Q-favicon-144.png" rel="apple-touch-icon">
<link rel="stylesheet" href="Q/Q.css">
<link rel="stylesheet" href="Q/Q-Circuit-Editor.css">
<link rel="stylesheet" href="assets/documentation.css">
<script src="https://www.googletagmanager.com/gtag/js" async></script>
<script src="assets/ga.js"></script>
<script src="Q/Q.js"></script>
<script src="Q/Q-ComplexNumber.js"></script>
<script src="Q/Q-Matrix.js"></script>
<script src="Q/Q-Qubit.js"></script>
<script src="Q/Q-Gate.js"></script>
<script src="Q/Q-History.js"></script>
<script src="Q/Q-Circuit.js"></script>
<script src="Q/Q-Circuit-Editor.js"></script>
<script src="assets/navigation.js"></script>
</head>
<body>
<main class="home">
<header>
<img
src="assets/Q-quantum-javascript.svg"
title="Quantum JavaScript (Q.js)"
alt="Quantum JavaScript (Q.js)">
</header>
<!-- <h3>Quantum, made easy</h3> -->
<p>
Q is a quantum circuit simulator,
drag-and-drop circuit editor,
and powerful JavaScript library
that runs right here in your
<a href="https://en.wikipedia.org/wiki/Web_browser" target="_blank">web browser</a>.
There’s nothing to install and nothing to configure,
so jump right in and experiment.
(Q recently celebrated our one-year anniversary.
You can read the corresponding
<a href="https://medium.com/@stew_rtsmith/quantum-javascript-d1effb84a619" target="_blank">post on Medium</a>,
the
<a href="https://news.ycombinator.com/item?id=23031408" target="_blank">discussion on Hacker News</a>,
and the
<a href="https://www.reddit.com/r/QuantumComputing/comments/garfdd/quantum_javascript/" target="_blank">thread on Reddit</a>.)
</p>
<p>
Here’s your first quantum circuit—a
<a href="https://en.wikipedia.org/wiki/Bell_state" target="_blank">Bell state</a>.
It uses
<a href="https://en.wikipedia.org/wiki/Quantum_superposition" target="_blank">superposition</a>
and <a href="https://en.wikipedia.org/wiki/Quantum_entanglement" target="_blank">entanglement</a>
to calculate.
(<a href="tutorials.html#Create_controlled_gates">And here’s how to make one yourself.</a>)
Tap and drag the tiles around to get a feel for the Q editor.
It’s easy to use on both desktop and mobile devices.
Made a mistake? Just tap the Undo button.
</p>
<br>
<div class="Q-circuit-palette"></div>
<div id="example"></div>
<h4>Live probability results</h4>
<p>
Edit the code above
and watch the probability results update in realtime.
</p>
<pre><samp id="example-report" for="example"></samp></pre>
<h3>Free and open-source</h3>
<p>
Q is free to use,
our code is open-source,
and our API is heavily documented.
Still a quantum novice?
Each page of API documentation includes
simple explanations
of basic quantum concepts
to get you up to speed quickly.
This makes Q ideal for the classroom
as well as autodidacts at home.
Q just might be the most accessible quantum circuit suite in the world.
Join our project on GitHub at
<a href="https://github.com/stewdio/q.js" target="_blank">https://github.com/stewdio/q.js</a>
and drop a link to Q’s website
<a href="https://quantumjavascript.app/">https://quantumjavascript.app</a>
on social media with the hashtag
<a href="https://twitter.com/search?q=%23Qjs" target="_blank">#Qjs</a>.
Let’s make quantum computing accessible!
</p>
<hr>
<h3>Quantum JavaScript</h3>
<p>
What does coding a quantum circuit look like?
Let’s recreate the above
<a href="https://en.wikipedia.org/wiki/Bell_state" target="_blank">Bell state</a> using
<strong>three separate
circuit authoring styles</strong>
to demonstrate Q’s flexibility.
For each of the three examples
we’ll create a circuit that uses 2 qubit registers for 2 moments of time.
We’ll place a <a href="Q-Gate.html#.HADAMARD">Hadamard</a>
gate at moment 1 on register 1.
Then we’ll place a <a href="Q-Gate.html#.PAULI_X">Controlled-Not</a> gate at moment 2,
with its control component on register 1
and its target component on register 2.
</p>
<h5 id="text-as-input">1. Text as input</h5>
<p>
Q’s <a href="Q-Circuit.html#.fromText">text-as-input</a> feature
directly converts your text into a
functioning quantum circuit.
Just type your operations out as if creating a text-only circuit diagram
(using “I” for
<a href="Q-Gate.html#.IDENTITY">identity gates</a>
in the spots where no operations occur)
and enclose your text block in
<a href="https://en.wikipedia.org/wiki/Grave_accent" targt="_blank">backticks</a>
(instead of quotation marks).
Note that parentheses are not required to invoke the function call
when using backticks.
</p>
<pre><code>
<a href="Q.html">Q</a>`
H X#0
I X#1
`
</code></pre>
<h5 id="python-inspired">2. Python-inspired</h5>
<p>
Folks coming to Q from Python-based quantum suites
may find this syntax more familiar.
Here the <code><a href="Q.html">Q</a></code> function expects
the number of qubit registers to use,
followed by the number of moments to use.
Afterward,
each single-letter quantum gate label is also a function name.
For these functions
the first argument is a moment index
and the second is a qubit register index or array of qubit register indices.
</p>
<pre><code>
<a href="Q.html">Q</a>( 2, 2 )
.h( 1, 1 )
.x( 2, [ 1, 2 ])
</code></pre>
<h5 id="verbose-for-clarity">3. Verbose for clarity</h5>
<p>
Under the hood, Q is making more verbose declarations.
You can also make direct declarations like so.
(And <a href="contributing.html#Destructive_vs_non-destructive_methods">what are those dollar signs about?</a>)
</p>
<pre><code>
new <a href="Q.html">Q</a>.<a href="Q-Circuit.html">Circuit</a>( 2, 2 )
.<a href="Q-Circuit.html#.set$">set$</a>( <a href="Q.html">Q</a>.<a href="Q-Gate.html">Gate</a>.<a href="Q-Gate.html#.HADAMARD">HADAMARD</a>, 1, 1 )
.<a href="Q-Circuit.html#.set$">set$</a>( <a href="Q.html">Q</a>.<a href="Q-Gate.html">Gate</a>.<a href="Q-Gate.html#.PAULI_X">PAULI_X</a>, 2, [ 1, 2 ])
</code></pre>
<h5>More variations</h5>
<p>
There are many ways to build a quantum circuit with Q.
What feels right for you?
To learn more about
<a href="Q-Circuit.html#.fromText">Q’s text syntax</a>
and other convenience tricks,
see <a href="Q-Circuit.html#Writing_quantum_circuits">“Writing quantum circuits.”</a>
</p>
<h4>Clear, legible output</h4>
<p>
Whether you use Q’s drag-and-drop circuit editor interface,
<a href="Q-Circuit.html#.fromText">text syntax</a>,
Python-inspired syntax,
or prefer to type out every <a href="Q-Circuit.html#.set$">set$</a> command yourself,
Q makes inspecting and evaluating your circuits easy.
</p>
<p>
Let’s add two commands which could directly follow any
of the three examples above.
Hey—deciding what to name a circuit
can sometimes be difficult,
so we’ll let Q choose a random name for us.
Then we’ll generate
an outcome probabilities report.
Just add the following two lines
to any of the above examples:
</p>
<pre><code>
.<a href="Q-Circuit.html#.setName$">setName$</a>( <a href="Q.html">Q</a>.<a href="Q.html#.getRandomName$">getRandomName$</a> )
.<a href="Q-Circuit.html#.evaluate$">evaluate$</a>()
</code></pre>
<p>
And that combination will yield
something like the following:
</p>
<pre><samp>
Beginning evaluation for “<span class="circuit-name-random">Example</span>”
m1 m2
┌───┐╭─────╮
r1 |0⟩─┤ H ├┤ X#0 │
└───┘╰──┬──╯
╭──┴──╮
r2 |0⟩───○──┤ X#1 │
╰─────╯
██████████░░░░░░░░░░ 50% 1 of 2
████████████████████ 100% 2 of 2
Evaluation completed for “<span class="circuit-name-random">Example</span>”
with these results:
1 |00⟩ ██████████░░░░░░░░░░ 50% chance
2 |01⟩ ░░░░░░░░░░░░░░░░░░░░ 0% chance
3 |10⟩ ░░░░░░░░░░░░░░░░░░░░ 0% chance
4 |11⟩ ██████████░░░░░░░░░░ 50% chance
</samp></pre>
<hr>
<h3>Open your JavaScript console</h3>
<p>
You don’t have to know a thing about quantum physics
or JavaScript
to launch your first qubit into
<a href="https://en.wikipedia.org/wiki/Quantum_superposition" target="_blank">superposition</a>.
If you’re on a desktop or laptop then
everything you need is already right here in front of you.
First, you must open your browser’s JavaScript console.
(It’s a text window for sending JavaScript commands to your browser
and receiving responses from your browser in return.
You text your computer, it texts back.)
</p>
<p>
This handy chart shows you what key commands will
open your JavaScript console.
Are you on a Mac or a Windows machine?
What web browser are you using?
(If you’re on Linux, join this project on
<a href="https://github.com/stewdio/q.js" target="_blank">GitHub</a>.)
</p>
<table id="console-open-commands">
<tr>
<td class="no-highlight"> </td>
<td>
<svg viewBox="0 0 600 600">
<path d="M447.372,316.885c0.759,81.719,71.689,108.913,72.475,109.26c-0.6,1.918-11.333,38.754-37.369,76.803
c-22.507,32.896-45.866,65.671-82.664,66.349c-36.157,0.666-47.784-21.441-89.122-21.441c-41.326,0-54.243,20.763-88.471,22.108
c-35.519,1.344-62.567-35.572-85.261-68.347c-46.372-67.042-81.811-189.446-34.226-272.071
c23.639-41.032,65.884-67.015,111.736-67.681c34.879-0.665,67.8,23.465,89.122,23.465c21.308,0,61.315-29.019,103.373-24.757
c17.607,0.733,67.029,7.112,98.765,53.565C503.173,215.723,446.759,248.565,447.372,316.885 M379.418,116.219
C398.276,93.393,410.968,61.617,407.505,30c-27.181,1.092-60.05,18.113-79.547,40.927c-17.473,20.202-32.775,52.538-28.646,83.529
C329.609,156.8,360.56,139.06,379.418,116.219"/>
</svg>
<a target="_blank" href="https://www.apple.com/macos">macOS</a>
</td>
<td>
<svg viewBox="0 0 600 600">
<path id="path5" d="M282.44,122.961C358.005,111.398,433.715,100.507,509.424,90c0.048,66.354,0,132.659,0.048,199.013
c-75.661,0.288-151.323,1.439-227.032,1.679C282.392,234.75,282.392,178.855,282.44,122.961L282.44,122.961z"/>
<path id="path7" d="M90.528,149.733c56.902-8.78,114.044-16.361,171.186-23.509c0.048,55.031,0.048,110.014,0.096,165.045
c-57.094-0.048-114.188,0.816-171.282,0.672V149.733L90.528,149.733z"/>
<path id="path29" d="M90.528,309.26c57.046-0.192,114.092,0.72,171.138,0.624c0,55.175,0.144,110.35,0.048,165.524
c-56.998-8.444-114.092-15.833-171.186-23.557V309.26z"/>
<path id="path31" d="M282.104,311.467c75.805,0,151.563,0,227.32,0c0.096,66.162,0,132.323,0,198.533
c-75.565-11.323-151.275-21.83-226.984-32.097C282.344,422.44,282.2,366.977,282.104,311.467z"/>
</svg>
<a target="_blank" href="https://www.microsoft.com/en-us/windows">Windows</a>
</td>
</tr>
<tr>
<td>
<svg viewBox="0 0 600 600">
<path d="M550.452,211.144c-11.746-27.366-35.573-56.914-54.231-66.254c13.308,24.956,22.543,51.757,27.377,79.451l0.049,0.439
c-30.565-73.784-82.396-103.534-124.728-168.316c-2.141-3.276-4.283-6.558-6.368-10.023c-1.193-1.979-2.148-3.762-2.978-5.403
c-1.756-3.292-3.109-6.771-4.032-10.367c0.003-0.344-0.262-0.634-0.614-0.675c-0.167-0.044-0.343-0.044-0.509,0
c-0.035,0-0.091,0.061-0.133,0.074c-0.042,0.013-0.133,0.074-0.195,0.101l0.105-0.176
c-67.902,38.496-90.941,109.761-93.061,145.407c3.153-0.209,6.292-0.466,9.5-0.466c49.047,0.087,94.271,25.659,118.451,66.977
c-19.015-12.753-42.244-18.214-65.182-15.324c97.232,47.046,71.132,209.176-63.606,203.057
c-11.998-0.477-23.855-2.692-35.175-6.571c-2.646-0.964-5.292-2.013-7.938-3.147c-1.528-0.669-3.055-1.351-4.562-2.107
c-32.985-16.52-60.272-47.749-63.675-85.664c0,0,12.478-45.027,89.351-45.027c8.307,0,32.064-22.456,32.511-28.967
c-0.105-2.127-47.151-20.254-65.496-37.753c-9.8-9.354-14.452-13.865-18.575-17.242c-2.228-1.827-4.556-3.536-6.975-5.119
c-6.16-20.876-6.422-42.97-0.76-63.978c-24.936,11.697-47.094,28.278-65.07,48.694h-0.126
c-10.714-13.149-9.96-56.508-9.347-65.565c-3.169,1.233-6.195,2.789-9.026,4.64c-9.458,6.536-18.3,13.87-26.422,21.916
c-9.255,9.086-17.708,18.906-25.271,29.358v-0.007c-17.38,23.858-29.708,50.813-36.27,79.309l-0.363,1.729
c-0.509,2.303-2.344,13.838-2.657,16.344c0,0.196-0.042,0.378-0.063,0.574c-2.366,11.909-3.833,23.969-4.387,36.085v1.351
c0.131,144.57,121.275,261.665,270.583,261.538c131.489-0.111,243.827-91.81,266.176-217.274c0.453-3.377,0.823-6.72,1.228-10.131
C573.555,298.073,567.527,252.872,550.452,211.144z"/>
</svg>
<a target="_blank" href="https://www.mozilla.org/firefox/">Firefox</a>
</td>
<td>
<span class="key">⌥</span><span class="key">⌘</span><span class="key">K</span><br>
<small>
Option
Command
<strong>K</strong>
</small>
</td>
<td>
<span class="key">⌃</span><span class="key">⇧</span><span class="key">K</span><br>
<small>
Control
Shift
<strong>K</strong>
</small>
</td>
</tr>
<tr>
<td>
<svg viewBox="0 0 600 600" >
<circle fill="none" cx="300" cy="300" r="270"/>
<path d="M75.169,150.445C123.564,77.836,206.196,30,300,30c98.44,0,184.576,52.682,231.753,131.39L300,160
c-76.317,0-138.372,61.065-139.969,136.999L75.169,150.445z"/>
<circle fill="none" cx="300" cy="300" r="270"/>
<path d="M282.897,569.487C195.819,563.88,113.075,516.237,66.173,435c-49.22-85.252-46.665-186.189-2.09-266.399L178.756,370
c38.159,66.092,122.07,89.301,188.629,52.717L282.897,569.487z"/>
<circle fill="none" cx="300" cy="300" r="270"/>
<path d="M541.934,180.068c38.684,78.216,38.795,173.695-8.107,254.932c-49.22,85.252-137.912,133.507-229.663,135.009L421.244,370
c38.159-66.092,16.302-150.366-48.66-189.716L541.934,180.068z"/>
<circle display="inline" cx="300" cy="300" r="120"/>
</svg>
<a target="_blank" href="https://www.google.com/chrome/">Chrome</a>
</td>
<td>
<span class="key">⌥</span><span class="key">⌘</span><span class="key">J</span><br>
<small>
Option
Command
<strong>J</strong>
</small>
</td>
<td>
<span class="key">⌃</span><span class="key">⇧</span><span class="key">I</span><br>
<small>
Control
Shift
<strong>I</strong>
</small>
</td>
</tr>
<tr>
<td>
<svg viewBox="0 0 600 600">
<path d="M517.353,431.841c-7.198,3.765-14.622,7.082-22.228,9.933c-24.212,9.059-49.86,13.675-75.712,13.624
c-99.796,0-186.727-68.647-186.727-156.738c0.26-24.059,13.517-46.094,34.65-57.596c-90.263,3.796-113.462,97.856-113.462,152.963
c0,155.81,143.599,171.606,174.537,171.606c16.682,0,41.842-4.851,56.942-9.617l2.763-0.928
C446.223,535,495.76,495.728,528.573,443.735c2.497-3.934,1.332-9.146-2.602-11.643
C523.362,430.436,520.055,430.339,517.353,431.841z"/>
<path d="M253.017,539.144c-18.811-11.675-35.112-26.973-47.958-45.005c-55.429-75.941-38.8-182.438,37.141-237.866
c7.925-5.784,16.335-10.873,25.137-15.208c6.58-3.1,17.821-8.71,32.773-8.436c21.355,0.155,41.406,10.302,54.179,27.416
c8.516,11.371,13.212,25.148,13.413,39.353c0-0.443,51.585-167.873-168.717-167.873c-92.583,0-168.716,87.859-168.716,164.941
c-0.365,40.776,8.359,81.12,25.539,118.102c58.118,124.003,199.88,184.84,329.799,141.532
c-44.476,14.023-92.863,7.857-132.4-16.872L253.017,539.144z"/>
<path d="M351.294,343.939c-1.708,2.214-6.96,5.272-6.96,11.937c0,5.504,3.585,10.798,9.954,15.248
c30.327,21.09,87.501,18.306,87.648,18.306c22.471-0.054,44.517-6.135,63.838-17.61c39.66-23.158,64.081-65.596,64.176-111.522
c0.548-47.262-16.872-78.685-23.916-92.604C501.346,80.278,404.883,30,299.983,30C152.366,29.985,32.113,148.548,30.037,296.15
c1.012-77.061,77.61-139.297,168.717-139.297c7.381,0,49.476,0.717,88.576,21.237c34.46,18.095,52.513,39.944,65.061,61.603
c13.033,22.503,15.353,50.931,15.353,62.256C367.744,313.275,361.965,330.062,351.294,343.939z"/>
</svg>
<a target="_blank" href="https://www.microsoft.com/en-us/edge">Edge</a>
</td>
<td>
<span class="key">⌥</span><span class="key">⌘</span><span class="key">J</span><br>
<small>
Option
Command
<strong>J</strong>
</small>
</td>
<td><span class="key"><small>F12</small></span></td>
</tr>
<tr>
<td>
<svg viewBox="0 0 600 600">
<path d="M300,30C150.883,30,30,150.883,30,300s120.883,270,270,270s270-120.883,270-270S449.117,30,300,30z M330.797,329.109
L131.672,470.648l139.852-199.758l199.125-141.539L330.797,329.109z"/>
</svg>
<a target="_blank" href="https://www.apple.com/safari/">Safari</a>
</td>
<td>
<span class="key">⌥</span><span class="key">⌘</span><span class="key">C</span><br>
<small>
Option
Command
<strong>C</strong>
</small>
</td>
<td class="na">×</td>
</tr>
</table>
<p>
Now that your JavaScript console is open,
copy and paste the following line into it:
(Note that those are backticks on either side of the H, rather than single quotation marks.)
</p>
<pre><code>
<a href="Q.html">Q</a>`H`.<a href="Q-Circuit.html#.prototype.try$">try$</a>() ? 'tails' : 'heads'
</code></pre>
<p>
Did you try it?
You just performed a quantum coin flip!
Each time you run the above code
there’s a 50% chance of landing on
<strong>heads</strong> (<code>0</code>)
and a 50% chance of landing on
<strong>tails</strong> (<code>1</code>).
Try it a few more times to see how random it feels.
(Just tap your “up” arrow key in the JavaScript console
to recall the last command you entered without having to type it or paste it again.)
When you’re ready for more,
give
<a href="Q-Circuit.html#Writing_quantum_circuits">“Writing quantum circuits”</a>
a quick read.
</p>
<hr>
<h3>Import and export</h3>
<p>
Q plays well with everyone.
Export your circuits as
<a href="Q-Circuit.html#.toText">plain text</a>,
<a href="Q-Circuit.html#.toDiagram">ASCII diagrams</a>,
<a href="Q-Circuit.html#.toDom">interactive graphic-user-interfaces</a>,
<a href="Q-Circuit.html#.toLatex">LaTeX code</a>,
<!-- <a href="Q-Circuit.html#.toAmazonBraket">Amazon Braket code</a>, -->
and more!
Visit the <a href="playground.html">Q playground</a>
to experiment with converting circuits between various formats.
As always, new features are in the works.
<a href="https://github.com/stewdio/q.js" target="_blank">Join our project on GitHub</a>
and help us build bridges to everywhere.
</p>
<hr>
<footer>
<p class="keywords">
<strong>Keywords</strong>.
Q, Q.js, Qjs,
quantum, quantum physics, quantum mechanics, superposition,
quantum computer, quantum computer programming, quantum JavaScript, quantum computing, QC,
quantum simulator, quantum computer simulator,
qubit, qbit, gate, Hadamard, Bloch, Bloch Sphere,
Web, Web site, website, Web browser, browser, HTML, HTML5, JavaScript, ES6, CSS.
</p>
</footer>
</main>
<script>
// Enable hover interactions
// for the “open JavaScript console” table.
const
elements = Array.from( document.querySelectorAll( '#console-open-commands td' )),
highlight = function( event ){
const
el = event.target,
x = el.cellIndex,
y = el.parentNode.rowIndex
if( x === 0 && y === 0 ) return
el.classList.add( 'highlighted' )
elements.forEach( function( other ){
const
otherX = other.cellIndex,
otherY = other.parentNode.rowIndex
if(( x === 0 && y === otherY ) ||
( y === 0 && x === otherX )){
other.classList.add( 'highlighted' )
}
if(
x > 0 && y > 0 && (
( otherX === x && otherY === 0 ) ||
( otherX === 0 && otherY === y )
)
){
other.classList.add( 'highlighted' )
}
})
},
unhighlight = function(){
elements.forEach( function( el ){
el.classList.remove( 'highlighted' )
})
}
elements.forEach( function( el ){
el.addEventListener( 'mouseenter', highlight )
el.addEventListener( 'touchstart', highlight )
el.addEventListener( 'mouseleave', unhighlight )
el.addEventListener( 'touchend', unhighlight )
})
/////////////////////////
// //
// Event listeners //
// //
/////////////////////////
window.addEventListener( 'Q.Circuit.evaluate began', function( event ){
console.log(
'\n\nBeginning evaluation for “'+ event.detail.circuit.name +'”\n'+
event.detail.circuit.toDiagram() +'\n\n'
)
})
window.addEventListener( 'Q.Circuit.evaluate progressed', function( event ){
const
length = 20,
percent = Math.round( event.detail.progress * 100 ),
percentText = ( ''+ percent ).padStart( 3 ) +'%',
barLength = Math.round( length * event.detail.progress ),
barComplete = ''.padStart( barLength, '█' ),
barRemaining = ''.padStart( length - barLength, '░' ),
opsTotal = event.detail.operationsTotal,
opsCompleted = ( ''+ event.detail.operationsCompleted ).padStart( Math.log( opsTotal ) * Math.LOG10E + 1 | 0, ' ' )
console.log(
barComplete +
barRemaining +' '+
percentText +' '+
opsCompleted +' of '+
opsTotal
)
// What’s the actual state of the circuit at this moment?
// We should come back and do a cool animated version of this data :)
// const state = event.detail.state
// console.log( 'state width', state.getWidth(), 'state height', state.getHeight() )
// console.log( 'state', state.toTsv() )
})
window.addEventListener( 'Q.Circuit.evaluate completed', function( event ){
const circuit = event.detail.circuit
console.log(
'\nEvaluation completed for “'+ circuit.name +'”'+
'\nwith these results:\n'+ circuit.report$() +'\n\n\n'
)
if( circuit.name !== undefined ){
const el = document.getElementById( circuit.name +'-report' )
if( el ) el.innerText = circuit.report$()
}
})
window.addEventListener( 'Q gui altered circuit', function( event ){
event.detail.circuit.evaluate$()
})
////////////////////
// //
// As per doc //
// //
////////////////////
// Exploration encouragement!
console.log( '\n\n\nYou did it! You opened your browser’s JavaScript console!!\n\n\n\n' )
console.log( '\n\n\nNow try navigating to the other topic pages to learn more and experiment with Q.\n\n\n\n' )
// Demonstrate Q’s random naming feature.
const circuitNameRandom = Q.getRandomName$()
Array
.from( document.querySelectorAll( '.circuit-name-random' ))
.forEach( function( el ){
el.innerText = circuitNameRandom
})
// Let’s go ahead and add those examples
// to the current interpreter state
// so wee can begin playing with them straight away.
var
cat = new Q.ComplexNumber( 1, 2 ),
dog = new Q.ComplexNumber( 3, -4 )
/////////////////
// //
// THE FUN //
// //
/////////////////
// Let’s place circuit palettes
// inside anything with the class 'Q-circuit-palette'.
Array
.from( document.querySelectorAll( '.Q-circuit-palette' ))
.forEach( function( el ){
Q.Circuit.Editor.createPalette( el )
})
// Create an example circuit and add it to the DOM.
// Notice everything works
// even though we didn’t even assign a variable!
Q`
I I I I I I
I H X#0 I I I
I I X#1 I I I
I I I I I I
`
.setName$( 'example' )
.toDom( 'example' )
.circuit.evaluate$()
</script>
</body>
</html>