Using better semantics for symmetric harmonies

Warm/cold semantics were not deterministic as harmonies could go
clockwise or anti-clockwising depending on their parent color.
Using left and right avoids this problem, and feels like the simplest
vocabulary.

src/lib/color/manipulation.ts

@@ -7,8 +7,6 @@ import {
 	closestAngle
 } from '$lib/utils/math';
 
-const WarmestHue = 35;
-
 export const setHue = (color: SchemistColor, h: number) => ({
 	...color,
 	h
@@ -123,11 +121,6 @@ export const randomUsableColor = (): SchemistColor => ({
 	l: 30 + Math.random() * 60
 });
 
-export const warmerDirection = ({h}: SchemistColor) => {
-	const offsetHue = circular(h - WarmestHue);
-	return offsetHue > 360 - offsetHue ? 1 : -1;
-};
-
 // @see http://www.tannerhelland.com/4435/convert-temperature-rgb-algorithm-code
 // @see https://gist.github.com/EDais/1ba1be0fe04eca66bbd588a6c9cbd666
 export const temperatureToHue = (kelvins) => {

src/lib/definitions/nodes/index.ts

@@ -10,12 +10,12 @@ import negative from './negative';
 import positive from './positive';
 import saturation from './saturation';
 import shadow from './shadow';
-import splitComplementaryCold from './splitComplementaryCold';
-import splitComplementaryWarm from './splitComplementaryWarm';
-import tetradCold from './tetradCold';
-import tetradWarm from './tetradWarm';
-import triadCold from './triadCold';
-import triadWarm from './triadWarm';
+import splitComplementaryLeft from './splitComplementaryLeft';
+import splitComplementaryRight from './splitComplementaryRight';
+import tetradLeft from './tetradLeft';
+import tetradRight from './tetradRight';
+import triadLeft from './triadLeft';
+import triadRight from './triadRight';
 import warning from './warning';
 
 export default {
@@ -31,24 +31,24 @@ export default {
 	[positive.type]: positive,
 	[saturation.type]: saturation,
 	[shadow.type]: shadow,
-	[splitComplementaryCold.type]: splitComplementaryCold,
-	[splitComplementaryWarm.type]: splitComplementaryWarm,
-	[tetradCold.type]: tetradCold,
-	[tetradWarm.type]: tetradWarm,
-	[triadCold.type]: triadCold,
-	[triadWarm.type]: triadWarm,
+	[splitComplementaryLeft.type]: splitComplementaryLeft,
+	[splitComplementaryRight.type]: splitComplementaryRight,
+	[tetradLeft.type]: tetradLeft,
+	[tetradRight.type]: tetradRight,
+	[triadLeft.type]: triadLeft,
+	[triadRight.type]: triadRight,
 	[warning.type]: warning
 };
 
 export const defList = [
 	analogous,
 	complementary,
-	splitComplementaryCold,
-	splitComplementaryWarm,
-	tetradCold,
-	tetradWarm,
-	triadCold,
-	triadWarm,
+	splitComplementaryLeft,
+	splitComplementaryRight,
+	tetradLeft,
+	tetradRight,
+	triadLeft,
+	triadRight,
 	contrasting,
 	informative,
 	positive,

src/lib/definitions/nodes/splitComplementaryLeft.ts

@@ -0,0 +1,13 @@
+import {rotateHue} from '$lib/color/manipulation';
+import type {NodeDef} from '$lib/stores/nodes';
+
+export default {
+	type: 'scl',
+	label: 'Left split complementary',
+	description: '',
+	params: [],
+	samples: 'single',
+	apply(color) {
+		return rotateHue(color, -150);
+	}
+} as NodeDef;

src/lib/definitions/nodes/splitComplementaryRight.ts

@@ -0,0 +1,13 @@
+import {rotateHue} from '$lib/color/manipulation';
+import type {NodeDef} from '$lib/stores/nodes';
+
+export default {
+	type: 'scr',
+	label: 'Right split complementary',
+	description: '',
+	params: [],
+	samples: 'single',
+	apply(color) {
+		return rotateHue(color, 150);
+	}
+} as NodeDef;

src/lib/definitions/nodes/tetradLeft.ts

@@ -0,0 +1,13 @@
+import {rotateHue} from '$lib/color/manipulation';
+import type {NodeDef} from '$lib/stores/nodes';
+
+export default {
+	type: 'ttl',
+	label: 'Left tetrad',
+	description: '',
+	params: [],
+	samples: 'single',
+	apply(color) {
+		return rotateHue(color, -90);
+	}
+} as NodeDef;

src/lib/definitions/nodes/tetradRight.ts

@@ -0,0 +1,13 @@
+import {rotateHue} from '$lib/color/manipulation';
+import type {NodeDef} from '$lib/stores/nodes';
+
+export default {
+	type: 'ttr',
+	label: 'Right tetrad',
+	description: '',
+	params: [],
+	samples: 'single',
+	apply(color) {
+		return rotateHue(color, 90);
+	}
+} as NodeDef;

src/lib/definitions/nodes/triadLeft.ts

@@ -0,0 +1,13 @@
+import {rotateHue} from '$lib/color/manipulation';
+import type {NodeDef} from '$lib/stores/nodes';
+
+export default {
+	type: 'trl',
+	label: 'Left triad',
+	description: '',
+	params: [],
+	samples: 'single',
+	apply(color) {
+		return rotateHue(color, -120);
+	}
+} as NodeDef;

src/lib/definitions/nodes/triadRight.ts

@@ -0,0 +1,13 @@
+import {rotateHue} from '$lib/color/manipulation';
+import type {NodeDef} from '$lib/stores/nodes';
+
+export default {
+	type: 'trr',
+	label: 'Right triad',
+	description: '',
+	params: [],
+	samples: 'single',
+	apply(color) {
+		return rotateHue(color, 120);
+	}
+} as NodeDef;

src/lib/definitions/presets/schemist.ts

@@ -1,6 +1,6 @@
 import type {Preset} from '$lib/presets';
-import triadCold from '../nodes/triadCold';
-import triadWarm from '../nodes/triadWarm';
+import triadLeft from '../nodes/triadLeft';
+import triadRight from '../nodes/triadRight';
 import neutral from './neutral';
 import semanticPairs from './semanticPairs';
 import states from './states';
@@ -10,12 +10,12 @@ export default {
 	description: '',
 	nodes: [
 		{
-			type: triadWarm.type,
+			type: triadLeft.type,
 			token: 'Secondary',
 			children: states.nodes
 		},
 		{
-			type: triadCold.type,
+			type: triadRight.type,
 			token: 'Tertiary',
 			children: states.nodes
 		},

src/lib/definitions/presets/splitComplementary.ts

@@ -1,18 +1,18 @@
-import splitComplementaryCold from '$lib/definitions/nodes/splitComplementaryCold';
-import splitComplementaryWarm from '$lib/definitions/nodes/splitComplementaryWarm';
+import splitComplementaryLeft from '$lib/definitions/nodes/splitComplementaryLeft';
+import splitComplementaryRight from '$lib/definitions/nodes/splitComplementaryRight';
 import type {Preset} from '$lib/presets';
 
 export default {
 	label: 'Split complementary',
 	description: '',
 	nodes: [
 		{
-			type: splitComplementaryCold.type,
-			token: 'Cold $ complementary'
+			type: splitComplementaryLeft.type,
+			token: 'Left $ complementary'
 		},
 		{
-			type: splitComplementaryWarm.type,
-			token: 'Warm $ complementary'
+			type: splitComplementaryRight.type,
+			token: 'Right $ complementary'
 		}
 	]
 } as Preset;

src/lib/definitions/presets/tetrad.ts

@@ -1,18 +1,18 @@
-import tetradCold from '$lib/definitions/nodes/tetradCold';
-import tetradWarm from '$lib/definitions/nodes/tetradWarm';
+import tetradLeft from '$lib/definitions/nodes/tetradLeft';
+import tetradRight from '$lib/definitions/nodes/tetradRight';
 import type {Preset} from '$lib/presets';
 
 export default {
 	label: 'Tetrad',
 	description: '',
 	nodes: [
 		{
-			type: tetradCold.type,
-			token: 'Cold $ tetrad'
+			type: tetradLeft.type,
+			token: 'Left $ tetrad'
 		},
 		{
-			type: tetradWarm.type,
-			token: 'Warm $ tetrad'
+			type: tetradRight.type,
+			token: 'Right $ tetrad'
 		}
 	]
 } as Preset;

src/lib/definitions/presets/triad.ts

@@ -1,18 +1,18 @@
-import triadCold from '$lib/definitions/nodes/triadCold';
-import triadWarm from '$lib/definitions/nodes/triadWarm';
+import triadLeft from '$lib/definitions/nodes/triadLeft';
+import triadRight from '$lib/definitions/nodes/triadRight';
 import type {Preset} from '$lib/presets';
 
 export default {
 	label: 'Triad',
 	description: '',
 	nodes: [
 		{
-			type: triadCold.type,
-			token: 'Cold $ triad'
+			type: triadLeft.type,
+			token: 'Left $ triad'
 		},
 		{
-			type: triadWarm.type,
-			token: 'Warm $ triad'
+			type: triadRight.type,
+			token: 'Right $ triad'
 		}
 	]
 } as Preset;