add more information

rhaskia · Jan 9, 2025 · 82af889 · 82af889
1 parent b548be8
commit 82af889
Show file tree

Hide file tree

Showing 16 changed files with 276 additions and 48 deletions.
diff --git a/docs/assets/github-mark-white.png b/docs/assets/github-mark-white.png
diff --git a/docs/assets/sphere.js b/docs/assets/sphere.js
diff --git a/docs/assets/style.css b/docs/assets/style.css
diff --git a/docs/index.html b/docs/index.html
@@ -6,16 +6,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta charset="UTF-8" />
   <link rel="stylesheet" href="style.css">
-<link rel="preload" href="./wasm/editor_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
-            <link rel="preload" href="./wasm/editor.js" as="script">
+<link rel="preload" href="/./wasm/editor_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
+            <link rel="preload" href="/./wasm/editor.js" as="script">
             </head>
   <body>
     <div id="main"></div>
   <script>
             // We can't use a module script here because we need to start the script immediately when streaming
-            import("./wasm/editor.js").then(
+            import("/./wasm/editor.js").then(
                 ({ default: init }) => {
-                init("./wasm/editor_bg.wasm").then((wasm) => {
+                init("/./wasm/editor_bg.wasm").then((wasm) => {
                     if (wasm.__wbindgen_start == undefined) {
                     wasm.main();
                     }

diff --git a/docs/wasm/editor.js b/docs/wasm/editor.js
@@ -229,15 +229,15 @@ function __wbg_adapter_50(arg0, arg1) {
 }
 
 function __wbg_adapter_53(arg0, arg1, arg2) {
-    wasm.closure317_externref_shim(arg0, arg1, arg2);
+    wasm.closure321_externref_shim(arg0, arg1, arg2);
 }
 
 function __wbg_adapter_56(arg0, arg1, arg2) {
-    wasm.closure320_externref_shim(arg0, arg1, arg2);
+    wasm.closure324_externref_shim(arg0, arg1, arg2);
 }
 
 function __wbg_adapter_59(arg0, arg1, arg2) {
-    wasm.closure524_externref_shim(arg0, arg1, arg2);
+    wasm.closure528_externref_shim(arg0, arg1, arg2);
 }
 
 const __wbindgen_enum_ScrollBehavior = ["auto", "instant", "smooth"];
@@ -1368,20 +1368,20 @@ function __wbg_get_imports() {
         const ret = false;
         return ret;
     };
-    imports.wbg.__wbindgen_closure_wrapper1062 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 525, __wbg_adapter_59);
+    imports.wbg.__wbindgen_closure_wrapper1073 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 529, __wbg_adapter_59);
         return ret;
     };
-    imports.wbg.__wbindgen_closure_wrapper734 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 314, __wbg_adapter_50);
+    imports.wbg.__wbindgen_closure_wrapper745 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 318, __wbg_adapter_50);
         return ret;
     };
-    imports.wbg.__wbindgen_closure_wrapper736 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 314, __wbg_adapter_53);
+    imports.wbg.__wbindgen_closure_wrapper747 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 318, __wbg_adapter_53);
         return ret;
     };
