viewof controls = { const form = html``; // Get the form value as an object const getValue = () => ({ baseColonySize: +form.baseColonySize.value, yellowProbability: +form.yellowProbability.value, textureIntensity: +form.textureIntensity.value, granularIntensity: +form.granularIntensity.value, fibrousIntensity: +form.fibrousIntensity.value, edgeVariation: +form.edgeVariation.value, shapePoints: +form.shapePoints.value, highlightSize: +form.highlightSize.value, highlightIntensity: +form.highlightIntensity.value, centerGlowSize: +form.centerGlowSize.value, blurStrength: +form.blurStrength.value }); // Set initial value form.value = getValue(); // Update outputs and dispatch input event when sliders change form.oninput = () => { form.baseColonySizeOut.value = form.baseColonySize.value; form.yellowProbabilityOut.value = form.yellowProbability.value; form.textureIntensityOut.value = form.textureIntensity.value; form.granularIntensityOut.value = form.granularIntensity.value; form.fibrousIntensityOut.value = form.fibrousIntensity.value; form.edgeVariationOut.value = form.edgeVariation.value; form.shapePointsOut.value = form.shapePoints.value; form.highlightSizeOut.value = form.highlightSize.value; form.highlightIntensityOut.value = form.highlightIntensity.value; form.centerGlowSizeOut.value = form.centerGlowSize.value; form.blurStrengthOut.value = form.blurStrength.value; // Update the form value and dispatch event form.value = getValue(); form.dispatchEvent(new CustomEvent("input")); }; return form; }