feat: add size variation control

index.html

@@ -57,6 +57,10 @@
               <span>Logo size <output id="size-value">1.00×</output></span>
               <input id="logo-size" type="range" min="0.5" max="1.6" step="0.01" value="1" />
             </label>
+            <label class="range-label">
+              <span>Size variation <output id="size-variation-value">100%</output></span>
+              <input id="size-variation" type="range" min="0" max="1.5" step="0.01" value="1" />
+            </label>
             <label class="range-label">
               <span>Spacing <output id="spacing-value">1.00×</output></span>
               <input id="spacing" type="range" min="0.25" max="2" step="0.01" value="1" />

src/layout.test.ts

@@ -5,6 +5,7 @@ const options = {
   aspect: 16 / 9,
   count: 88,
   logoScale: 1,
+  sizeVariation: 1,
   spacing: 1,
   rotation: 52,
   seed: 84237,
@@ -43,6 +44,22 @@ describe("generateLayout", () => {
     expect([...layout].every(Number.isFinite)).toBe(true);
   });
 
+  it("controls size variation continuously", () => {
+    const uniform = generateLayout({ ...options, sizeVariation: 0 });
+    const varied = generateLayout({ ...options, sizeVariation: 1 });
+    const exaggerated = generateLayout({ ...options, sizeVariation: 1.5 });
+    const widths = (layout: Float32Array): number[] => {
+      const values: number[] = [];
+      for (let offset = 2; offset < layout.length; offset += PLACEMENT_STRIDE) values.push(layout[offset] ?? 0);
+      return values;
+    };
+    const range = (values: number[]): number => Math.max(...values) - Math.min(...values);
+
+    expect(range(widths(uniform))).toBeLessThan(0.000001);
+    expect(range(widths(varied))).toBeGreaterThan(0.15);
+    expect(range(widths(exaggerated))).toBeGreaterThan(range(widths(varied)));
+  });
+
   it("changes spacing continuously and visibly", () => {
     const compact = generateLayout({ ...options, spacing: 0.5 });
     const neutral = generateLayout({ ...options, spacing: 1 });

src/layout.ts

@@ -2,6 +2,7 @@ export interface LayoutOptions {
   aspect: number;
   count: number;
   logoScale: number;
+  sizeVariation: number;
   spacing: number;
   rotation: number;
   seed: number;
@@ -31,10 +32,14 @@ class Random {
   }
 }
 
-function pickWidth(random: Random, scale: number): number {
+function pickWidth(random: Random, scale: number, variation: number): number {
   const roll = random.next();
   for (const [threshold, low, high] of SIZE_BANDS) {
-    if (roll <= threshold) return (low + random.next() * (high - low)) * scale;
+    if (roll <= threshold) {
+      const sampledWidth = low + random.next() * (high - low);
+      const uniformWidth = 0.115;
+      return Math.max(0.025, uniformWidth + (sampledWidth - uniformWidth) * variation) * scale;
+    }
   }
   return 0.07 * scale;
 }
@@ -49,7 +54,9 @@ export function generateLayout(options: LayoutOptions): Float32Array {
   const width = Math.max(0.5, options.aspect);
   const height = 1;
   const widths = new Float32Array(count);
-  for (let index = 0; index < count; index += 1) widths[index] = pickWidth(random, options.logoScale);
+  for (let index = 0; index < count; index += 1) {
+    widths[index] = pickWidth(random, options.logoScale, Math.max(0, options.sizeVariation));
+  }
   widths.sort();
   widths.reverse();
 

src/main.ts

@@ -21,6 +21,7 @@ const widthInput = element<HTMLInputElement>("width");
 const heightInput = element<HTMLInputElement>("height");
 const densityInput = element<HTMLInputElement>("density");
 const sizeInput = element<HTMLInputElement>("logo-size");
+const sizeVariationInput = element<HTMLInputElement>("size-variation");
 const spacingInput = element<HTMLInputElement>("spacing");
 const rotationInput = element<HTMLInputElement>("rotation");
 const seedInput = element<HTMLInputElement>("seed");
@@ -46,6 +47,7 @@ function readConfig(): Config {
     aspect: width / height,
     count: Math.round(numberValue(densityInput, 88)),
     logoScale: numberValue(sizeInput, 1),
+    sizeVariation: numberValue(sizeVariationInput, 1),
     spacing: numberValue(spacingInput, 1),
     rotation: numberValue(rotationInput, 52),
     seed: Math.round(numberValue(seedInput, 84237)) >>> 0,
@@ -53,12 +55,13 @@ function readConfig(): Config {
 }
 
 function configKey(config: Config): string {
-  return [config.aspect.toFixed(6), config.count, config.logoScale, config.spacing, config.rotation, config.seed].join(":");
+  return [config.aspect.toFixed(6), config.count, config.logoScale, config.sizeVariation, config.spacing, config.rotation, config.seed].join(":");
 }
 
 function updateLabels(config: Config): void {
   element<HTMLOutputElement>("density-value").value = String(config.count);
   element<HTMLOutputElement>("size-value").value = `${config.logoScale.toFixed(2)}×`;
+  element<HTMLOutputElement>("size-variation-value").value = `${Math.round(config.sizeVariation * 100)}%`;
   element<HTMLOutputElement>("spacing-value").value = `${config.spacing.toFixed(2)}×`;
   element<HTMLOutputElement>("rotation-value").value = `${Math.round(config.rotation)}°`;
   element<HTMLSpanElement>("pixel-count").textContent = `${((config.width * config.height) / 1_000_000).toFixed(1)} MP`;
@@ -151,6 +154,7 @@ function setDefaults(): void {
   heightInput.value = "2160";
   densityInput.value = "88";
   sizeInput.value = "1";
+  sizeVariationInput.value = "1";
   spacingInput.value = "1";
   rotationInput.value = "52";
   seedInput.value = "84237";
@@ -168,7 +172,7 @@ resolution.addEventListener("change", () => {
   schedulePreview();
 });
 
-for (const input of [widthInput, heightInput, densityInput, sizeInput, spacingInput, rotationInput, seedInput]) {
+for (const input of [widthInput, heightInput, densityInput, sizeInput, sizeVariationInput, spacingInput, rotationInput, seedInput]) {
   input.addEventListener("input", () => {
     if (input === widthInput || input === heightInput) resolution.value = "custom";
     schedulePreview();