Skip to content

⟨𝜑|𝜓⟩.vue - a Vue-based visualization of quantum states and operations

License

Notifications You must be signed in to change notification settings

Quantum-Flytrap/bra-ket-vue

Repository files navigation

bra-ket-vue / ⟨𝜑|𝜓⟩.vue

npm version License Build Twitter @QuantumFlytrap

An interactive visualizer for quantum states and matrices.

For more details, see our preprint:

Unitary Fund

Examples

Here are examples in the dark style. All components are available in two styles: dark and bright. By default we use the dark style. Each vector is a Vector object from Quantum Tensors, and each operator is an Operator object.

States (vectors)

Ket list for quantum computing

Ket list for quantum optics

<ket-viewer :vector="vector" :dark-mode="true" />

Ket

Operators (matrices)

<matrix-viewer :operator="operator" :dark-mode="true" />

Matrix - beam-splitter

Matrix - CNOT gate

Matrix - Toffoli gate

Installation

For a node project use:

npm install bra-ket-vue

or for yarn:

yarn add bra-ket-vue

For browser HTML files, put in <head>...</head>:

<script src="https://www.unpkg.com/vue@3"></script>
<script src="https://unpkg.com/quantum-tensors"></script>
<script src="https://unpkg.com/bra-ket-vue"></script>

Or if you want to stick to specific versions

<script src="https://www.unpkg.com/vue@3.2.31/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/quantum-tensors@0.4.15/dist/quantum-tensors.min.js"></script>
<script src="https://unpkg.com/bra-ket-vue@0.4.3/dist/bra-ket-vue.min.js"></script>

Note: up to 0.3.1 it used Vue 2. Starting from 0.4.0, BraKetVue uses Vue 3.

Code examples

Folder examples contains two examples: a plain HTML file and a Vue 3 project.

And interactive version of the Vue 3 demo: https://codesandbox.io/s/braketvue-f2rgub.

The easiest one to create a single visualization is to use JSFiddle (see this example) and embed it.

Notes

This repo was created using a script vue-sfc-rollup (a Vue component library generator, for JavaScript and TypeScript).

Citing

@article{migdal_visualizing_2022,
	title = {Visualizing quantum mechanics in an interactive simulation -- {Virtual} {Lab} by {Quantum} {Flytrap}},
	url = {http://arxiv.org/abs/2203.13300},
	journal = {arXiv:2203.13300 [quant-ph]},
	author = {Migdał, Piotr and Jankiewicz, Klementyna and Grabarz, Paweł and Decaroli, Chiara and Cochin, Philippe},
	month = mar,
	year = {2022},
	note = {arXiv: 2203.13300}
}