The whole puzzle hangs on one intuition: a heavier force carrier means a shorter-range force. The picture below shows the strength of a force around a source as you move away from it. Drag the slider to change the mass of the particle that carries the force.
<p class="hint">A force around a source. A <b>massless</b> carrier (like the photon)
reaches far; give the carrier even a little <b>mass</b> and the force collapses to a
tiny range — a <b>mass gap</b>. Move the slider or pick a preset.</p>
<canvas id="field" width="360" height="200"></canvas>
<div class="readout" id="readout"></div>
<label class="slider">Carrier mass m:
<input id="mass" type="range" min="0" max="40" value="0" step="1">
</label>
<div class="btns">
<button id="massless" type="button">Massless (m = 0)</button>
<button id="heavy" type="button">Give it mass</button>
<button id="reset" type="button" class="ghost">Reset</button>
</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; }
canvas { width: 100%; max-width: 360px; height: auto; border: 1px solid #cdd9e3;
border-radius: 8px; background: #f6f9fc; display: block; }
.readout { font: 600 .95rem ui-monospace, monospace; color: #1d3557; margin: .55rem 0; min-height: 1.3em; }
.slider { display: block; font-size: .85rem; color: #444; margin: .3rem 0 .6rem; }
.slider input { width: 100%; margin-top: .3rem; accent-color: #1d3557; }
.btns { display: flex; gap: .5rem; flex-wrap: wrap; }
button { font: 600 14px system-ui, sans-serif; padding: .45rem .9rem; border: 1px solid #1d3557;
background: #1d3557; color: #fff; border-radius: 8px; cursor: pointer; }
button.ghost { background: #fff; color: #1d3557; }
const fmt = (s, v) => s.replace(/%(\w+)%/g, (_, k) => String(v[k] ?? ''));
// The strength of a force carried by a particle of mass m falls off like the
// Yukawa potential: V(r) = exp(-m*r) / r. When m = 0 this is the long-range
// 1/r law (electromagnetism, gravity). Any m > 0 multiplies in an exponential
// decay e^(-m*r), so the force is "confined" to a range ~ 1/m: a MASS GAP.
// Proving real Yang-Mills theory forces m > 0 is the open Millennium problem.
const cv = document.getElementById('field');
const ctx = cv.getContext('2d');
const W = cv.width, H = cv.height;
const slider = document.getElementById('mass');
// Yukawa strength at distance r (in arbitrary units), mass m (slider 0..40 -> 0..2).
function strength(r, m) { return Math.exp(-m * r) / r; }
// Range where the force has dropped to 1/e of a near-source reference.
function rangeOf(m) { return m === 0 ? Infinity : 1 / m; }
function draw() {
const m = (+slider.value) / 20; // map slider 0..40 to mass 0..2
ctx.clearRect(0, 0, W, H);
// source at left-center
const x0 = 30, y0 = H / 2, rMax = 5; // r runs 0.1 .. rMax across the canvas
// reference strength just outside the source, used to normalize the plot height
const ref = strength(0.25, m);
// plot the falloff curve
ctx.beginPath();
for (let px = 0; px <= W - x0; px++) {
const r = 0.1 + (px / (W - x0)) * rMax;
const s = strength(r, m) / ref; // 0..~1
const y = y0 - Math.min(s, 1.6) * (H / 2 - 12);
if (px === 0) ctx.moveTo(x0 + px, y); else ctx.lineTo(x0 + px, y);
}
ctx.strokeStyle = m === 0 ? '#0a7d33' : '#e63946';
ctx.lineWidth = 2.5;
ctx.stroke();
// baseline + source dot
ctx.strokeStyle = '#adb1b8'; ctx.lineWidth = 1;
ctx.beginPath(); ctx.moveTo(x0, 8); ctx.lineTo(x0, H - 8); ctx.stroke();
ctx.fillStyle = '#1d3557';
ctx.beginPath(); ctx.arc(x0, y0, 6, 0, 7); ctx.fill();
const reach = rangeOf(m);
const ro = document.getElementById('readout');
if (m === 0) {
ro.textContent = 'm = 0 -> range = unlimited (long-range force)';
ro.style.color = '#0a7d33';
} else {
ro.textContent = fmt('m = %m% -> range ~ %reach% units (confined: a mass gap)', { m: m.toFixed(2), reach: reach.toFixed(2) });
ro.style.color = '#c92f3c';
}
}
slider.addEventListener('input', draw);
document.getElementById('massless').addEventListener('click', () => { slider.value = 0; draw(); });
document.getElementById('heavy').addEventListener('click', () => { slider.value = 24; draw(); });
document.getElementById('reset').addEventListener('click', () => { slider.value = 0; draw(); });
draw();
<p class="hint">A force around a source. A <b>massless</b> carrier (like the photon)
reaches far; give the carrier even a little <b>mass</b> and the force collapses to a
tiny range — a <b>mass gap</b>. Move the slider or pick a preset.</p>
<canvas id="field" width="360" height="200"></canvas>
<div class="readout" id="readout"></div>
<label class="slider">Carrier mass m:
<input id="mass" type="range" min="0" max="40" value="0" step="1">
</label>
<div class="btns">
<button id="massless" type="button">Massless (m = 0)</button>
<button id="heavy" type="button">Give it mass</button>
<button id="reset" type="button" class="ghost">Reset</button>
</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; }
canvas { width: 100%; max-width: 360px; height: auto; border: 1px solid #cdd9e3;
border-radius: 8px; background: #f6f9fc; display: block; }
.readout { font: 600 .95rem ui-monospace, monospace; color: #1d3557; margin: .55rem 0; min-height: 1.3em; }
.slider { display: block; font-size: .85rem; color: #444; margin: .3rem 0 .6rem; }
.slider input { width: 100%; margin-top: .3rem; accent-color: #1d3557; }
.btns { display: flex; gap: .5rem; flex-wrap: wrap; }
button { font: 600 14px system-ui, sans-serif; padding: .45rem .9rem; border: 1px solid #1d3557;
background: #1d3557; color: #fff; border-radius: 8px; cursor: pointer; }
button.ghost { background: #fff; color: #1d3557; }
const fmt = (s, v) => s.replace(/%(\w+)%/g, (_, k) => String(v[k] ?? ''));
// The strength of a force carried by a particle of mass m falls off like the
// Yukawa potential: V(r) = exp(-m*r) / r. When m = 0 this is the long-range
// 1/r law (electromagnetism, gravity). Any m > 0 multiplies in an exponential
// decay e^(-m*r), so the force is "confined" to a range ~ 1/m: a MASS GAP.
// Proving real Yang-Mills theory forces m > 0 is the open Millennium problem.
const cv = document.getElementById('field');
const ctx = cv.getContext('2d');
const W = cv.width, H = cv.height;
const slider = document.getElementById('mass');
// Yukawa strength at distance r (in arbitrary units), mass m (slider 0..40 -> 0..2).
function strength(r, m) { return Math.exp(-m * r) / r; }
// Range where the force has dropped to 1/e of a near-source reference.
function rangeOf(m) { return m === 0 ? Infinity : 1 / m; }
function draw() {
const m = (+slider.value) / 20; // map slider 0..40 to mass 0..2
ctx.clearRect(0, 0, W, H);
// source at left-center
const x0 = 30, y0 = H / 2, rMax = 5; // r runs 0.1 .. rMax across the canvas
// reference strength just outside the source, used to normalize the plot height
const ref = strength(0.25, m);
// plot the falloff curve
ctx.beginPath();
for (let px = 0; px <= W - x0; px++) {
const r = 0.1 + (px / (W - x0)) * rMax;
const s = strength(r, m) / ref; // 0..~1
const y = y0 - Math.min(s, 1.6) * (H / 2 - 12);
if (px === 0) ctx.moveTo(x0 + px, y); else ctx.lineTo(x0 + px, y);
}
ctx.strokeStyle = m === 0 ? '#0a7d33' : '#e63946';
ctx.lineWidth = 2.5;
ctx.stroke();
// baseline + source dot
ctx.strokeStyle = '#adb1b8'; ctx.lineWidth = 1;
ctx.beginPath(); ctx.moveTo(x0, 8); ctx.lineTo(x0, H - 8); ctx.stroke();
ctx.fillStyle = '#1d3557';
ctx.beginPath(); ctx.arc(x0, y0, 6, 0, 7); ctx.fill();
const reach = rangeOf(m);
const ro = document.getElementById('readout');
if (m === 0) {
ro.textContent = 'm = 0 -> range = unlimited (long-range force)';
ro.style.color = '#0a7d33';
} else {
ro.textContent = fmt('m = %m% -> range ~ %reach% units (confined: a mass gap)', { m: m.toFixed(2), reach: reach.toFixed(2) });
ro.style.color = '#c92f3c';
}
}
slider.addEventListener('input', draw);
document.getElementById('massless').addEventListener('click', () => { slider.value = 0; draw(); });
document.getElementById('heavy').addEventListener('click', () => { slider.value = 24; draw(); });
document.getElementById('reset').addEventListener('click', () => { slider.value = 0; draw(); });
draw();
With mass set to zero, the force fades slowly — like electromagnetism, it reaches across the whole region. Give the carrier even a little mass and the curve collapses into a sharp spike that vanishes almost immediately: the force is now confined to a tiny range. Proving that real Yang-Mills theory forces a positive mass — a true gap, never zero — is exactly what the Millennium problem asks. The demo shows the consequence; the open question is why nature must obey it.
Comments
Loading comments...