Show description
QUANTUM_OS // BLOCH_TERMINAL
QUANTUM_OS // BLOCH_TERMINAL
QUANTUM_OS // BLOCH_VISUALIZER
CONNECTED: QUBIT_01
ROTATION_MATRIX::ACTIVE
MOUSE_DRAG::ENABLED
FPS: 60
State Vector |ψ⟩
1.00|0⟩ + 0.00i|1⟩
Measurement Probability
|0⟩
100%
|1⟩
0%
Logic Gates
Pauli-X (NOT)
Pauli-Y
Pauli-Z (Phase)
Hadamard (Sup)
OBSERVE / COLLAPSE
RESET SYSTEM
QUANTUM_OS // BLOCH_TERMINAL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QUANTUM_OS // BLOCH_TERMINAL</title>
<style>
:root {
--bg-deep: #050508;
--bg-panel: rgba(20, 20, 30, 0.8);
--text-main: #e0e0ff;
--text-dim: #6c6c80;
--neon-cyan: #00f3ff;
--neon-magenta: #ff0055;
--neon-green: #00ff9d;
--grid-color: rgba(100, 100, 255, 0.1);
--font-mono: 'Courier New', Courier, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
body {
background-color: var(--bg-deep);
color: var(--text-main);
font-family: var(--font-mono);
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* --- LAYOUT --- */
header {
height: 60px;
border-bottom: 1px solid rgba(255,255,255,0.1);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(5px);
z-index: 10;
}
h1 {
font-size: 1.2rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--neon-cyan);
text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
}
main {
flex: 1;
display: grid;
grid-template-columns: 1fr 350px;
height: calc(100vh - 60px);
}
/* --- 3D VIEWPORT --- */
.viewport {
position: relative;
background: radial-gradient(circle at center, #0a0a12 0%, #000 100%);
overflow: hidden;
cursor: move;
}
canvas { display: block; width: 100%; height: 100%; }
.overlay-data {
position: absolute;
top: 20px;
left: 20px;
pointer-events: none;
}
.data-row {
margin-bottom: 5px;
font-size: 0.8rem;
color: var(--neon-cyan);
}
/* --- CONTROL DECK --- */
.deck {
border-left: 1px solid rgba(255,255,255,0.1);
background: var(--bg-panel);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 2rem;
overflow-y: auto;
}
.readout-box {
background: rgba(0,0,0,0.3);
border: 1px solid var(--grid-color);
padding: 1rem;
border-radius: 4px;
}
.readout-title {
font-size: 0.7rem;
color: var(--text-dim);
text-transform: uppercase;
margin-bottom: 0.5rem;
display: block;
}
.braket-display {
font-size: 1.1rem;
text-align: center;
margin: 10px 0;
color: #fff;
}
.prob-bar-container {
display: flex;
align-items: center;
gap: 10px;
margin-top: 5px;
font-size: 0.8rem;
}
.prob-track {
flex: 1;
height: 6px;
background: #222;
border-radius: 3px;
overflow: hidden;
}
.prob-fill {
height: 100%;
width: 0%;
transition: width 0.3s ease;
}
/* BUTTON MATRIX */
.gate-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
button {
background: rgba(255,255,255,0.03);
border: 1px solid var(--grid-color);
color: var(--text-main);
padding: 15px;
font-family: var(--font-mono);
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s;
text-transform: uppercase;
position: relative;
overflow: hidden;
}
button:hover {
background: rgba(0, 243, 255, 0.1);
border-color: var(--neon-cyan);
box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
}
button:active { transform: scale(0.98); }
.btn-collapse {
border-color: var(--neon-magenta);
color: var(--neon-magenta);
}
.btn-collapse:hover {
background: rgba(255, 0, 85, 0.1);
border-color: var(--neon-magenta);
box-shadow: 0 0 15px rgba(255, 0, 85, 0.2);
}
/* GLITCH TEXT EFFECT */
.glitch-text { animation: glitch 2s infinite; }
@keyframes glitch {
0% { text-shadow: 2px 0 var(--neon-magenta), -2px 0 var(--neon-cyan); }
90% { text-shadow: 2px 0 var(--neon-magenta), -2px 0 var(--neon-cyan); }
91% { text-shadow: none; }
92% { text-shadow: -2px 0 var(--neon-magenta), 2px 0 var(--neon-cyan); }
93% { text-shadow: none; }
100% { text-shadow: 2px 0 var(--neon-magenta), -2px 0 var(--neon-cyan); }
}
/* RESPONSIVE */
@media (max-width: 800px) {
main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
.deck { border-left: none; border-top: 1px solid rgba(255,255,255,0.1); height: 400px; }
}
</style>
</head>
<body>
<header>
<h1>QUANTUM_OS <span style="font-size:0.5em; opacity:0.5;">// BLOCH_VISUALIZER</span></h1>
<div style="font-size: 0.8rem; color: var(--neon-green);">CONNECTED: QUBIT_01</div>
</header>
<main>
<div class="viewport" id="viewport">
<canvas id="canvas"></canvas>
<div class="overlay-data">
<div class="data-row">ROTATION_MATRIX::ACTIVE</div>
<div class="data-row">MOUSE_DRAG::ENABLED</div>
<div class="data-row" id="fpsCounter">FPS: 60</div>
</div>
</div>
<div class="deck">
<div class="readout-box">
<span class="readout-title">State Vector |ψ⟩</span>
<div class="braket-display" id="stateDisplay">
1.00|0⟩ + 0.00i|1⟩
</div>
</div>
<div class="readout-box">
<span class="readout-title">Measurement Probability</span>
<div class="prob-bar-container">
<span style="width: 30px;">|0⟩</span>
<div class="prob-track">
<div class="prob-fill" id="prob0" style="width: 100%; background: var(--neon-cyan);"></div>
</div>
<span id="textProb0">100%</span>
</div>
<div class="prob-bar-container">
<span style="width: 30px;">|1⟩</span>
<div class="prob-track">
<div class="prob-fill" id="prob1" style="width: 0%; background: var(--neon-magenta);"></div>
</div>
<span id="textProb1">0%</span>
</div>
</div>
<span class="readout-title">Logic Gates</span>
<div class="gate-grid">
<button onclick="applyGate('X')">Pauli-X (NOT)</button>
<button onclick="applyGate('Y')">Pauli-Y</button>
<button onclick="applyGate('Z')">Pauli-Z (Phase)</button>
<button onclick="applyGate('H')">Hadamard (Sup)</button>
</div>
<button class="btn-collapse" onclick="measure()">OBSERVE / COLLAPSE</button>
<button onclick="resetQubit()" style="border-color: #444; color: #888; font-size: 0.7rem; padding: 10px;">RESET SYSTEM</button>
</div>
</main>
<script>
// --- MATH ENGINE: COMPLEX NUMBERS & MATRICES ---
class Complex {
constructor(re, im) { this.re = re; this.im = im; }
add(c) { return new Complex(this.re + c.re, this.im + c.im); }
mul(c) { return new Complex(this.re * c.re - this.im * c.im, this.re * c.im + this.im * c.re); }
magSq() { return this.re * this.re + this.im * this.im; }
toString() {
const r = this.re.toFixed(2);
const i = this.im >= 0 ? '+' + this.im.toFixed(2) + 'i' : this.im.toFixed(2) + 'i';
return `${r}${i}`;
}
}
// --- QUANTUM STATE ---
// State is a vector [alpha, beta]
let alpha = new Complex(1, 0); // Start at |0>
let beta = new Complex(0, 0);
// Target state for animation interpolation
let targetAlpha = new Complex(1, 0);
let targetBeta = new Complex(0, 0);
let isAnimating = false;
// Gates (2x2 Unitary Matrices)
const GATES = {
X: [ [new Complex(0,0), new Complex(1,0)], [new Complex(1,0), new Complex(0,0)] ],
Y: [ [new Complex(0,0), new Complex(0,-1)], [new Complex(0,1), new Complex(0,0)] ],
Z: [ [new Complex(1,0), new Complex(0,0)], [new Complex(0,0), new Complex(-1,0)] ],
H: [
[new Complex(0.7071,0), new Complex(0.7071,0)],
[new Complex(0.7071,0), new Complex(-0.7071,0)]
]
};
function matMulVec(matrix, a, b) {
// Matrix is 2x2, vector is 2x1 [a, b]
const newA = matrix[0][0].mul(a).add(matrix[0][1].mul(b));
const newB = matrix[1][0].mul(a).add(matrix[1][1].mul(b));
return [newA, newB];
}
function applyGate(gateName) {
// Apply gate to current state
const result = matMulVec(GATES[gateName], alpha, beta);
alpha = result[0];
beta = result[1];
normalize();
updateUI();
}
function normalize() {
const mag = Math.sqrt(alpha.magSq() + beta.magSq());
alpha.re /= mag; alpha.im /= mag;
beta.re /= mag; beta.im /= mag;
}
function measure() {
const prob0 = alpha.magSq();
const roll = Math.random();
if(roll < prob0) {
alpha = new Complex(1,0);
beta = new Complex(0,0);
} else {
alpha = new Complex(0,0);
beta = new Complex(1,0);
}
updateUI();
// Visual Flash
const canvas = document.getElementById('canvas');
canvas.style.filter = "brightness(3) blur(2px)";
setTimeout(() => { canvas.style.filter = "none"; }, 100);
}
function resetQubit() {
alpha = new Complex(1, 0);
beta = new Complex(0, 0);
updateUI();
}
// --- 3D RENDERING ENGINE (VANILLA JS) ---
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let width, height;
let cameraAngleX = 0;
let cameraAngleY = 0;
// Mouse Drag Logic
let isDragging = false;
let lastMouseX = 0;
let lastMouseY = 0;
document.getElementById('viewport').addEventListener('mousedown', (e) => {
isDragging = true;
lastMouseX = e.clientX;
lastMouseY = e.clientY;
});
window.addEventListener('mouseup', () => isDragging = false);
window.addEventListener('mousemove', (e) => {
if(!isDragging) return;
const dx = e.clientX - lastMouseX;
const dy = e.clientY - lastMouseY;
cameraAngleY += dx * 0.01;
cameraAngleX += dy * 0.01;
lastMouseX = e.clientX;
lastMouseY = e.clientY;
});
function resize() {
width = canvas.parentElement.clientWidth;
height = canvas.parentElement.clientHeight;
canvas.width = width;
canvas.height = height;
}
window.addEventListener('resize', resize);
resize();
function project(x, y, z) {
// Simple Rotation Matrix
// Rotate around Y
let x1 = x * Math.cos(cameraAngleY) - z * Math.sin(cameraAngleY);
let z1 = x * Math.sin(cameraAngleY) + z * Math.cos(cameraAngleY);
// Rotate around X
let y2 = y * Math.cos(cameraAngleX) - z1 * Math.sin(cameraAngleX);
let z2 = y * Math.sin(cameraAngleX) + z1 * Math.cos(cameraAngleX);
// Perspective
const fov = 300;
const scale = fov / (fov + z2 + 4); // +4 moves object back
return {
x: width/2 + x1 * scale * 150, // 150 is radius scale
y: height/2 + y2 * scale * 150,
scale: scale,
z: z2 // for z-sorting if needed
};
}
function drawSphere() {
ctx.clearRect(0,0,width,height);
// 1. Draw Lat/Lon Lines (Wireframe)
ctx.strokeStyle = "rgba(100, 100, 255, 0.1)";
ctx.lineWidth = 1;
// Longitude (Vertical circles)
for(let i=0; i<Math.PI; i+=Math.PI/6) {
ctx.beginPath();
for(let j=0; j<=Math.PI*2; j+=0.2) {
const x = Math.sin(i) * Math.cos(j);
const y = Math.cos(i);
const z = Math.sin(i) * Math.sin(j);
const p = project(x,y,z);
if(j===0) ctx.moveTo(p.x, p.y);
else ctx.lineTo(p.x, p.y);
}
ctx.stroke();
}
// Latitude (Horizontal circles)
// We rotate the geometry logic slightly for variety, or just standard sphere
for(let lat=-1.5; lat<=1.5; lat+=0.5) {
ctx.beginPath();
const r = Math.cos(lat);
const y = Math.sin(lat);
for(let lon=0; lon<=Math.PI*2 + 0.1; lon+=0.2) {
const x = r * Math.cos(lon);
const z = r * Math.sin(lon);
const p = project(x,y,z);
if(lon===0) ctx.moveTo(p.x, p.y);
else ctx.lineTo(p.x, p.y);
}
ctx.stroke();
}
// 2. Draw Axes
const origin = project(0,0,0);
// Z Axis (|0> to |1>)
const zTop = project(0, -1.2, 0); // Y in canvas is inverted visually 3D Y is up/down
const zBot = project(0, 1.2, 0);
ctx.strokeStyle = "rgba(255, 255, 255, 0.2)";
ctx.beginPath(); ctx.moveTo(zTop.x, zTop.y); ctx.lineTo(zBot.x, zBot.y); ctx.stroke();
drawLabel(zTop, "|0⟩");
drawLabel(zBot, "|1⟩");
// X Axis
const xPos = project(1.2, 0, 0);
const xNeg = project(-1.2, 0, 0);
ctx.beginPath(); ctx.moveTo(xPos.x, xPos.y); ctx.lineTo(xNeg.x, xNeg.y); ctx.stroke();
drawLabel(xPos, "|+⟩");
// Y Axis
const yPos = project(0, 0, 1.2);
const yNeg = project(0, 0, -1.2);
ctx.beginPath(); ctx.moveTo(yPos.x, yPos.y); ctx.lineTo(yNeg.x, yNeg.y); ctx.stroke();
drawLabel(yPos, "|i⟩");
// 3. Draw State Vector
// Convert Alpha/Beta to x,y,z
// Bloch sphere mapping:
// x = 2*Re(alpha * conj(beta))
// y = 2*Im(alpha * conj(beta))
// z = |alpha|^2 - |beta|^2
// Calculate conjugate of beta
const betaConj = new Complex(beta.re, -beta.im);
const prod = alpha.mul(betaConj);
const bx = 2 * prod.re;
const by = 2 * prod.im; // In physics Z is up, here Y is up. We map Z->Y for visuals.
const bz = alpha.magSq() - beta.magSq();
// Mapping to 3D engine coordinates (Y is up/down)
// Physics Z (|0>) corresponds to Engine -Y
// Physics X corresponds to Engine X
// Physics Y corresponds to Engine Z
const vX = bx;
const vY = -bz; // Flip because Canvas Y is down
const vZ = by;
const tip = project(vX, vY, vZ);
// Draw Vector Line
ctx.strokeStyle = "#00f3ff";
ctx.lineWidth = 3;
ctx.shadowColor = "#00f3ff";
ctx.shadowBlur = 15;
ctx.beginPath();
ctx.moveTo(origin.x, origin.y);
ctx.lineTo(tip.x, tip.y);
ctx.stroke();
ctx.shadowBlur = 0;
// Draw Tip Point
ctx.fillStyle = "#fff";
ctx.beginPath();
ctx.arc(tip.x, tip.y, 4 * tip.scale, 0, Math.PI*2);
ctx.fill();
// Draw Projection Shadow (to help depth perception)
ctx.strokeStyle = "rgba(0, 243, 255, 0.2)";
ctx.setLineDash([2, 4]);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(tip.x, tip.y);
// Project to equatorial plane (physics z=0, engine y=0)
const shadow = project(vX, 0, vZ);
ctx.lineTo(shadow.x, shadow.y);
ctx.lineTo(origin.x, origin.y);
ctx.stroke();
ctx.setLineDash([]);
}
function drawLabel(pos, text) {
ctx.fillStyle = "#fff";
ctx.font = "12px monospace";
ctx.fillText(text, pos.x + 5, pos.y);
}
// --- UI UPDATER ---
function updateUI() {
// Braket Text
const reA = alpha.re.toFixed(2);
const imA = alpha.im.toFixed(2);
const reB = beta.re.toFixed(2);
const imB = beta.im.toFixed(2);
// Simplistic formatting for readability
// We show magnitude for visualization mostly, complex phases are hard to read in text
// |ψ⟩ = α|0⟩ + β|1⟩
document.getElementById('stateDisplay').innerText =
`${alpha.toString()}|0⟩ + ${beta.toString()}|1⟩`;
// Probabilities
const p0 = alpha.magSq();
const p1 = beta.magSq();
document.getElementById('prob0').style.width = (p0 * 100) + '%';
document.getElementById('textProb0').innerText = Math.round(p0 * 100) + '%';
document.getElementById('prob1').style.width = (p1 * 100) + '%';
document.getElementById('textProb1').innerText = Math.round(p1 * 100) + '%';
}
// --- MAIN LOOP ---
function animate() {
drawSphere();
// Subtle auto-rotation if not dragging
if (!isDragging) {
cameraAngleY += 0.002;
}
requestAnimationFrame(animate);
}
updateUI();
animate();
</script>
</body>
</html>