-    imports.wbg.__wbindgen_closure_wrapper738 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 314, __wbg_adapter_56);
+    imports.wbg.__wbindgen_closure_wrapper749 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 318, __wbg_adapter_56);
         return ret;
     };
     imports.wbg.__wbindgen_debug_string = function(arg0, arg1) {

diff --git a/docs/wasm/editor.js.br b/docs/wasm/editor.js.br
diff --git a/docs/wasm/editor_bg.wasm b/docs/wasm/editor_bg.wasm
diff --git a/docs/wasm/editor_bg.wasm.br b/docs/wasm/editor_bg.wasm.br
diff --git a/editor/assets/github-mark-white.png b/editor/assets/github-mark-white.png
diff --git a/editor/assets/sphere.js b/editor/assets/sphere.js
@@ -28,9 +28,22 @@ const material = new THREE.PointsMaterial({ size: 1, vertexColors: true });
 const points = new THREE.Points(geometry, material);
 scene.add(points);
 
+let vertices_current = [];
+let vertices_target = [];
+
 async function updatePoints(newPositions) {
     let vertices = new Float32Array(newPositions); 
 
+    vertices_target = [];
+    for (let i = 0; i < newPositions.length; i += 3) { 
+        let {r, theta, phi} = cartesianToSpherical(newPositions[i], newPositions[i + 1], newPositions[i + 2]);
+        vertices_target.push(r, theta, phi);
+    }
+    if (vertices_current.length != vertices_target.length) {
+        console.log("qubit length changed");
+        vertices_current = vertices_target;
+    }
+
     let clean_vertices = [];
     let counts = [];
     for (let i = 0; i < vertices.length; i += 3) {
@@ -56,24 +69,54 @@ async function updatePoints(newPositions) {
     let colors = [];
     for (let i = 0; i < counts.length; i++) {
         let total = (vertices.length / 3) - 1; 
+        if (total == 0) { total = 1000; }
         let color = new THREE.Color().setHSL((1 - (counts[i] / total)) * 0.7, 0.8, 0.5);
-        console.log((1 - (counts[i] / total)) * 0.7);
         colors.push(color.r, color.g, color.b);
     } 
 
-    console.log(counts);
-    geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(clean_vertices), 3 ) );
+    let colors_all = [];
+    for (let i = 0; i < vertices.length; i += 3) {
+        for (let j = 0; j < clean_vertices.length; j += 3) {            
+            const dx = vertices[i] - clean_vertices[j];
+            const dy = vertices[i + 1] - clean_vertices[j + 1];
+            const dz = vertices[i + 2] - clean_vertices[j + 2];
+            const distance = Math.sqrt(dx * dx + dy * dy + dz * dz);
 
-    geometry.setAttribute('color', new THREE.Float32BufferAttribute( colors, 3 ) );
-    geometry.attributes.position.needsUpdate = true; // Flag for updating
+            if (distance < 0.05) {
+                colors_all.push(colors[j], colors[j + 1], colors[j + 2]);
+            }
+        }
+    }
+
+    geometry.setAttribute('color', new THREE.Float32BufferAttribute( colors_all, 3 ) );
     geometry.attributes.color.needsUpdate = true; // Flag for updating
 }
 
+function cartesianToSpherical(x, y, z) {
+    const r = Math.sqrt(x * x + y * y + z * z);
+    if (r < 0.05) {
+        return { r, theta: 0, phi: 0 };
+    }  
+    const theta = Math.acos(z / r); // polar angle
+    const phi = Math.atan2(y, x);   // azimuthal angle
+    return { r, theta, phi };
+}
+
+function sphericalToCartesian(r, theta, phi) {
+  const x = r * Math.sin(theta) * Math.cos(phi);
+  const y = r * Math.sin(theta) * Math.sin(phi);
+  const z = r * Math.cos(theta);
+  return { x, y, z };
+}
+
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+
 document.addEventListener("blochpointsupdate", function(e) { updatePoints(e.detail) });
 
 let vertices = [
   0, 8, 0, 
-  0, 8, 0, 
 ];
 
 updatePoints(vertices);
@@ -101,6 +144,19 @@ function animate() {
     requestAnimationFrame(animate);
 
     controls.update();
+
+    for (let i = 0; i < vertices_current.length; i += 1) {
+        vertices_current[i] = lerp(vertices_current[i], vertices_target[i], 0.1)
+    }
+
+    let vertices = [];
+    for (let i = 0; i < vertices_current.length; i += 3) { 
+        let { x, y, z } = sphericalToCartesian(vertices_current[i], vertices_current[i + 1], vertices_current[i + 2]);
+        vertices.push(x, y, z);
+    }
+
+    geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3 ) );
+    geometry.attributes.position.needsUpdate = true; // Flag for updating
 
     renderer.render(scene, camera);
 }

diff --git a/editor/assets/style.css b/editor/assets/style.css
@@ -8,7 +8,8 @@ body {
 
 h1 {
     color: #ffffeb;
-    margin: 10px 0;
+    margin-bottom: 10px;
+    margin-top: 0px;
 }
 
 .register {
@@ -163,6 +164,16 @@ button {
     border-radius: 6px;
 }
 
+select {
+    background: #ffffeb;
+    border: none;
+    border-radius: 6px;
+}
+
+option {
+
+}
+
 button:active {
     background: lightgrey;
 }
@@ -224,13 +235,15 @@ button:active {
     background: #ffffeb;
     border-radius: 8px;
     padding: 8px;
+    height: fit-content;
 }
 
 .blochinfo {
     background: #ffffeb;
     border-radius: 8px;
     padding: 8px;
     width: 340px;
+    min-width: 340px;
 }
 
 .qubitgradient {
@@ -252,3 +265,19 @@ h3 {
 p {
     font-size: 15px;
 }
+
+.header{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.githublink {
+    position: relative;
+    top: 14px;
+}
+
+.githublink img {
+    width: 32px;
+    height: 32px;
+}