3f:null 40:["$","title",null,{"children":"What's That Noise? | Observable Ambassadors | Observable"}] 46:T52b,viewof wNoiseOptions = applyPreset( "wNoiseOptions", Inputs.form( { type: Inputs.radio(["Euclidean", "Manhattan"], { label: "Type", value: "Euclidean" }), resolution: Inputs.range([0.2, 25], { step: 0.1, value: 7, label: "Resolution" }), seed: Inputs.text({ type: "number", value: 0, min: 0, label: "Seed" }), weightA: Inputs.range([-1, 1], { label: "Closest point", step: 0.01, value: 1 }), weightB: Inputs.range([-1, 1], { label: "2nd closest point", step: 0.01, value: -0.5 }), weightC: Inputs.range([-1, 1], { label: "3rd closest point", step: 0.01, value: -0.5 }), multiplier: Inputs.range([0, 5], { label: "Multiplier", step: 0.01, value: 1 }), contrast: contrastOptionsGroup(), curve: curveOptionsGroup(true) }, { template: (i) => tabbed( htl.html`

${[i.type, i.resolution, i.seed]}

${summary("Weights")}${[ i.weightA, i.weightB, i.weightC, i.multiplier ]}

${i.contrast}${i.curve}`, { defaultLabel: "Noise" } ) } ) )47:T40a,curveOptionsGroup = (open = false) => Inputs.form( { points: Inputs.range([3, defaultSize], { value: 100, step: 1, label: "Sample points" }), type: Inputs.radio(Object.keys(curveTypes), { label: "Curve type", value: "linear" }), mode: Inputs.radio(["fill", "line"], { value: "fill", label: "Draw mode" }), bandSteps: Inputs.range([0, 10], { value: 0, step: 1, label: "Band extent" }), bandDistance: Inputs.range([0, 0.2], { value: 0.005, step: 0.001, label: "Band distance" }), bandShift: Inputs.range([0, 0.5], { value: 0, step: 0.001, label: "Band shift" }), colorize: Inputs.toggle({ value: false, label: "Colorize" }), opaque: Inputs.toggle({ value: false, label: "Fully opaque" }) }, { template: (i) => htl.html`

${summary("Curve")}${Object.values(i)}` } )48:Tcac,function noisePreview(sample, options = {}) { const { size = 300, lineHeight = size, initialOffset = 0.5, onChange = (v) => {}, asyncPasses = 0, curve: { type: curveType = "linear", points: curvePoints = size, mode = "fill", bandDistance = 0.01, bandSteps = 0, bandShift = 0, colorize = false, opaque = false, colorScale = d3.interpolateSpectral } = {}, invalidation: whenInvalidated = invalidation, contrast = {} } = options; const sampler = scaledSampler(sample, size, contrast); const canvas = heightField(sampler, { width: size, height: size, invalidation: whenInvalidated, asyncPasses }); canvas.style.background = "#000"; const bands = 1 + bandSteps * 2; const opacity = opaque ? 1 : gamma(1 / bands); const scale = d3.scaleSequential([0, bands], colorScale); const color = !colorize ? (i) => `hsla(0,0%,0%,${opacity})` : (i) => { const c = d3.rgb(scale(i)); c.opacity = opacity; return c; }; const fill = mode === "fill" ? color : () => "none"; const stroke = mode === "line" ? color : () => "none"; const curves = Array.from( { length: bands }, (_, i) => svg`` ); const view = html`

${canvas} ${d3.range(-bandSteps, bandSteps + 1).map( (o) => html`

` )}

`; const style = html`