Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jbolns/zx_vis

Quantum computing > JS-based automatic generation of 3D structures directly from PyZX data
https://github.com/jbolns/zx_vis

3d astro quantum-computing threejs

Last synced: about 5 hours ago
JSON representation

Quantum computing > JS-based automatic generation of 3D structures directly from PyZX data

Host: GitHub
URL: https://github.com/jbolns/zx_vis
Owner: jbolns
Created: 2025-01-23T18:27:33.000Z (1 day ago)
Default Branch: main
Last Pushed: 2025-01-23T18:31:46.000Z (1 day ago)
Last Synced: 2025-01-23T19:28:54.754Z (1 day ago)
Topics: 3d, astro, quantum-computing, threejs
Language: JavaScript
Homepage:
Size: 195 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# ⚛️ Tentative 3D ZX visualiser
This is a preliminary concept for a JS-based environment to automatically generate 3D structures directly from PyZX data as close to correctness as possible, edit them, and export them to an useful (but yet to be determined format).

Current status: Decidedly not ready. A lot of things work, but controls are very unintuitive.

## 🚀 Launch
To jump straight into taking a look at the current progress, just:
- Clone, download, or otherwise get the repository into your local computer:
```sh
git clone https://github.com/jbolns/zx_vis.git
```
- Install all necessary dependencies
```sh
npm install
```
- Run the visualiser
```sh
npm install
```

## 🧑‍🚀 Stack
The visualiser uses a three.js engine, with an Astro Wrapper. The three.js code is portable to other frameworks besides Astro.
- Three.js code is maintained in its original vanilla-JS form to maximise the potential for contributions (if you know how to use other versions of three.js, you can easily engage with the foundational code, but not necessarily upside down).
- Astro is similar to React, except it is easier to use when there is a need to integrate vanilla-JS components with components from other frameworks, e.g., React.
- CSS is done with Tailwind.

## 📟 Schema
For now, visualisations are built directly from a JSON file adhering to the schema found in the file `./.admin/schema.json`.

In very general terms, the JSON is formed in three different stages:
- An object with wire_vertices, with {x, y, z, rot_x, rot_y, rot_z, scale_x, scale_y, scale_z} coordinates for each entry.
- An object with node_vertices, with {x, y, z, rot_x, rot_y, rot_z, scale_x, scale_y, scale_z} coordinates for each entry.
- An object with edges, with {source: str, target: str} keys refering to a wire_ or node_vertex in one of the objects above.

This may rapidly change as the schema is directly tied to the backend.

## 🚀 Project Structure
The folder structure is as follows:

```text
/
├── ...
│ └── ...
├── data # Folder to be replaced eventually
│ └── data.json # Data for 3D visualisation
├── src/
│ ├── assets/
│ │ └── ... # Graphics (e.g. textures)
│ ├── components/
│ │ └── ... # Components folder
│ ├── layouts/
│ │ └── Layout.astro # Layout to standardise pages' look
│ ├── pages/
│ └── index.astro # Body of the homepage
│ └── scripts/
│ │ ├── animation.js # Main animation script
│ │ └── importer.js # Imports data
│ └── styles/
│ └── global.css # Body of the homepage
└── package.json
```

## 🧞 Commands
All Astro commands are run from the root of the project, from a terminal:

## 👀
...