mm/dr-sandbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

radio instead of slider for jitter

Browse Source
This commit is contained in:
Michael Pilosov 2026-04-21 18:27:55 -06:00
parent 1aa72d6412
commit 760bb0cdb1
1 changed files with 53 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
app/demo/index.html
View File

@ -89,6 +89,43 @@
accent-color: var(--accent);
height: 4px;
}
.segmented {
grid-column: 2 / -1;
display: grid;
grid-template-columns: repeat(6, 1fr);
border: 1px solid var(--hair);
background: var(--panel);
}
.segmented label {
font-family: "JetBrains Mono", "SF Mono", Menlo, Monaco, monospace;
font-size: 12px;
text-align: center;
padding: 7px 0;
cursor: pointer;
color: var(--muted);
border-left: 1px solid var(--hair);
transition: background 120ms ease, color 120ms ease;
user-select: none;
font-variant-numeric: tabular-nums;
position: relative;
}
.segmented label:first-of-type { border-left: none; }
.segmented label:hover { color: var(--text); background: rgba(31, 78, 95, 0.06); }
.segmented label:has(input:checked) {
background: var(--accent);
color: #fff;
}
.segmented label:has(input:focus-visible) {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.segmented input[type="radio"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
}
.lede kbd {
font-family: "JetBrains Mono", "SF Mono", Menlo, Monaco, monospace;
font-size: 12px;
@ -301,17 +338,15 @@
<input type="range" id="n-slider" min="100" max="5000" step="100" value="500">
<span class="ctl-value" id="n-value">500</span>
<label class="ctl-label" for="j-slider">noise σ</label>
<input type="range" id="j-slider" min="0" max="5" step="1" value="1" list="j-levels">
<datalist id="j-levels">
<option value="0"></option>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</datalist>
<span class="ctl-value" id="j-value">0.01</span>
<span class="ctl-label">noise σ</span>
<div class="segmented" role="radiogroup" aria-label="noise σ">
<label><input type="radio" name="j" value="0"><span>0.00</span></label>
<label><input type="radio" name="j" value="0.01" checked><span>0.01</span></label>
<label><input type="radio" name="j" value="0.05"><span>0.05</span></label>
<label><input type="radio" name="j" value="0.1"><span>0.10</span></label>
<label><input type="radio" name="j" value="0.15"><span>0.15</span></label>
<label><input type="radio" name="j" value="0.2"><span>0.20</span></label>
</div>
</div>
<div class="gallery" id="gallery">
@ -554,17 +589,18 @@ async function main() {
slider.addEventListener('input', (e) => applyN(parseInt(e.target.value, 10)));
applyN(parseInt(slider.value, 10));
// Noise slider → rewrites positions each frame in the render loop.
// Noise is a 6-level radio group; value is the σ directly.
let jitterScale = 0;
const jSlider = document.getElementById('j-slider');
const jValue = document.getElementById('j-value');
const jInputs = document.querySelectorAll('input[name="j"]');
function applyJ(v) {
jitterScale = v;
jValue.textContent = v.toFixed(2);
updateContinue();
}
jSlider.addEventListener('input', (e) => applyJ(parseFloat(e.target.value)));
applyJ(parseFloat(jSlider.value));
jInputs.forEach(input => {
input.addEventListener('change', (e) => applyJ(parseFloat(e.target.value)));
});
const jChecked = document.querySelector('input[name="j"]:checked');
applyJ(parseFloat(jChecked.value));
// Keyboard: digits jump directly, arrows step.
function selectByIndex(idx, { scroll = true } = {}) {