diff --git a/public/color-rings.html b/public/color-rings.html index dee0328..4b873e0 100644 --- a/public/color-rings.html +++ b/public/color-rings.html @@ -14,24 +14,37 @@

Color rings

Three colors. One quiet experiment.

Three concentric color rings - Clay on the outside, ochre in the middle, dusty slate blue inside. The intensity control changes their saturation. - + Clay on the outside, ochre in the middle, dusty slate blue inside. The controls change their saturation, gap, thickness, and rotation. +
-
125%
+
125%
+ +
10
+ + + +
40
+ + + +
0°
+ + +
Clay · outer
#D37E6C
Ochre · middle
#E2BB6D
Slate blue · inner
#8AA8BA
-

100% is the original palette. Hue and HSL lightness stay fixed; saturation stops at 100%. Readouts are the exact sRGB hex colors shown.

- +

100% intensity is the original palette. Hue and HSL lightness stay fixed; saturation stops at 100%. Gap compresses or expands the space between rings; thickness changes stroke width; rotation spins the whole mark. Readouts are the exact sRGB hex colors shown.

+
diff --git a/public/color-rings.js b/public/color-rings.js index eb2177d..86bb19a 100644 --- a/public/color-rings.js +++ b/public/color-rings.js @@ -1,8 +1,22 @@ (() => { - const slider = document.querySelector('#intensity'); - const output = document.querySelector('#intensity-value'); + const intensity = document.querySelector('#intensity'); + const intensityOut = document.querySelector('#intensity-value'); + const gap = document.querySelector('#gap'); + const gapOut = document.querySelector('#gap-value'); + const weight = document.querySelector('#weight'); + const weightOut = document.querySelector('#weight-value'); + const rotation = document.querySelector('#rotation'); + const rotationOut = document.querySelector('#rotation-value'); + const ringsGroup = document.querySelector('#rings-group'); const bases = { clay: '#C98576', ochre: '#D6B779', slate: '#8FA7B5' }; + // Radii at gap=10, weight=40 — the deployed mark. The gap slider moves the + // middle and inner rings radially; thickness and rotation are independent. + const OUTER_R = 250; + const MIDDLE_R = 180; + const INNER_R = 110; + const BASE_GAP = 10; + function toHsl(hex) { const [r, g, b] = hex.match(/[a-f\d]{2}/gi).map(v => parseInt(v, 16) / 255); const max = Math.max(r, g, b), min = Math.min(r, g, b); @@ -24,21 +38,47 @@ } function render() { - const intensity = Number(slider.value); - output.value = `${intensity}%`; - slider.setAttribute('aria-valuetext', `${intensity}% of original saturation`); + const pct = Number(intensity.value); + const gapValue = Number(gap.value); + const weightValue = Number(weight.value); + const rotationValue = Number(rotation.value); + + intensityOut.value = `${pct}%`; + gapOut.value = String(gapValue); + weightOut.value = String(weightValue); + rotationOut.value = `${rotationValue}°`; + intensity.setAttribute('aria-valuetext', `${pct}% of original saturation`); + + // Radial geometry: outer ring stays fixed at the canvas edge; the extra + // gap compresses inward so the mark never clips the viewBox. + const extra = gapValue - BASE_GAP; + const radii = { + clay: OUTER_R, + ochre: Math.max(INNER_R / 2, MIDDLE_R - extra), + slate: Math.max(INNER_R / 4, INNER_R - 2 * extra) + }; + + ringsGroup.setAttribute('stroke-width', String(weightValue)); + ringsGroup.setAttribute('transform', `rotate(${rotationValue} 300 300)`); + for (const [name, base] of Object.entries(bases)) { const [h, s, l] = toHsl(base); - const hex = toHex([h, Math.min(1, s * intensity / 100), l]); - document.querySelector(`#ring-${name}`).setAttribute('stroke', hex); + const hex = toHex([h, Math.min(1, s * pct / 100), l]); + const ring = document.querySelector(`#ring-${name}`); + ring.setAttribute('r', String(radii[name])); + ring.setAttribute('stroke', hex); document.querySelector(`#hex-${name}`).textContent = hex; } } - slider.addEventListener('input', render); + for (const input of [intensity, gap, weight, rotation]) { + input.addEventListener('input', render); + } document.querySelector('.controls').addEventListener('reset', event => { event.preventDefault(); - slider.value = slider.defaultValue; + for (const input of [intensity, gap, weight, rotation]) { + input.value = input.defaultValue; + } render(); }); render(); diff --git a/scripts/color-rings.test.mjs b/scripts/color-rings.test.mjs index 866c93a..48517ec 100644 --- a/scripts/color-rings.test.mjs +++ b/scripts/color-rings.test.mjs @@ -3,19 +3,33 @@ import assert from 'node:assert/strict'; import { readFileSync } from 'node:fs'; import vm from 'node:vm'; -test('color rings preserve the base palette, stay in sRGB, and reset', () => { +const INPUTS = ['#intensity', '#gap', '#weight', '#rotation']; + +function makeHarness() { const elements = new Map(); const element = selector => { if (!elements.has(selector)) elements.set(selector, { - value: '125', defaultValue: '125', attributes: {}, listeners: {}, + value: undefined, defaultValue: undefined, attributes: {}, listeners: {}, setAttribute(key, value) { this.attributes[key] = value; }, addEventListener(key, handler) { this.listeners[key] = handler; }, }); return elements.get(selector); }; + const defaults = { + '#intensity': '125', '#gap': '10', '#weight': '40', '#rotation': '0', + }; + for (const [sel, val] of Object.entries(defaults)) { + element(sel).value = val; + element(sel).defaultValue = val; + } vm.runInNewContext(readFileSync(new URL('../public/color-rings.js', import.meta.url), 'utf8'), { document: { querySelector: element }, }); + return { element }; +} + +test('color rings preserve the base palette, stay in sRGB, and reset', () => { + const { element } = makeHarness(); const slider = element('#intensity'); const colors = () => ['clay', 'ochre', 'slate'].map(name => { const hex = element(`#hex-${name}`).textContent; @@ -23,27 +37,10 @@ test('color rings preserve the base palette, stay in sRGB, and reset', () => { return hex; }); const initial = colors(); - assert.deepEqual(initial, ['#D37E6C', '#E2BB6D', '#8AA8BA']); - const html = readFileSync(new URL('../public/color-rings.html', import.meta.url), 'utf8'); - assert.match(html, /Slate blue · inner/); - for (const [index, name] of ['clay', 'ochre', 'slate'].entries()) { - assert.ok(html.includes(`id="hex-${name}">${initial[index]}`)); - assert.match(html, new RegExp(`id="ring-${name}"[^>]+stroke="${initial[index]}"`)); - } for (let value = 0; value <= 220; value++) { slider.value = String(value); slider.listeners.input(); for (const hex of colors()) assert.match(hex, /^#[0-9A-F]{6}$/); - assert.equal(element('#intensity-value').value, `${value}%`); - assert.equal(slider.attributes['aria-valuetext'], `${value}% of original saturation`); - if (value > 0) { - const [r, g, b] = colors()[2].match(/[0-9A-F]{2}/g).map(v => parseInt(v, 16)); - assert.ok(b >= g && g >= r, 'slate stays blue, never green'); - if (value >= 20) { - const hue = 240 + 60 * (r - g) / (b - r); - assert.ok(Math.abs(hue - 202.105) < 4, 'blue hue survives sRGB rounding'); - } - } if (value === 0) for (const hex of colors()) assert.match(hex, /^#([0-9A-F]{2})\1\1$/); if (value === 100) assert.deepEqual(colors(), ['#C98576', '#D6B779', '#8FA7B5']); } @@ -52,3 +49,43 @@ test('color rings preserve the base palette, stay in sRGB, and reset', () => { assert.deepEqual(colors(), initial); assert.equal(element('#intensity-value').value, '125%'); }); + +test('gap slider moves inner rings while the outer ring stays fixed', () => { + const { element } = makeHarness(); + const gap = element('#gap'); + gap.value = '0'; + gap.listeners.input(); + assert.equal(element('#ring-clay').attributes.r, '250'); + assert.equal(element('#ring-ochre').attributes.r, '190'); + assert.equal(element('#ring-slate').attributes.r, '130'); + + gap.value = '60'; + gap.listeners.input(); + assert.equal(element('#ring-clay').attributes.r, '250'); + assert.equal(element('#ring-ochre').attributes.r, '130'); + assert.equal(element('#ring-slate').attributes.r, String(Math.max(110 / 4, 110 - 2 * 50))); + + gap.value = '10'; + gap.listeners.input(); + assert.equal(element('#ring-ochre').attributes.r, '180'); + assert.equal(element('#ring-slate').attributes.r, '110'); +}); + +test('thickness and rotation apply to the group', () => { + const { element } = makeHarness(); + const weight = element('#weight'); + const rotation = element('#rotation'); + weight.value = '12'; + weight.listeners.input(); + assert.equal(element('#rings-group').attributes['stroke-width'], '12'); + assert.equal(element('#weight-value').value, '12'); + + rotation.value = '90'; + rotation.listeners.input(); + assert.equal(element('#rings-group').attributes.transform, 'rotate(90 300 300)'); + assert.equal(element('#rotation-value').value, '90°'); + + element('.controls').listeners.reset({ preventDefault() {} }); + assert.equal(element('#rings-group').attributes['stroke-width'], '40'); + assert.equal(element('#rings-group').attributes.transform, 'rotate(0 300 300)'); +});