Try it. Slide the number of quantum particles (qubits) and watch the state size — the count of amplitudes you'd have to store — and the memory it would need. For a few particles, see the actual state vector drawn as bars.
<p class="hint">Slide the number of quantum particles. The <b>state</b> needs one amplitude per
configuration — that's <b>2<sup>n</sup></b> numbers. Watch the memory needed leave reality behind.</p>
<label class="slab">Particles (qubits): <b id="nval">3</b>
<input id="n" type="range" min="1" max="300" value="3" />
</label>
<div class="stats">
<div class="stat"><span>Amplitudes to store</span><b id="amps">8</b></div>
<div class="stat"><span>Memory needed</span><b id="mem">128 bytes</b></div>
</div>
<div id="cmp" class="cmp"></div>
<div id="bars" class="bars"></div>
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; color: #222; margin: 0; }
.hint { font-size: .9rem; color: #444; margin: 0 0 .7rem; line-height: 1.45; }
.slab { display: block; font: 600 14px system-ui; color: #1d3557; margin: .4rem 0; }
.slab input { width: 100%; margin-top: .3rem; accent-color: #6d597a; }
.stats { display: flex; gap: .7rem; margin: .7rem 0; flex-wrap: wrap; }
.stat { flex: 1; min-width: 130px; background: #f6f4f8; border: 1px solid #e6e2ee; border-radius: 10px; padding: .6rem .8rem; }
.stat span { display: block; font-size: .8rem; color: #777; }
.stat b { font: 800 18px ui-monospace, monospace; color: #6d597a; word-break: break-word; }
.cmp { font-weight: 700; font-size: .95rem; min-height: 1.4em; margin-bottom: .8rem; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.bar { flex: 1; background: linear-gradient(180deg,#6d597a,#9a8aa8); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.bar small { position: absolute; bottom: -16px; left: 0; right: 0; text-align: center; font: 600 8px ui-monospace, monospace; color: #888; }
.note { font-size: .85rem; color: #999; }
const fmt = (s, v) => s.replace(/%(\w+)%/g, (_, k) => String(v[k] ?? ''));
// The quantum state of n qubits has 2^n complex amplitudes. Storing it needs
// ~16 bytes each, so memory grows as 2^n — the explosion that makes classical
// simulation of quantum systems intractable (Feynman's argument, 1981).
function pow2(n) { return 1n << BigInt(n); }
function human(big) { // format a BigInt with scientific shorthand
const s = big.toString();
if (s.length <= 6) return s;
return s[0] + (s.length > 1 ? '.' + s.slice(1, 3) : '') + ' × 10^' + (s.length - 1);
}
function bytesHuman(big) {
const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
let v = big, u = 0;
while (v >= 1024n && u < units.length - 1) { v /= 1024n; u++; }
if (u < units.length - 1) return v.toString() + ' ' + units[u];
// beyond yottabytes: scientific
return human(big) + ' bytes';
}
function compare(n) {
if (n <= 30) return ['A laptop handles this easily.', '#0a7d33'];
if (n <= 46) return ['Reaching a desktop / server’s memory limit.', '#b9770e'];
if (n <= 55) return ['Only the world’s largest supercomputers can hold this.', '#c0392b'];
if (n <= 90) return ['More memory than all the data stored on Earth.', '#c0392b'];
if (n <= 270) return ['More numbers than there are atoms in the universe (~10^80).', '#7d2a2a'];
return ['Vastly beyond anything physical — utterly out of reach.', '#7d2a2a'];
}
function bars(n) {
const el = document.getElementById('bars');
if (n > 6) { el.innerHTML = fmt('<span class="note">Too many amplitudes (2^%n%) to draw — that’s the whole point.</span>', { n: n }); return; }
const N = 1 << n;
// a sample normalized state (deterministic pseudo-random by index)
let amps = [], sum = 0;
for (let i = 0; i < N; i++) { const a = Math.abs(Math.sin(i * 2.3 + n * 1.7)) + 0.15; amps.push(a); sum += a * a; }
const norm = Math.sqrt(sum);
let html = '';
for (let i = 0; i < N; i++) { const p = (amps[i] / norm) ** 2; html += '<div class="bar" style="height:' + (p * 100 / Math.max(...amps.map(a => (a / norm) ** 2))).toFixed(1) + '%"><small>' + i.toString(2).padStart(n, '0') + '</small></div>'; }
el.innerHTML = html;
}
function update() {
const n = +document.getElementById('n').value;
document.getElementById('nval').textContent = n;
const amps = pow2(n);
document.getElementById('amps').textContent = human(amps);
document.getElementById('mem').textContent = bytesHuman(amps * 16n);
const [msg, col] = compare(n);
const c = document.getElementById('cmp'); c.textContent = msg; c.style.color = col;
bars(n);
}
document.getElementById('n').addEventListener('input', update);
update();
<p class="hint">Slide the number of quantum particles. The <b>state</b> needs one amplitude per
configuration — that's <b>2<sup>n</sup></b> numbers. Watch the memory needed leave reality behind.</p>
<label class="slab">Particles (qubits): <b id="nval">3</b>
<input id="n" type="range" min="1" max="300" value="3" />
</label>
<div class="stats">
<div class="stat"><span>Amplitudes to store</span><b id="amps">8</b></div>
<div class="stat"><span>Memory needed</span><b id="mem">128 bytes</b></div>
</div>
<div id="cmp" class="cmp"></div>
<div id="bars" class="bars"></div>
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; color: #222; margin: 0; }
.hint { font-size: .9rem; color: #444; margin: 0 0 .7rem; line-height: 1.45; }
.slab { display: block; font: 600 14px system-ui; color: #1d3557; margin: .4rem 0; }
.slab input { width: 100%; margin-top: .3rem; accent-color: #6d597a; }
.stats { display: flex; gap: .7rem; margin: .7rem 0; flex-wrap: wrap; }
.stat { flex: 1; min-width: 130px; background: #f6f4f8; border: 1px solid #e6e2ee; border-radius: 10px; padding: .6rem .8rem; }
.stat span { display: block; font-size: .8rem; color: #777; }
.stat b { font: 800 18px ui-monospace, monospace; color: #6d597a; word-break: break-word; }
.cmp { font-weight: 700; font-size: .95rem; min-height: 1.4em; margin-bottom: .8rem; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.bar { flex: 1; background: linear-gradient(180deg,#6d597a,#9a8aa8); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.bar small { position: absolute; bottom: -16px; left: 0; right: 0; text-align: center; font: 600 8px ui-monospace, monospace; color: #888; }
.note { font-size: .85rem; color: #999; }
const fmt = (s, v) => s.replace(/%(\w+)%/g, (_, k) => String(v[k] ?? ''));
// The quantum state of n qubits has 2^n complex amplitudes. Storing it needs
// ~16 bytes each, so memory grows as 2^n — the explosion that makes classical
// simulation of quantum systems intractable (Feynman's argument, 1981).
function pow2(n) { return 1n << BigInt(n); }
function human(big) { // format a BigInt with scientific shorthand
const s = big.toString();
if (s.length <= 6) return s;
return s[0] + (s.length > 1 ? '.' + s.slice(1, 3) : '') + ' × 10^' + (s.length - 1);
}
function bytesHuman(big) {
const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
let v = big, u = 0;
while (v >= 1024n && u < units.length - 1) { v /= 1024n; u++; }
if (u < units.length - 1) return v.toString() + ' ' + units[u];
// beyond yottabytes: scientific
return human(big) + ' bytes';
}
function compare(n) {
if (n <= 30) return ['A laptop handles this easily.', '#0a7d33'];
if (n <= 46) return ['Reaching a desktop / server’s memory limit.', '#b9770e'];
if (n <= 55) return ['Only the world’s largest supercomputers can hold this.', '#c0392b'];
if (n <= 90) return ['More memory than all the data stored on Earth.', '#c0392b'];
if (n <= 270) return ['More numbers than there are atoms in the universe (~10^80).', '#7d2a2a'];
return ['Vastly beyond anything physical — utterly out of reach.', '#7d2a2a'];
}
function bars(n) {
const el = document.getElementById('bars');
if (n > 6) { el.innerHTML = fmt('<span class="note">Too many amplitudes (2^%n%) to draw — that’s the whole point.</span>', { n: n }); return; }
const N = 1 << n;
// a sample normalized state (deterministic pseudo-random by index)
let amps = [], sum = 0;
for (let i = 0; i < N; i++) { const a = Math.abs(Math.sin(i * 2.3 + n * 1.7)) + 0.15; amps.push(a); sum += a * a; }
const norm = Math.sqrt(sum);
let html = '';
for (let i = 0; i < N; i++) { const p = (amps[i] / norm) ** 2; html += '<div class="bar" style="height:' + (p * 100 / Math.max(...amps.map(a => (a / norm) ** 2))).toFixed(1) + '%"><small>' + i.toString(2).padStart(n, '0') + '</small></div>'; }
el.innerHTML = html;
}
function update() {
const n = +document.getElementById('n').value;
document.getElementById('nval').textContent = n;
const amps = pow2(n);
document.getElementById('amps').textContent = human(amps);
document.getElementById('mem').textContent = bytesHuman(amps * 16n);
const [msg, col] = compare(n);
const c = document.getElementById('cmp'); c.textContent = msg; c.style.color = col;
bars(n);
}
document.getElementById('n').addEventListener('input', update);
update();
Notice how fast it leaves reality behind: a laptop handles a handful, a supercomputer maybe ~50, and then the numbers rocket past all the storage on Earth and beyond the atoms in the cosmos — for a system you could hold in your hand. That gap is why simulating nature is hard.
Comments
Loading comments...