Two points · Straight-line distance

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Two points · Straight-line distance</title><style>*{box-sizing:border-box}body{margin:0;background:#f1f3f5;color:#223040;font:16px/1.5 system-ui,sans-serif}main{max-width:1120px;margin:auto;padding:32px 28px 64px}h1{font-size:clamp(28px,4vw,40px);line-height:1.15;letter-spacing:-.035em;margin:6px 0 12px}h2{font-size:21px;line-height:1.3;margin:0 0 16px}h3{font-size:16px;margin:0 0 8px}p{margin:8px 0 16px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:750;color:#526b83}.lede,.muted{color:#5a6a79}.small,small{font-size:13px;color:#5a6a79}.panel{border:1px solid #d6dfe5;border-radius:14px;padding:24px;background:white;margin:20px 0}.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.big{font-size:clamp(30px,4.8vw,54px);font-weight:750;letter-spacing:-.045em;line-height:1.2}.badge{display:inline-block;border-radius:20px;padding:4px 10px;font-size:12px;background:#e7edf4;color:#36546e;font-weight:700}.line{border-top:1px solid #dce3e8;margin-top:16px;padding-top:16px}label{display:block;font-size:14px;font-weight:650;margin:12px 0 6px}input,textarea,select,button{font:inherit}input,textarea,select{width:100%;min-height:44px;border:1px solid #a9b9c7;border-radius:7px;padding:10px;background:white;color:#223040}textarea{min-height:86px;resize:vertical}button{min-height:44px;padding:9px 14px;border:1px solid #879aac;border-radius:7px;background:#fff;color:#244966;cursor:pointer}button.primary{background:#244e72;border-color:#244e72;color:white}button:disabled{opacity:.48;cursor:default}:focus-visible{outline:3px solid #d47728;outline-offset:3px}input[type=checkbox]{width:20px;min-height:20px;height:20px;accent-color:#244e72}.check{display:flex;gap:12px;align-items:flex-start;font-weight:500}.check input{flex-shrink:0;margin-top:2px}.error{min-height:24px;color:#a33d22}.record,pre{font:13px/1.65 ui-monospace,monospace;background:#f0f3f6;border-radius:8px;padding:16px;white-space:pre-wrap;overflow-wrap:anywhere}details{margin:20px 0}summary{font-weight:650;cursor:pointer;min-height:44px}svg{display:block;width:100%;height:auto}[hidden]{display:none!important}@media(max-width:720px){main{padding:22px 16px 48px}.split{grid-template-columns:1fr;gap:0}.panel{padding:18px;margin:16px 0}.big{font-size:38px}}@media(max-width:400px){main{padding:18px 14px}.panel{padding:16px}h1{font-size:29px}.row>button{flex:1}.fields{gap:10px}}.answer{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid #c7d6e2;border-radius:16px;margin:22px 0;background:#fff}.answerText{padding:30px;background:#1b3f5d;color:white}.answerText #result{overflow-wrap:anywhere}.answerText #pair{color:#d1dfeb}.plotSide{padding:18px}.plotSide p{margin:0 8px 4px}.deltas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:26px 0}.deltas small{color:#bbd0e0;display:block}.deltas strong{display:block;font:600 23px/1.4 ui-monospace,monospace;overflow-wrap:anywhere}.formula{border-top:1px solid #51728b;padding-top:16px;font:17px/1.5 ui-monospace,monospace;overflow-wrap:anywhere}fieldset{border:1px solid #d3dfe8;border-radius:10px;padding:4px 16px 16px;min-width:0}legend{font-weight:700;padding:0 7px}@media(max-width:720px){.answer{grid-template-columns:1fr}.answerText{padding:22px}.plotSide svg{max-height:300px}.split fieldset+fieldset{margin-top:16px}.deltas{margin:20px 0}.big{font-size:35px}}@media(max-width:400px){.answerText{padding:18px}.deltas strong{font-size:21px}.big{font-size:32px}}</style></head><body><main><div class="eyebrow">Coordinate geometry · Two-dimensional plane</div><h1>The straight line between A and B</h1><p class="lede">Find distance from the horizontal and vertical differences on a common, equally scaled plane.</p><section class="answer"><div class="answerText"><div class="eyebrow" style="color:#b9d2e7">Euclidean distance</div><div id="result" class="big" aria-live="polite">5 coordinate units</div><p id="pair">A (−2, 1) → B (1, 5)</p><div class="deltas"><div><small>Δx</small><strong id="dx">3</strong></div><div><small>Δy</small><strong id="dy">4</strong></div><div><small>Squared sum</small><strong id="sum">25</strong></div></div><p id="formula" class="formula">√(3² + 4²) = 5</p></div><div class="plotSide"><div id="diagram"></div><p class="small" id="plotNote">Equal display scale on both axes · coordinate units</p></div></section><section class="panel"><h2>Enter the two ordered pairs</h2><div class="split"><fieldset><legend>Point A</legend><div class="fields"><div><label for="x1">x₁</label><input id="x1" value="-2" inputmode="decimal"></div><div><label for="y1">y₁</label><input id="y1" value="1" inputmode="decimal"></div></div></fieldset><fieldset><legend>Point B</legend><div class="fields"><div><label for="x2">x₂</label><input id="x2" value="1" inputmode="decimal"></div><div><label for="y2">y₂</label><input id="y2" value="5" inputmode="decimal"></div></div></fieldset></div><div class="split"><div><label for="unit">Common coordinate unit</label><select id="unit"><option value="units">Coordinate units</option><option value="cm">Centimeters (cm)</option><option value="m">Meters (m)</option><option value="ft">Feet (ft)</option></select></div><div><label class="check" for="basis"><input id="basis" type="checkbox" checked><span>I confirm both axes use this same unit and the same coordinate scale.</span></label></div></div><div class="row" style="margin-top:18px"><button class="primary" id="calculate">Calculate distance</button><button id="swap">Swap points</button><button id="reset">Reset</button></div><p id="error" class="error" role="status"></p><p class="small">Signed dot decimals with a leading digit, up to six decimal places and magnitude ≤ 10,000. Choosing a unit labels the coordinates; it does not convert them.</p></section><details open><summary>Calculation record</summary><pre id="record"></pre></details><details><summary>What this distance means</summary><p id="comparison">Horizontal-plus-vertical travel totals 7 coordinate units. It answers a different question from the 5-unit straight line.</p><p>This helper uses a rectangular 2D Euclidean plane. Latitude/longitude, years versus dollars, routes, projections and survey measurements require different models. The diagram fits the view uniformly without changing input coordinates; its pixel length is not measurement evidence. Very small differences may look coincident at the displayed scale; the text record retains their values. Non-square roots are approximate, rounded to six decimal places; this is not a general radical simplifier. Changes stay in this page until reload.</p></details></main><script>const $=id=>document.getElementById(id),put=(id,v)=>$(id).textContent=String(v),esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
const units={units:'coordinate units',cm:'cm',m:'m',ft:'ft'},M=1000000n;let current=null;
function parse(raw,field){const s=String(raw);if(!/^[+-]?[0-9]+(?:[.][0-9]{1,6})?$/.test(s)||s.length>40){const e=Error(field+': enter a signed dot decimal with a leading digit and at most six decimal places.');e.field=field;throw e}const negative=s[0]==='-',a=s.replace(/^[+-]/,'').split('.'),n=(BigInt(a[0])*M+BigInt((a[1]||'').padEnd(6,'0')))*(negative?-1n:1n);if(n>10000n*M||n< -10000n*M){const e=Error(field+': magnitude must not exceed 10,000.');e.field=field;throw e}return n}
function decimal(n,places){const neg=n<0n;if(neg)n=-n;let s=n.toString().padStart(places+1,'0');if(places)s=s.slice(0,-places)+'.'+s.slice(-places);if(s.includes('.'))s=s.replace(/0+$/,'').replace(/[.]$/,'');return(neg?'-':'')+s}
function isqrt(n){if(n<0n)throw Error('Negative square root.');if(n<2n)return n;let x=n,y=(x+1n)/2n;while(y<x){x=y;y=(x+n/x)/2n}return x}
function calculate(values,unit,basis){if(!Object.hasOwn(units,unit)){const e=Error('Choose a supported common unit.');e.field='unit';throw e}if(basis!==true){const e=Error('Confirm a common unit and equal axis scale before calculating.');e.field='basis';throw e}const a=Object.fromEntries(['x1','y1','x2','y2'].map(k=>[k,parse(values[k],k)])),dx=a.x2-a.x1,dy=a.y2-a.y1,sx=dx*dx,sy=dy*dy,sum=sx+sy,root=isqrt(sum),exact=root*root===sum,d=Math.sqrt(Number(sum))/1e6;return{...a,dx,dy,sx,sy,sum,root,exact,d,unit,raw:{...values}}}
const dist=r=>r.exact?decimal(r.root,6):'≈ '+r.d.toFixed(6);function geometry(r){const x1=Number(r.x1)/1e6,x2=Number(r.x2)/1e6,y1=Number(r.y1)/1e6,y2=Number(r.y2)/1e6,cx=(x1+x2)/2,cy=(y1+y2)/2,scale=Math.min(280/Math.max(Math.abs(x2-x1),2),200/Math.max(Math.abs(y2-y1),2)),point=(x,y)=>({x:210+(x-cx)*scale,y:150-(y-cy)*scale});return{a:point(x1,y1),b:point(x2,y2),corner:point(x2,y1),origin:point(0,0),scale}}
function plot(r){const g=geometry(r),a=g.a,b=g.b,c=g.corner,same=r.sum===0n;let svg='<svg viewBox="0 0 420 310" role="img" aria-label="'+(same?'Coincident points A and B; zero distance.':'Original equal-scale diagram of A, B, their straight segment and perpendicular delta legs.')+'"><rect x="20" y="20" width="380" height="270" rx="10" fill="#f1f5f8"/>';for(let i=50;i<390;i+=30)svg+='<path d="M'+i+' 30V280" stroke="#e1e8ee"/>';for(let i=40;i<280;i+=30)svg+='<path d="M30 '+i+'H390" stroke="#e1e8ee"/>';if(g.origin.y>=35&&g.origin.y<=265)svg+='<path d="M30 '+g.origin.y+'H390" stroke="#a5b8c9"/>';if(g.origin.x>=35&&g.origin.x<=385)svg+='<path d="M'+g.origin.x+' 30V280" stroke="#a5b8c9"/>';svg+='<text x="366" y="304" font-size="12" fill="#506a80">x →</text><text x="4" y="24" font-size="12" fill="#506a80">y ↑</text>';if(!same)svg+='<path d="M'+a.x+' '+a.y+'L'+c.x+' '+c.y+'L'+b.x+' '+b.y+'" fill="none" stroke="#bc7a2f" stroke-width="2" stroke-dasharray="5 5"/><path d="M'+a.x+' '+a.y+'L'+b.x+' '+b.y+'" stroke="#285d86" stroke-width="4"/><circle cx="'+b.x+'" cy="'+b.y+'" r="5" fill="#285d86"/><text x="'+(b.x+8)+'" y="'+(b.y-9)+'" font-size="15" fill="#244766">B</text>';svg+='<circle cx="'+a.x+'" cy="'+a.y+'" r="5" fill="#285d86"/><text x="'+(a.x+8)+'" y="'+(a.y+21)+'" font-size="15" fill="#244766">'+(same?'A = B':'A')+'</text></svg>';return svg}
function clear(){current=null;put('result','—');for(const id of ['pair','dx','dy','sum','formula','record','comparison','plotNote','error'])put(id,'');$('diagram').innerHTML='';$('swap').disabled=true}
function show(){clear();try{const v=Object.fromEntries(['x1','y1','x2','y2'].map(k=>[k,$(k).value])),r=calculate(v,$('unit').value,$('basis').checked),u=units[r.unit],dx=decimal(r.dx,6),dy=decimal(r.dy,6),sum=decimal(r.sum,12);current=r;put('result',dist(r)+' '+u);put('pair','A ('+v.x1+', '+v.y1+') → B ('+v.x2+', '+v.y2+')');put('dx',dx);put('dy',dy);put('sum',sum);put('formula','√(('+dx+')² + ('+dy+')²) '+(r.exact?'= ':'≈ ')+(r.exact?decimal(r.root,6):r.d.toFixed(6)));$('diagram').innerHTML=plot(r);put('plotNote','Equal display scale on both axes · '+u);put('comparison','Horizontal-plus-vertical distance: '+decimal((r.dx<0n?-r.dx:r.dx)+(r.dy<0n?-r.dy:r.dy),6)+' '+u+'. This differs from straight-line distance and does not infer a real route.');const lines=['A = ('+v.x1+', '+v.y1+'); B = ('+v.x2+', '+v.y2+')','Common basis: '+u+' on both axes, equal scale confirmed.','Δx = '+v.x2+' − ('+v.x1+') = '+dx+' '+u,'Δy = '+v.y2+' − ('+v.y1+') = '+dy+' '+u,'S = ('+dx+')² + ('+dy+')² = '+decimal(r.sx,12)+' + '+decimal(r.sy,12)+' = '+sum+' squared '+u,'d = √('+sum+') '+(r.exact?'= ':'≈ ')+(r.exact?decimal(r.root,6):r.d.toFixed(6))+' '+u];put('record',lines.join(String.fromCharCode(10)));$('swap').disabled=false}catch(e){put('error',e.message);if(e.field)$(e.field).focus()}}
for(const id of ['x1','y1','x2','y2','unit','basis'])$(id).addEventListener(id==='unit'||id==='basis'?'change':'input',clear);$('calculate').addEventListener('click',show);$('swap').addEventListener('click',()=>{if(!current)return;for(const [a,b]of [['x1','x2'],['y1','y2']]){const v=$(a).value;$(a).value=$(b).value;$(b).value=v}show()});$('reset').addEventListener('click',()=>{for(const id of ['x1','y1','x2','y2'])$(id).value='';$('basis').checked=false;$('unit').value='units';clear();$('x1').focus()});globalThis.Tool={parse,calculate,decimal,geometry,plot,isqrt,getResult:()=>current};show();</script></body></html>