https://github.com/quantum-flytrap/bra-ket-vue

⟨𝜑|𝜓⟩.vue - a Vue-based visualization of quantum states and operations
https://github.com/quantum-flytrap/bra-ket-vue

complex-numbers javascript ket matrices quantum quantum-game visualizer vuejs

Last synced: about 1 year ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/quantum-flytrap/bra-ket-vue
• Owner: Quantum-Flytrap
• License: mit
• Created: 2020-01-21T18:41:31.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-10-27T05:32:46.000Z (over 2 years ago)
• Last Synced: 2025-03-29T12:17:16.634Z (about 1 year ago)
• Topics: complex-numbers, javascript, ket, matrices, quantum, quantum-game, visualizer, vuejs
• Language: Vue
• Homepage: https://codesandbox.io/s/bra-ket-vue-cydtt
• Size: 4.14 MB
• Stars: 32
• Watchers: 6
• Forks: 8
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

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

[![npm version](https://badge.fury.io/js/bra-ket-vue.svg)](https://badge.fury.io/js/bra-ket-vue)

![License](https://img.shields.io/npm/l/bra-ket-vue)

![Build](https://github.com/Quantum-Flytrap/bra-ket-vue/actions/workflows/build_lint.yml/badge.svg)

[![Twitter @QuantumFlytrap](https://img.shields.io/twitter/follow/QuantumFlytrap)](https://twitter.com/QuantumFlytrap)

An interactive visualizer for quantum states and matrices.

* Developed by [Quantum Flytrap](https://quantumflytrap.com): [Piotr Migdał](https://p.migdal.pl/) (quantum physics & programming) and [Klem Jankiewicz](http://jankiewiczstudio.com/) (UX & design) from [Quantum Flytrap](https://quantumflytrap.com/).

* Based on [Quantum Tensors](https://www.npmjs.com/package/quantum-tensors) numerics library, developed at the [Centre for Quantum Technologies, National University of Singapore](https://www.quantumlah.org/).

* It is being useed in [Quantum Gamne](https://quantumgame.io) and [Virtual Lab by Quantum Flytrap](https://quantumflytrap.com/).

* Supported by the [Unitary Fund](https://unitary.fund/).

For more details, see our preprint:

- P. Migdał, K. Jankiewicz, P. Grabarz, et al., [Visualizing quantum mechanics in an interactive simulation - Virtual Lab by Quantum Flytrap](https://arxiv.org/abs/2203.13300), arXiv:2203.13300

[![Unitary Fund](https://img.shields.io/badge/Supported%20By-UNITARY%20FUND-brightgreen.svg?style=for-the-badge)](http://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](imgs/quantum_computing.png)

![Ket list for quantum optics](imgs/ket_list.png)

```{html}

```

![Ket](imgs/ket.gif)

### Operators (matrices)

```{html}

```

![Matrix - beam-splitter](imgs/beam_splitter.png)

![Matrix - CNOT gate](imgs/cnot_gate.png)

![Matrix - Toffoli gate](imgs/toffoli.gif)

## Installation

For a node project use:

```{bash}

npm install bra-ket-vue

```

or for yarn:

```{bash}

yarn add bra-ket-vue

```

For browser HTML files, put in `...`:

```{html}

```

Or if you want to stick to specific versions

```{html}

```

Note: up to 0.3.1 it used [Vue 2](https://v2.vuejs.org/). Starting from 0.4.0, BraKetVue uses [Vue 3](https://vuejs.org/).

### Code examples

Folder [examples](./examples/) contains two examples: a plain HTML file and a Vue 3 project.

And interactive version of the Vue 3 demo: .

The easiest one to create a single visualization is to use JSFiddle (see [this example](https://jsfiddle.net/stared/m8gzp4n2/)) and embed it.

* In-action:

  * Presentation with Reveal.js (RISE in Jupyter Notebook): 

  * Presentation with R Markdown Raveal.js 

  * Distill in R Markdown: 

    * [Quantum computing states and operators](https://p.migdal.pl/bra-ket-vue-art/ket.html)

    * [Classic logic operation truth tables](https://p.migdal.pl/bra-ket-vue-art/logic_operations.html)

## Notes

This repo was created using a script [vue-sfc-rollup](https://www.npmjs.com/package/vue-sfc-rollup)  (a Vue component library generator, for JavaScript and TypeScript).

## Citing

- P. Migdał, K. Jankiewicz, P. Grabarz, et al., [Visualizing quantum mechanics in an interactive simulation - Virtual Lab by Quantum Flytrap](https://arxiv.org/abs/2203.13300), arXiv:2203.13300

```

@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}

}

```