From 10b70ffc544a2192cd3601c63ee6052cd3c623c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Forment?= <raphael.forment@gmail.com>
Date: Mon, 7 Jul 2025 15:29:41 +0000
Subject: [PATCH] ok test

---
 src/components/MobileMenu.tsx |  8 ++--
 src/components/TopBar.tsx     |  8 ++--
 src/utils/colorModes.ts       | 89 ++++++++++++++++++++++-------------
 3 files changed, 63 insertions(+), 42 deletions(-)

diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index e37a154..8cda42a 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -135,13 +135,13 @@ export function MobileMenu() {
               <option value="red">Red Channel</option>
               <option value="green">Green Channel</option>
               <option value="blue">Blue Channel</option>
-              <option value="rgb">RGB Split</option>
-              <option value="hsv">HSV</option>
               <option value="rainbow">Rainbow</option>
               <option value="thermal">Thermal</option>
               <option value="neon">Neon</option>
-              <option value="cyberpunk">Cyberpunk</option>
-              <option value="vaporwave">Vaporwave</option>
+              <option value="sunset">Sunset</option>
+              <option value="ocean">Ocean</option>
+              <option value="forest">Forest</option>
+              <option value="copper">Copper</option>
               <option value="dithered">Dithered</option>
               <option value="palette">Palette</option>
             </select>
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index c9d7703..3746877 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -190,13 +190,13 @@ export function TopBar() {
               <option value="red">Red Channel</option>
               <option value="green">Green Channel</option>
               <option value="blue">Blue Channel</option>
-              <option value="rgb">RGB Split</option>
-              <option value="hsv">HSV</option>
               <option value="rainbow">Rainbow</option>
               <option value="thermal">Thermal</option>
               <option value="neon">Neon</option>
-              <option value="cyberpunk">Cyberpunk</option>
-              <option value="vaporwave">Vaporwave</option>
+              <option value="sunset">Sunset</option>
+              <option value="ocean">Ocean</option>
+              <option value="forest">Forest</option>
+              <option value="copper">Copper</option>
               <option value="dithered">Dithered</option>
               <option value="palette">Palette</option>
             </select>
diff --git a/src/utils/colorModes.ts b/src/utils/colorModes.ts
index 16c391f..ee8f0b5 100644
--- a/src/utils/colorModes.ts
+++ b/src/utils/colorModes.ts
@@ -93,34 +93,59 @@ export function neonColor(value: number): [number, number, number] {
   ];
 }
 
-export function cyberpunkColor(value: number): [number, number, number] {
+export function sunsetColor(value: number): [number, number, number] {
   const t = value / 255.0;
-  const phase = (t * 3) % 1;
-  if (phase < 0.33) {
-    return [
-      Math.round(255 * (1 - phase * 3)),
-      0,
-      Math.round(255 * phase * 3),
-    ];
-  } else if (phase < 0.67) {
-    const p = (phase - 0.33) * 3;
-    return [0, Math.round(255 * p), Math.round(255 * (1 - p))];
+  if (t < 0.3) {
+    return [Math.round(t * 3.33 * 255), 0, Math.round(t * 1.67 * 255)];
+  } else if (t < 0.6) {
+    const p = (t - 0.3) / 0.3;
+    return [255, Math.round(p * 100), Math.round(50 * (1 - p))];
   } else {
-    const p = (phase - 0.67) * 3;
-    return [Math.round(255 * p), Math.round(255 * (1 - p)), 255];
+    const p = (t - 0.6) / 0.4;
+    return [255, Math.round(100 + p * 155), Math.round(p * 100)];
   }
 }
 
-export function vaporwaveColor(value: number): [number, number, number] {
+export function oceanColor(value: number): [number, number, number] {
   const t = value / 255.0;
-  const pink = Math.sin(t * Math.PI);
-  const purple = Math.sin(t * Math.PI * 0.7 + Math.PI / 3);
-  const blue = Math.sin(t * Math.PI * 0.5 + Math.PI / 2);
-  return [
-    Math.round(255 * (0.8 + 0.2 * pink)),
-    Math.round(255 * (0.3 + 0.7 * purple)),
-    Math.round(255 * (0.6 + 0.4 * blue)),
-  ];
+  if (t < 0.25) {
+    return [0, Math.round(t * 2 * 255), Math.round(100 + t * 4 * 155)];
+  } else if (t < 0.5) {
+    const p = (t - 0.25) / 0.25;
+    return [0, Math.round(128 + p * 127), 255];
+  } else if (t < 0.75) {
+    const p = (t - 0.5) / 0.25;
+    return [Math.round(p * 100), 255, Math.round(255 - p * 100)];
+  } else {
+    const p = (t - 0.75) / 0.25;
+    return [Math.round(100 + p * 155), 255, Math.round(155 + p * 100)];
+  }
+}
+
+export function forestColor(value: number): [number, number, number] {
+  const t = value / 255.0;
+  if (t < 0.3) {
+    return [Math.round(t * 2 * 255), Math.round(50 + t * 3 * 205), 0];
+  } else if (t < 0.6) {
+    const p = (t - 0.3) / 0.3;
+    return [Math.round(150 - p * 100), 255, Math.round(p * 100)];
+  } else {
+    const p = (t - 0.6) / 0.4;
+    return [Math.round(50 + p * 100), Math.round(255 - p * 100), Math.round(100 + p * 55)];
+  }
+}
+
+export function copperColor(value: number): [number, number, number] {
+  const t = value / 255.0;
+  if (t < 0.4) {
+    return [Math.round(t * 2.5 * 255), Math.round(t * 1.5 * 255), Math.round(t * 0.5 * 255)];
+  } else if (t < 0.7) {
+    const p = (t - 0.4) / 0.3;
+    return [255, Math.round(153 + p * 102), Math.round(51 + p * 51)];
+  } else {
+    const p = (t - 0.7) / 0.3;
+    return [255, 255, Math.round(102 + p * 153)];
+  }
 }
 
 export function ditheredColor(value: number): [number, number, number] {
@@ -168,15 +193,11 @@ export function calculateColorDirect(
     case 'blue':
       return [0, 0, absValue];
 
-    case 'rgb':
-      return [
-        ((absValue * 255) / 256) | 0,
-        ((((absValue * 2) % 256) * 255) / 256) | 0,
-        ((((absValue * 3) % 256) * 255) / 256) | 0,
-      ];
+    case 'forest':
+      return forestColor(absValue);
 
-    case 'hsv':
-      return hsvToRgb(absValue / 255.0, 1.0, 1.0);
+    case 'copper':
+      return copperColor(absValue);
 
     case 'rainbow':
       return rainbowColor(absValue);
@@ -187,11 +208,11 @@ export function calculateColorDirect(
     case 'neon':
       return neonColor(absValue);
 
-    case 'cyberpunk':
-      return cyberpunkColor(absValue);
+    case 'sunset':
+      return sunsetColor(absValue);
 
-    case 'vaporwave':
-      return vaporwaveColor(absValue);
+    case 'ocean':
+      return oceanColor(absValue);
 
     case 'dithered':
       return ditheredColor(absValue);