Stewart

[Hazarre]

Hi Stewart,
I am building this website to introduce a visualization model for two-qubit states. We want to add gates buttons to our website so users can click and see how gates acting on states reflect in our visualization. I found Q.js to be intuitive, user friendly and inspiring to our project. Can you share with me how Q.js is built? The tools, js libraries and organization of the project would all be helpful.

[stewdio]

Hi there. Thank you for the kind words!

The only 3rd party tools used in Q.js are Three, Tween, and MeshLine as found in this folder: https://github.com/stewdio/q.js/tree/master/assets

Other than that, it’s just pure (custom) JavaScript. The “build” script literally just concatenates the JavaScript files and the CSS files. (I have yet to find a good JS compression tool that respects String Template literals as used in Q.js.) I had started to kick the tires on a WebGPUversion that uses hardware acceleration to simulate quantum computation, but... I’ve just been too busy to give Q.js much love recently 😅

This page explains my approach to building Q.js; how I have tried to make it very simple for folks to run right off of their own desktops and to be easily hackable by design:
https://quantumjavascript.app/contributing.html#JavaScript_style