From 28935a5856a707b986d7ed3d5672d68cd892477a Mon Sep 17 00:00:00 2001 From: Jeremy Ruston Date: Tue, 11 Feb 2025 20:46:11 +0000 Subject: [PATCH] Add hue adjuster to colour-interpolate operator --- core/modules/filters/colour-ops.js | 19 +++++++++++++---- .../tiddlers/filters/colour-interpolate.tid | 21 +++++++++++-------- 2 files changed, 27 insertions(+), 13 deletions(-) diff --git a/core/modules/filters/colour-ops.js b/core/modules/filters/colour-ops.js index 995b898f6..6dbf2ca54 100644 --- a/core/modules/filters/colour-ops.js +++ b/core/modules/filters/colour-ops.js @@ -12,7 +12,9 @@ Filter operators for colour operations /*global $tw: false */ "use strict"; -var Color = require("$:/core/modules/utils/dom/color.js").Color; +var Color = require("$:/core/modules/utils/dom/color.js").Color, + colourSpacesList = Object.keys(Color.spaces), + hueAdjustersList = ["raw","increasing","decreasing","longer","shorter"]; exports["colour-lighten"] = makeSerialColourOperator(function (colour, operator, options) { return colour.lighten($tw.utils.parseNumber(operator.operand)).display().toString(); @@ -77,13 +79,22 @@ exports["colour-best-contrast"] = makeParallelColourOperator(function (colours, }); exports["colour-interpolate"] = makeParallelColourOperator(function (colours, operator, options) { + // Get the colour space suffix + var space = (((operator.suffixes || [])[0] || ["srgb"])[0]).toLowerCase(); + if(colourSpacesList.indexOf(space) === -1) { + space = "srgb"; + } // Special case for less than two colours if(colours.length < 2) { return []; } - // Step through the indexes collecting the interpolated colours - var space = ((operator.suffixes || [])[0] || ["srgb"])[0], - rangefn = colours[0].range(colours[1],{space: space}), + // Get the hue adjuster suffix + var hueAdjuster = (((operator.suffixes || [])[1] || ["shorter"])[0]).toLowerCase(); + if(hueAdjustersList.indexOf(hueAdjuster) === -1) { + hueAdjuster = "shorter"; + } + // Compute the range function + var rangefn = colours[0].range(colours[1],{space: space, hue: hueAdjuster}), outputColours = []; $tw.utils.each(operator.operands,function(operand) { // Get the index diff --git a/editions/tw5.com/tiddlers/filters/colour-interpolate.tid b/editions/tw5.com/tiddlers/filters/colour-interpolate.tid index 083710c2e..429f9ed35 100644 --- a/editions/tw5.com/tiddlers/filters/colour-interpolate.tid +++ b/editions/tw5.com/tiddlers/filters/colour-interpolate.tid @@ -3,19 +3,24 @@ modified: 20241117161528913 tags: [[Filter Operators]] [[Colour Operators]] title: colour-interpolate Operator caption: colour-interpolate -op-purpose: smoothly interpolate between a set of colours -op-input: a selection of colour values -op-suffix: the name of the colour space to be used for the interpolation such as "OkLCh" or "sRGB" +op-purpose: smoothly interpolate between a pair of colours +op-input: two colour values. Additional values are ignored +op-suffix: the <<.op colour-interpolate>> operator uses a rich suffix, see below for details op-parameter: one or more indexes where 0 is the first colour and 1 is the last colour and intermediate values are smoothly interpolated op-output: the values of the interpolated colours <<.from-version "5.3.7">> See [[Colour Palettes]] for background. -The <<.op colour-interpolate>> operator is used to interpolate colour values in a chosen colour space. +The <<.op colour-interpolate>> operator is used to interpolate colour values in a chosen colour space. It uses an extended syntax that permits multiple additional parameters to be passed: -The full list of colour spaces that can be used for interpolation is given in [[Colour Spaces]]. +``` +[colour-interpolate::[]] +``` -Note that at least two input colours must be provided for interpolation to occur. +* ''colour space'': The name of the colour space to be used for the interpolation such as "OkLCh" or "sRGB". The full list of colour spaces that can be used for interpolation is given in [[Colour Spaces]] +* ''hue adjuster'': For color spaces with a hue angle there are multiple ways to interpolate, which can produce drastically different results. The hue adjuster suffix allows the interpolation type to be controlled. It can be set to "raw", "increasing", "decreasing", "longer" or "shorter" (the default). See [[Colour Interpolation Hues]] for more details + +Two input colours are required. If there are fewer than two input colours, the operator will return an empty result. If there are more than two input colours, the operator will ignore the additional colours. Note that indexes outside the range 0 to 1 will extrapolate from the provided colour values. @@ -28,6 +33,4 @@ red green +[colour-interpolate:oklch[0],[0.333],[0.666],[1]] See also the following related operators: * <<.olink colour-get-oklch>> to retrieve a component of a colour value in the OKLCH colour space -* <<.olink colour-lighten>> to lighten a colour value -* <<.olink colour-darken>> to lighten a colour value - +* <<.olink colour-set-oklch>> to set a component of a colour value in the OKLCH colour space