From eafc906210035abe468a488ba2ef66cae3cacd83 Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Sun, 7 Apr 2024 11:53:33 +1000 Subject: [PATCH] Using HSL to derive the colour scheme --- colours.js | 8 ++++--- package-lock.json | 58 ++++++++++++++++++++++++++++++++++++++++++++--- package.json | 1 + 3 files changed, 61 insertions(+), 6 deletions(-) diff --git a/colours.js b/colours.js index eabe0ce..ddbdcaf 100644 --- a/colours.js +++ b/colours.js @@ -1,13 +1,15 @@ import ColorScheme from 'color-scheme'; +import Color from 'color'; export const get_colours = (basis) => { + const basis_c = Color(basis); + const hsl = basis_c.hsl(); const scheme = new ColorScheme; - const hexbasis = basis.toString(16).padStart(6, "0"); - scheme.from_hex(hexbasis).scheme("tetrade").variation("hard").distance(0.5); + scheme.from_hue(hsl['color'][0]).scheme("tetrade").variation("hard").distance(0.5); const colours = scheme.colors().map((cs) => parseInt('0x' + cs)); const set = colours.slice(1, 9); set.reverse(); - set.unshift(colours[0]); + set.unshift(basis); return set; } diff --git a/package-lock.json b/package-lock.json index 28a6ea9..236b222 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,7 +4,9 @@ "requires": true, "packages": { "": { + "name": "fourdjs", "dependencies": { + "color": "^4.2.3", "color-scheme": "^1.0.1", "lil-gui": "^0.19.0", "three": "^0.154.0" @@ -365,11 +367,48 @@ "node": ">=12" } }, + "node_modules/color": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", + "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", + "dependencies": { + "color-convert": "^2.0.1", + "color-string": "^1.9.0" + }, + "engines": { + "node": ">=12.5.0" + } + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, "node_modules/color-scheme": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/color-scheme/-/color-scheme-1.0.1.tgz", "integrity": "sha512-4x+ya6+z6g9DaTFSfVzTZc8TSjxHuDT40NB43N3XPUkQlF6uujhwH8aeMeq8HBgoQQog/vrYgJ16mt/eVTRXwQ==" }, + "node_modules/color-string": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", + "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", + "dependencies": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, "node_modules/esbuild": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", @@ -421,6 +460,11 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" + }, "node_modules/lil-gui": { "version": "0.19.0", "resolved": "https://registry.npmjs.org/lil-gui/-/lil-gui-0.19.0.tgz", @@ -494,6 +538,14 @@ "fsevents": "~2.3.2" } }, + "node_modules/simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", + "dependencies": { + "is-arrayish": "^0.3.1" + } + }, "node_modules/source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", @@ -509,9 +561,9 @@ "integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug==" }, "node_modules/vite": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz", - "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==", + "version": "4.5.3", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", + "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", "dev": true, "dependencies": { "esbuild": "^0.18.10", diff --git a/package.json b/package.json index 609c089..16d7f03 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "dependencies": { + "color": "^4.2.3", "color-scheme": "^1.0.1", "lil-gui": "^0.19.0", "three": "^0.154.0"