diff --git a/src/lib/contexts/config.svelte.ts b/src/lib/contexts/config.svelte.ts index 9065a99..b0c3f3e 100644 --- a/src/lib/contexts/config.svelte.ts +++ b/src/lib/contexts/config.svelte.ts @@ -9,7 +9,7 @@ export interface ConversionConfig { backgroundColor: number ditheringKernel: DitheringKernel | null contrast: number - bias: number + brightness: number } const ConversionConfigToken = Symbol('conversion-config') @@ -25,7 +25,7 @@ export function createConversionConfig() { backgroundColor: 255, ditheringKernel: DEFAULT_DITHERING_KERNEL, contrast: 0, - bias: 0, + brightness: 0, }) return setContext(ConversionConfigToken, config) diff --git a/src/lib/contexts/rendered.svelte.ts b/src/lib/contexts/rendered.svelte.ts index ee2c2f8..ac084d6 100644 --- a/src/lib/contexts/rendered.svelte.ts +++ b/src/lib/contexts/rendered.svelte.ts @@ -30,7 +30,7 @@ export function createRenderedContext( new Quantizer({ ditheringKernel: config.ditheringKernel, contrast: config.contrast, - bias: config.bias, + brightness: config.brightness, }) ) diff --git a/src/lib/image/quantizer.ts b/src/lib/image/quantizer.ts index 0fe15b0..162dc64 100644 --- a/src/lib/image/quantizer.ts +++ b/src/lib/image/quantizer.ts @@ -8,7 +8,7 @@ export const DEFAULT_DITHERING_KERNEL: DitheringKernel = 'Atkinson' export type QuantizerOptions = { ditheringKernel: DitheringKernel | null contrast: number - bias: number + brightness: number } export class Quantizer { @@ -17,10 +17,10 @@ export class Quantizer { private readonly rgbquant: RgbQuant - constructor({ ditheringKernel, contrast, bias }: QuantizerOptions) { + constructor({ ditheringKernel, contrast, brightness }: QuantizerOptions) { const saturationAdjustment = ditheringKernel === null ? 127 : 127 * contrast - this.white = 255 + (bias - 1) * saturationAdjustment - this.black = (1 + bias) * saturationAdjustment + this.white = 255 - (1 + brightness) * saturationAdjustment + this.black = (1 - brightness) * saturationAdjustment this.rgbquant = new RgbQuant({ colors: 2, diff --git a/src/lib/layouts/edit/controls/BackgroundColorSlider.svelte b/src/lib/layouts/edit/controls/BackgroundColorSlider.svelte index 7933cd3..7146596 100644 --- a/src/lib/layouts/edit/controls/BackgroundColorSlider.svelte +++ b/src/lib/layouts/edit/controls/BackgroundColorSlider.svelte @@ -19,7 +19,7 @@ min={0} max={0xff} {value} - onchange={v => (config.bias = value = v)} + onchange={v => (config.brightness = value = v)} aria-labelledby="background-color-input-label" /> diff --git a/src/lib/layouts/edit/controls/ControlsSection.svelte b/src/lib/layouts/edit/controls/ControlsSection.svelte index 7524b14..af418db 100644 --- a/src/lib/layouts/edit/controls/ControlsSection.svelte +++ b/src/lib/layouts/edit/controls/ControlsSection.svelte @@ -10,7 +10,7 @@ import BackgroundColorSlider from './BackgroundColorSlider.svelte' import DitherControls from './conversion/dither/DitherControls.svelte' import ContrastSlider from './conversion/ContrastSlider.svelte' - import BiasSlider from './conversion/BiasSlider.svelte' + import BrightnessSlider from './conversion/BrightnessSlider.svelte' import { getConversionConfig } from '$lib/contexts/config.svelte' import { getImageContext, imageIsCorrectRatio } from '$lib/contexts/image.svelte' @@ -28,7 +28,7 @@ config.backgroundColor = 0xff config.ditheringKernel = DEFAULT_DITHERING_KERNEL config.contrast = 0 - config.bias = 0 + config.brightness = 0 } @@ -60,7 +60,7 @@ {/if} {#if config.ditheringKernel === null || config.contrast !== 0} - + {/if} diff --git a/src/lib/layouts/edit/controls/conversion/BiasSlider.svelte b/src/lib/layouts/edit/controls/conversion/BrightnessSlider.svelte similarity index 62% rename from src/lib/layouts/edit/controls/conversion/BiasSlider.svelte rename to src/lib/layouts/edit/controls/conversion/BrightnessSlider.svelte index f7f141d..1369497 100644 --- a/src/lib/layouts/edit/controls/conversion/BiasSlider.svelte +++ b/src/lib/layouts/edit/controls/conversion/BrightnessSlider.svelte @@ -8,33 +8,33 @@ const config = getConversionConfig() - let value = $derived(Math.round(config.bias * 100)) + let value = $derived(Math.round(config.brightness * 100)) -
+
- + = (config.bias = (value = v) / 100)} - aria-labelledby="bias-input-label" + onchange={v => (config.brightness = (value = v) / 100)} + aria-labelledby="brightness-input-label" />% - Whether the conversion algorithm should bias the entire image towards white (negative) or black (positive). + Whether the conversion algorithm should bias the entire image towards white (positive) or black (negative).
(config.bias = value / 100)} + onValueCommit={() => (config.brightness = value / 100)} min={-100} max={100} step={1} - aria-labelledby="bias-input-label" + aria-labelledby="brightness-input-label" />
diff --git a/src/lib/layouts/edit/preview/common.svelte.ts b/src/lib/layouts/edit/preview/common.svelte.ts index 855e535..4b3806b 100644 --- a/src/lib/layouts/edit/preview/common.svelte.ts +++ b/src/lib/layouts/edit/preview/common.svelte.ts @@ -35,16 +35,16 @@ export function makeAltText(filesCtx: FilesContext, imageCtx: ImageContext, conf } if (config.contrast > 0 || config.ditheringKernel === null) { - const biasScaleFactor = config.ditheringKernel === null ? 1 : config.contrast - const scaledBias = config.bias * biasScaleFactor + const brightnessScaleFactor = config.ditheringKernel === null ? 1 : config.contrast + const scaledBrightness = config.brightness * brightnessScaleFactor - if (scaledBias >= 0.5) output.push('extremely biased towards black') - else if (scaledBias >= 0.25) output.push('biased towards black') - else if (scaledBias >= 0.1) output.push('slightly biased towards black') + if (scaledBrightness >= 0.5) output.push('extremely brightened') + else if (scaledBrightness >= 0.25) output.push('brightened') + else if (scaledBrightness >= 0.1) output.push('slightly brightened') - if (scaledBias <= -0.5) output.push('extremely biased towards white') - else if (scaledBias <= -0.25) output.push('biased towards white') - else if (scaledBias <= -0.1) output.push('slightly biased towards white') + if (scaledBrightness <= -0.5) output.push('extremely darkened') + else if (scaledBrightness <= -0.25) output.push('darkened') + else if (scaledBrightness <= -0.1) output.push('slightly darkened') } return output.join(', ')