diff --git a/core/modules/filters/colour-ops.js b/core/modules/filters/colour-ops.js index 6dbf2ca54..1a3e5dae6 100644 --- a/core/modules/filters/colour-ops.js +++ b/core/modules/filters/colour-ops.js @@ -78,33 +78,33 @@ exports["colour-best-contrast"] = makeParallelColourOperator(function (colours, } }); -exports["colour-interpolate"] = makeParallelColourOperator(function (colours, operator, options) { +exports["colour-interpolate"] = function(source,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 []; - } // 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 - var index = $tw.utils.parseNumber(operand); - // Calculate the interpolated colour + // Get the colours + if(operator.operands.length < 2) { + return []; + } + var colourA = $tw.utils.parseCSSColorObject(operator.operands[0]), + colourB = $tw.utils.parseCSSColorObject(operator.operands[1]), + rangefn = colourA.range(colourB,{space: space, hue: hueAdjuster}); + // Cycle through the weights + var results = []; + source(function(tiddler,title) { + var index = $tw.utils.parseNumber(title); var colour = rangefn(index); - outputColours.push(colour.display().toString()); + results.push(colour.display().toString()); }); - return outputColours; -}); + return results; +}; function makeSerialColourOperator(fn) { return function (source, operator, options) { diff --git a/core/wiki/macros/CSS.tid b/core/wiki/macros/CSS.tid index 46f325cb3..374563faf 100644 --- a/core/wiki/macros/CSS.tid +++ b/core/wiki/macros/CSS.tid @@ -141,7 +141,7 @@ tags: $:/tags/Macro \end tf.check-colour-contrast \function tf.interpolate-colours(paletteEntryA,paletteEntryB,weight) -[function[colour],] [function[colour],] +[colour-interpolate:oklch] +[function[colour],] [function[colour],] :apply[colour-interpolate:oklch<$1>,<$2>] \end tf.interpolate-colours \define box-shadow(shadow) diff --git a/editions/test/tiddlers/tests/data/operators/colour/ColourInterpolate.tid b/editions/test/tiddlers/tests/data/operators/colour/ColourInterpolate.tid index eeea18015..282aa4ae3 100644 --- a/editions/test/tiddlers/tests/data/operators/colour/ColourInterpolate.tid +++ b/editions/test/tiddlers/tests/data/operators/colour/ColourInterpolate.tid @@ -10,9 +10,8 @@ title: Output + title: Filter -=[[#5778d8]] -=[[#d85757]] -+[colour-interpolate:oklch[0.2],[0.5],[0.99]join[,]] +0.2 0.5 0.99 ++[colour-interpolate:oklch[#5778d8],[#d85757]join[,]] + title: ExpectedResult diff --git a/editions/tw5.com/tiddlers/filters/colour-interpolate.tid b/editions/tw5.com/tiddlers/filters/colour-interpolate.tid index 429f9ed35..1f91fcf17 100644 --- a/editions/tw5.com/tiddlers/filters/colour-interpolate.tid +++ b/editions/tw5.com/tiddlers/filters/colour-interpolate.tid @@ -4,31 +4,51 @@ tags: [[Filter Operators]] [[Colour Operators]] title: colour-interpolate Operator caption: colour-interpolate op-purpose: smoothly interpolate between a pair of colours -op-input: two colour values. Additional values are ignored +op-input: one or more indexes where 0 is the first colour and 1 is the last colour and intermediate values are smoothly interpolated 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-parameter: two colour values op-output: the values of the interpolated colours +\procedure interpolate-example(filter,description) +<$transclude $variable="description"/> + +<$codeblock code=<>/> + +<$list filter=<>> +
>>
+ +\end interpolate-example + <<.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. It uses an extended syntax that permits multiple additional parameters to be passed: ``` -[colour-interpolate::[]] +[colour-interpolate::[],[]] ``` * ''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. +Two colour parameters 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. -For example, this filter expression will return 4 colours that smoothly blend from red to green in the OKLCH colour space: +<> -``` -red green +[colour-interpolate:oklch[0],[0.333],[0.666],[1]] -``` +<> + +<> + +<> See also the following related operators: