I made a tool that automatically brute-forces thousands of scale and slider combinations to give you the exact inputs needed to build canvas cubes to a precise centimeter dimension with zero guesswork. Or anything else that has the same base scale of a canvas cube (50x50x50).
if the site doesn’t work, here’s the raw text for it, you just save it as a .html file and double click it to run it on your browser locally.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Precision Architect</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
background-color: #111118;
color: #c8cfe6;
min-height: 100vh;
padding: 1.5rem;
}
.app {
max-width: 1100px;
margin: 0 auto;
}
/* ── Header ── */
header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.75rem;
}
header .icon {
width: 40px; height: 40px;
background: linear-gradient(135deg, #c084fc, #818cf8);
border-radius: 10px;
display: grid; place-items: center;
font-size: 1.25rem;
flex-shrink: 0;
}
header h1 {
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(135deg, #e0b0ff, #93a4f8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
header p {
font-size: 0.8rem;
color: #6b7394;
margin-top: 0.1rem;
}
/* ── Card ── */
.card {
background: #181a25;
border: 1px solid #252838;
border-radius: 14px;
padding: 1.5rem;
margin-bottom: 1rem;
}
/* ── Input Row ── */
.input-row {
display: flex;
gap: 0.625rem;
flex-wrap: wrap;
align-items: flex-end;
}
.field {
display: flex;
flex-direction: column;
gap: 0.35rem;
flex: 1;
min-width: 180px;
}
.field label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7394;
}
.field .hint {
font-size: 0.65rem;
color: #4b5578;
margin-top: 0.1rem;
}
input {
padding: 0.6rem 0.75rem;
border-radius: 8px;
border: 1px solid #2d3148;
background: #12131d;
color: #dde2f0;
font-size: 0.95rem;
transition: border-color 0.15s;
width: 100%;
}
input:focus {
outline: none;
border-color: #818cf8;
box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}
input.error {
border-color: #f87171;
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}
.eval-preview {
font-size: 0.72rem;
color: #818cf8;
min-height: 1.1em;
margin-top: 0.2rem;
font-variant-numeric: tabular-nums;
}
.eval-preview.err { color: #f87171; }
/* ── Buttons ── */
.btn {
padding: 0.6rem 1.25rem;
border-radius: 8px;
border: none;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.btn-primary {
background: linear-gradient(135deg, #a78bfa, #818cf8);
color: #0f0f1a;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(129, 140, 248, 0.35);
}
.btn-primary:active { transform: translateY(0); }
/* ── Dual columns ── */
.dual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
/* ── Section label ── */
.section-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.6rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.section-label.wh { color: #818cf8; }
.section-label.depth { color: #c084fc; }
.section-dot {
width: 8px; height: 8px;
border-radius: 50%;
display: inline-block;
}
.section-dot.wh { background: #818cf8; }
.section-dot.depth { background: #c084fc; }
/* ── Hero result ── */
.hero {
background: linear-gradient(135deg, rgba(129, 140, 248, 0.08), rgba(167, 139, 250, 0.06));
border: 1px solid rgba(129, 140, 248, 0.2);
border-radius: 12px;
padding: 1rem 1.25rem;
animation: fadeIn 0.3s ease;
}
.hero.depth-hero {
background: linear-gradient(135deg, rgba(192, 132, 252, 0.08), rgba(167, 139, 250, 0.06));
border-color: rgba(192, 132, 252, 0.2);
}
.hero-label {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #818cf8;
margin-bottom: 0.5rem;
}
.hero.depth-hero .hero-label { color: #c084fc; }
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.hero-stat .value {
font-size: 1.15rem;
font-weight: 700;
color: #e8ecf8;
font-variant-numeric: tabular-nums;
}
.hero-stat .label {
font-size: 0.68rem;
color: #6b7394;
margin-top: 0.1rem;
}
.hero-stat .value.perfect { color: #6ee7a0; }
/* ── Results table ── */
.table-card {
background: #181a25;
border: 1px solid #252838;
border-radius: 14px;
overflow: hidden;
}
.table-card .table-header {
padding: 1rem 1rem 0;
}
.table-wrap {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
font-size: 0.82rem;
}
thead th {
position: sticky;
top: 0;
background: #1c1e2c;
padding: 0.55rem 0.7rem;
text-align: left;
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7394;
border-bottom: 1px solid #252838;
}
tbody td {
padding: 0.5rem 0.7rem;
border-bottom: 1px solid #1e2030;
}
tbody tr { transition: background 0.1s; }
tbody tr:hover { background: rgba(129, 140, 248, 0.04); }
tbody tr:last-child td { border-bottom: none; }
/* ── Copyable cell ── */
.copyable {
cursor: pointer;
position: relative;
border-radius: 4px;
transition: background 0.15s, color 0.15s;
padding: 0.15rem 0.3rem;
margin: -0.15rem -0.3rem;
display: inline-block;
}
.copyable:hover {
background: rgba(129, 140, 248, 0.1);
color: #a5b4fc;
}
.copyable.flash {
background: rgba(110, 231, 160, 0.2);
color: #6ee7a0;
}
/* ── Error bar ── */
.error-cell {
display: flex;
align-items: center;
gap: 0.4rem;
}
.error-bar-bg {
width: 40px;
height: 5px;
background: #1e2030;
border-radius: 3px;
overflow: hidden;
flex-shrink: 0;
}
.error-bar-fill {
height: 100%;
border-radius: 3px;
}
/* ── Row rank badge ── */
.rank {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
border-radius: 5px;
font-size: 0.65rem;
font-weight: 700;
background: #1e2030;
color: #6b7394;
}
.rank.gold { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.rank.silver { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }
.rank.bronze { background: rgba(217, 119, 6, 0.12); color: #d97706; }
/* ── Perfect match ── */
tr.perfect td { color: #6ee7a0; }
tr.perfect .rank { background: rgba(110, 231, 160, 0.15); color: #6ee7a0; }
/* ── Empty state ── */
.empty-state {
text-align: center;
padding: 2rem 1rem;
color: #4b5578;
font-size: 0.85rem;
}
/* ── Toast ── */
.toast {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: #2d3148;
color: #dde2f0;
padding: 0.55rem 1.1rem;
border-radius: 8px;
font-size: 0.82rem;
font-weight: 500;
opacity: 0;
pointer-events: none;
transition: all 0.25s ease;
z-index: 100;
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ── Footer stats ── */
.footer-stats {
display: flex;
justify-content: space-between;
font-size: 0.68rem;
color: #4b5578;
padding: 0.5rem 0.7rem;
}
/* ── Loading spinner ── */
.loading {
display: none;
text-align: center;
padding: 1.5rem;
color: #6b7394;
font-size: 0.85rem;
}
.loading.active { display: block; }
.spinner {
display: inline-block;
width: 22px; height: 22px;
border: 3px solid #252838;
border-top-color: #818cf8;
border-radius: 50%;
animation: spin 0.7s linear infinite;
margin-bottom: 0.4rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Responsive ── */
@media (max-width: 700px) {
body { padding: 1rem 0.75rem; }
.dual { grid-template-columns: 1fr; }
.card { padding: 1rem; }
.hero-stat .value { font-size: 1rem; }
}
</style>
</head>
<body>
<div class="app">
<header>
<div class="icon">◍</div>
<div>
<h1>Precision Architect</h1>
<p>Find the best scale & slider to hit your target dimension</p>
</div>
</header>
<!-- Input -->
<div class="card">
<div class="input-row">
<div class="field">
<label for="targetCm">Target (cm)</label>
<input type="text" id="targetCm" placeholder="e.g. 2.94 or sqrt(8.6436)" value="2.94" autocomplete="off" spellcheck="false">
<div class="eval-preview" id="evalPreview"></div>
<div class="hint">Supports math: sqrt(x), pow(x,y), +, -, *, /, parentheses</div>
</div>
<div style="flex: 0 0 auto; align-self: flex-start; padding-top: 1.45rem;">
<button class="btn btn-primary" onclick="calculatePrecision()">Calculate</button>
</div>
</div>
</div>
<!-- Loading -->
<div class="loading" id="loading">
<div class="spinner"></div>
<div>Sweeping 100,000 scale values...</div>
</div>
<!-- Results: dual columns -->
<div id="resultsArea" style="display:none;">
<!-- Hero cards -->
<div class="dual" style="margin-bottom: 1rem;">
<div class="hero" id="heroWH">
<div class="hero-label">Best match — Width / Height</div>
<div class="hero-grid">
<div class="hero-stat">
<div class="value copyable" id="heroScaleWH" onclick="copyEl(this)">-</div>
<div class="label">Scale</div>
</div>
<div class="hero-stat">
<div class="value copyable" id="heroSliderWH" onclick="copyEl(this)">-</div>
<div class="label">Slider</div>
</div>
<div class="hero-stat">
<div class="value copyable" id="heroCalcWH" onclick="copyEl(this)">-</div>
<div class="label">Result (cm)</div>
</div>
<div class="hero-stat">
<div class="value" id="heroErrorWH">-</div>
<div class="label">Error</div>
</div>
</div>
</div>
<div class="hero depth-hero" id="heroDepth">
<div class="hero-label">Best match — Depth</div>
<div class="hero-grid">
<div class="hero-stat">
<div class="value copyable" id="heroScaleD" onclick="copyEl(this)">-</div>
<div class="label">Scale</div>
</div>
<div class="hero-stat">
<div class="value copyable" id="heroSliderD" onclick="copyEl(this)">-</div>
<div class="label">Slider</div>
</div>
<div class="hero-stat">
<div class="value copyable" id="heroCalcD" onclick="copyEl(this)">-</div>
<div class="label">Result (cm)</div>
</div>
<div class="hero-stat">
<div class="value" id="heroErrorD">-</div>
<div class="label">Error</div>
</div>
</div>
</div>
</div>
<!-- Tables -->
<div class="dual">
<div class="table-card">
<div class="table-header">
<div class="section-label wh"><span class="section-dot wh"></span> Width / Height (X/Y)</div>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th style="width:30px">#</th>
<th>Scale</th>
<th>Slider</th>
<th>Result</th>
<th>Error</th>
</tr>
</thead>
<tbody id="bodyWH"></tbody>
</table>
</div>
<div class="footer-stats" id="footerWH"></div>
</div>
<div class="table-card">
<div class="table-header">
<div class="section-label depth"><span class="section-dot depth"></span> Depth (Z)</div>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th style="width:30px">#</th>
<th>Scale</th>
<th>Slider</th>
<th>Result</th>
<th>Error</th>
</tr>
</thead>
<tbody id="bodyDepth"></tbody>
</table>
</div>
<div class="footer-stats" id="footerDepth"></div>
</div>
</div>
</div>
</div>
<div class="toast" id="toast">Copied!</div>
<script>
// ── Safe math expression evaluator ──
function evalMath(expr) {
if (typeof expr !== 'string') return NaN;
let s = expr.trim();
if (!s) return NaN;
s = s.replace(/\bsqrt\b/g, 'Math.sqrt');
s = s.replace(/\bpow\b/g, 'Math.pow');
s = s.replace(/\bcbrt\b/g, 'Math.cbrt');
s = s.replace(/\babs\b/g, 'Math.abs');
s = s.replace(/\bceil\b/g, 'Math.ceil');
s = s.replace(/\bfloor\b/g, 'Math.floor');
s = s.replace(/\bround\b/g, 'Math.round');
s = s.replace(/\blog10\b/g, 'Math.log10');
s = s.replace(/\blog2\b/g, 'Math.log2');
s = s.replace(/\blog\b/g, 'Math.log');
s = s.replace(/\bsin\b/g, 'Math.sin');
s = s.replace(/\bcos\b/g, 'Math.cos');
s = s.replace(/\btan\b/g, 'Math.tan');
s = s.replace(/\bpi\b/gi, 'Math.PI');
s = s.replace(/\bmin\b/g, 'Math.min');
s = s.replace(/\bmax\b/g, 'Math.max');
const sanitized = s.replace(/Math\.\w+/g, '').replace(/[0-9+\-*/().,%\s]/g, '');
if (sanitized.length > 0) return NaN;
try {
const result = Function('"use strict"; return (' + s + ')')();
if (typeof result !== 'number' || !isFinite(result)) return NaN;
return result;
} catch {
return NaN;
}
}
// ── Live preview ──
const targetInput = document.getElementById('targetCm');
const evalPreview = document.getElementById('evalPreview');
function updatePreview() {
const raw = targetInput.value.trim();
if (!raw || /^-?\d*\.?\d+$/.test(raw)) {
evalPreview.textContent = '';
evalPreview.className = 'eval-preview';
targetInput.classList.remove('error');
return;
}
const val = evalMath(raw);
if (isNaN(val)) {
evalPreview.textContent = 'Invalid expression';
evalPreview.className = 'eval-preview err';
targetInput.classList.add('error');
} else {
evalPreview.textContent = '= ' + val;
evalPreview.className = 'eval-preview';
targetInput.classList.remove('error');
}
}
targetInput.addEventListener('input', updatePreview);
// ── Enter key ──
targetInput.addEventListener('keydown', e => {
if (e.key === 'Enter') calculatePrecision();
});
// ── Copy helpers ──
function copyText(text) {
const clean = text.trim();
navigator.clipboard.writeText(clean).then(() => {
showToast('Copied: ' + clean);
}).catch(() => {
const ta = document.createElement('textarea');
ta.value = clean;
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
showToast('Copied: ' + clean);
});
}
function copyEl(el) {
const text = el.textContent.trim();
if (text === '-' || text === 'Perfect') return;
copyText(text);
el.classList.add('flash');
setTimeout(() => el.classList.remove('flash'), 400);
}
function showToast(msg) {
const toast = document.getElementById('toast');
toast.textContent = msg;
toast.classList.add('show');
clearTimeout(toast._t);
toast._t = setTimeout(() => toast.classList.remove('show'), 1800);
}
// ── Constants ──
const SCALE_MIN = 1;
const SCALE_MAX = 100000;
const SD = 7; // slider decimals
// ── Compute for one scale ──
function compute(scaleInt, target, axis) {
const scale = scaleInt / 100;
let slider;
if (axis === 'wh') {
slider = ((target / scale) - 12.5) / 37.5;
} else {
slider = ((target / scale) - 5) / 45.0;
}
if (slider < 0.0 || slider > 1.0) return null;
const sr = parseFloat(slider.toFixed(SD));
if (sr < 0.0 || sr > 1.0) return null;
let calc;
if (axis === 'wh') {
calc = scale * (37.5 * sr + 12.5);
} else {
calc = scale * (45.0 * sr + 5);
}
return { scale, slider: sr, calculated: calc, error: Math.abs(calc - target) };
}
// ── Sweep one axis ──
function sweepAxis(target, axis) {
let results = [];
let count = 0;
for (let s = SCALE_MIN; s <= SCALE_MAX; s++) {
count++;
const res = compute(s, target, axis);
if (res) results.push(res);
}
results.sort((a, b) => a.error - b.error);
return { results, count };
}
// ── Render table ──
function renderTable(results, tbody, footer, count, elapsed) {
tbody.innerHTML = '';
const topN = 25;
const displayed = results.slice(0, topN);
const maxErr = displayed.length > 0 ? Math.max(...displayed.map(r => r.error), 1e-10) : 1;
if (displayed.length === 0) {
tbody.innerHTML = '<tr><td colspan="5"><div class="empty-state">No valid combinations found.</div></td></tr>';
footer.innerHTML = `<span>${count.toLocaleString()} checked</span><span>0 valid</span>`;
return null;
}
displayed.forEach((res, idx) => {
const tr = document.createElement('tr');
const perf = res.error < 5e-8;
if (perf) tr.className = 'perfect';
let rc = '';
if (idx === 0) rc = ' gold';
else if (idx === 1) rc = ' silver';
else if (idx === 2) rc = ' bronze';
const ratio = maxErr > 1e-10 ? res.error / maxErr : 0;
let bc;
if (perf) bc = '#6ee7a0';
else if (ratio < 0.25) bc = '#4ade80';
else if (ratio < 0.5) bc = '#facc15';
else if (ratio < 0.75) bc = '#fb923c';
else bc = '#f87171';
const bw = perf ? 0 : Math.max(2, ratio * 100);
tr.innerHTML = `
<td><span class="rank${rc}">${idx + 1}</span></td>
<td><span class="copyable" onclick="copyEl(this)">${res.scale.toFixed(2)}</span></td>
<td><span class="copyable" onclick="copyEl(this)" style="font-weight:600">${res.slider.toFixed(SD)}</span></td>
<td><span class="copyable" onclick="copyEl(this)">${res.calculated.toFixed(SD)}</span></td>
<td>
<div class="error-cell">
<div class="error-bar-bg"><div class="error-bar-fill" style="width:${bw}%;background:${bc}"></div></div>
<span>${perf ? 'Perfect' : res.error.toFixed(SD)}</span>
</div>
</td>
`;
tbody.appendChild(tr);
});
footer.innerHTML = `<span>${count.toLocaleString()} checked · ${elapsed} ms</span><span>${results.length.toLocaleString()} valid · top ${displayed.length}</span>`;
return displayed[0];
}
// ── Fill hero ──
function fillHero(best, prefix) {
const perf = best.error < 5e-8;
const scaleEl = document.getElementById('heroScale' + prefix);
const sliderEl = document.getElementById('heroSlider' + prefix);
const calcEl = document.getElementById('heroCalc' + prefix);
const errorEl = document.getElementById('heroError' + prefix);
scaleEl.textContent = best.scale.toFixed(2);
sliderEl.textContent = best.slider.toFixed(SD);
sliderEl.className = 'value copyable' + (perf ? ' perfect' : '');
calcEl.textContent = best.calculated.toFixed(SD);
errorEl.textContent = perf ? 'Perfect' : best.error.toFixed(SD);
errorEl.className = 'value' + (perf ? ' perfect' : '');
}
// ── Main ──
function calculatePrecision() {
const rawInput = targetInput.value.trim();
const isPlain = /^-?\d*\.?\d+$/.test(rawInput);
let target = isPlain ? parseFloat(rawInput) : evalMath(rawInput);
const resultsArea = document.getElementById('resultsArea');
const loading = document.getElementById('loading');
resultsArea.style.display = 'none';
if (isNaN(target) || target <= 0) {
document.getElementById('bodyWH').innerHTML = '<tr><td colspan="5"><div class="empty-state">Enter a positive target dimension.</div></td></tr>';
document.getElementById('bodyDepth').innerHTML = '<tr><td colspan="5"><div class="empty-state">Enter a positive target dimension.</div></td></tr>';
resultsArea.style.display = 'block';
return;
}
loading.classList.add('active');
requestAnimationFrame(() => {
setTimeout(() => {
// Sweep W/H
const t0wh = performance.now();
const wh = sweepAxis(target, 'wh');
const elWH = (performance.now() - t0wh).toFixed(1);
// Sweep Depth
const t0d = performance.now();
const d = sweepAxis(target, 'depth');
const elD = (performance.now() - t0d).toFixed(1);
loading.classList.remove('active');
resultsArea.style.display = 'block';
const bestWH = renderTable(wh.results, document.getElementById('bodyWH'), document.getElementById('footerWH'), wh.count, elWH);
const bestD = renderTable(d.results, document.getElementById('bodyDepth'), document.getElementById('footerDepth'), d.count, elD);
if (bestWH) fillHero(bestWH, 'WH');
if (bestD) fillHero(bestD, 'D');
}, 10);
});
}
// Run on load
calculatePrecision();
</script>
</body>
</html>
hopefully someone finds this useful