Coder Social home page Coder Social logo

quantum-flytrap / bra-ket-vue Goto Github PK

View Code? Open in Web Editor NEW
29.0 7.0 7.0 4.23 MB

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

Home Page: https://codesandbox.io/s/bra-ket-vue-cydtt

License: MIT License

JavaScript 7.38% TypeScript 8.74% Vue 83.70% SCSS 0.17%
quantum-game visualizer javascript vuejs ket matrices complex-numbers quantum

bra-ket-vue's Introduction

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/[email protected]/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/[email protected]/dist/quantum-tensors.min.js"></script>
<script src="https://unpkg.com/[email protected]/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}
}

bra-ket-vue's People

Contributors

dangoldbj avatar dependabot[bot] avatar frizi avatar klemklem avatar stared avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar

Forkers

tachsin ayazskhan shahip2016 rayintu mbrukman sdawanse knut0815

bra-ket-vue's Issues

Rectangular matrices don't work well

As of 0.3.0, rectangular matrices do not work well:

image

new Vue({
  el: "#op-and",
  template: "<matrix-viewer :operator-raw='operator' :dark-mode='false' />",
  components: {
    MatrixViewer
  },
  data() {
  	return {
      operator: Operator.fromSparseCoordNames([
          ['0', '00', Cx(1)],
          ['0', '01', Cx(1)],
          ['0', '10', Cx(1)],
          ['1', '11', Cx(1)],
        ],
        [Dimension.position(2, 'bit')],
        [Dimension.position(2, 'bit'), Dimension.position(2, 'bit')])
		}
  }
})

image

new Vue({
  el: "#op-second",
  template: "<matrix-viewer :operator-raw='operator' :dark-mode='false' />",
  components: {
    MatrixViewer
  },
  data() {
  	return {
      operator: Operator.fromSparseCoordNames([
          ['0', '00', Cx(1)],
          ['1', '01', Cx(1)],
          ['0', '10', Cx(1)],
          ['1', '11', Cx(1)],
        ],
        [Dimension.position(2, 'bit')],
        [Dimension.position(2, 'bit'), Dimension.position(2, 'bit')])
		}
  }
})

Dark and light styles 

    dimensionNameToColor(dimName: string, darkStyle = false): string {
      if (darkStyle) {
        switch (dimName) {
          case 'direction':
            return '#ff0055';
          case 'polarization':
            return '#ff9100';
          case 'spin':
            return '#0091ff';
          default:
            return '#ffffff';
        }
      } else {
        switch (dimName) {
          case 'direction':
            return '#ff0055';
          case 'polarization':
            return '#ff9100';
          case 'spin':
            return '#0091ff';
          default:
            return '#ffffff';
        }
      }
    },
  },

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.