Refactor the interpolate operator so it can be used with the range operator

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) {

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],<paletteEntryA>] [function[colour],<paletteEntryB>] +[colour-interpolate:oklch<weight>]
+[function[colour],<paletteEntryA>] [function[colour],<paletteEntryB>] :apply[<weight>colour-interpolate:oklch<$1>,<$2>]
 \end tf.interpolate-colours
 
 \define box-shadow(shadow)

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
 

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=<<filter>>/>
+
+<$list filter=<<filter>>>
+<div style.display="inline-block" style.width="15px" style.height="15px" style.background-color=<<currentTiddler>>></div>
+</$list>
+\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 space>:<hue adjuster>[<parameter>]]
+[colour-interpolate:<colour space>:<hue adjuster>[<colourA>],[<colourB>]]
 ```
 
 * ''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:
+<<interpolate-example "0 0.333 0.666 1 +[colour-interpolate:oklch[red],[purple]]" """
+For example, this filter expression will return 4 colours that smoothly blend from red to purple in the OKLCH colour space:
+""">>
 
-```
-red green +[colour-interpolate:oklch[0],[0.333],[0.666],[1]]
-```
+<<interpolate-example "[range[0],[1],[0.05]colour-interpolate:oklch[red],[purple]]" """
+The range operator can be used to generate a series of weights:
+""">>
+
+<<interpolate-example "[range[0],[1],[0.05]colour-interpolate:oklch:raw[red],[purple]]" """
+Notice how the ''raw'' hue adjuster produces a rainbow effect:
+""">>
+
+<<interpolate-example "[range[0],[1],[0.1]colour-interpolate[black],[white]] =[range[0.1],[1],[0.1]colour-interpolate[white],[black]]" """
+Interpolations can be appended together:
+""">>
 
 See also the following related operators: