Balance and color update

firecmsco · Oct 10, 2024 · c6345e8 · c6345e8
1 parent 5306919
commit c6345e8
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 18 deletions.
diff --git a/editor/src/components/NeatEditor.tsx b/editor/src/components/NeatEditor.tsx
@@ -13,15 +13,15 @@ import { ColorSwatch } from "./ColowSwatch";
 import Checkbox from "@mui/material/Checkbox";
 import { ExpandablePanel } from "./ExpandablePanel";
 import { FilledMenuItem, FilledSelect } from "./FilledSelect";
-import { PRESETS, STRIPE_PRESET } from "./presets";
+import { PRESETS, NEAT_PRESET } from "./presets";
 import { isDarkColor } from "../utils/colors";
 import { CodeDialog } from "./CodeDialog";
 import { Analytics } from "@firebase/analytics";
 import { logEvent } from "firebase/analytics";
 
 const drawerWidth = 360;
 
-const defaultConfig = STRIPE_PRESET;
+const defaultConfig = NEAT_PRESET;
 
 export type NeatEditorProps = { analytics: Analytics };
 

diff --git a/editor/src/components/presets.ts b/editor/src/components/presets.ts
@@ -1,3 +1,46 @@
+export const NEAT_PRESET = {
+    "colors": [
+        {
+            "color": "#FF5772",
+            "enabled": true
+        },
+        {
+            "color": "#4CB4BB",
+            "enabled": true
+        },
+        {
+            "color": "#FFC600",
+            "enabled": true
+        },
+        {
+            "color": "#8B6AE6",
+            "enabled": true
+        },
+        {
+            "color": "#2E0EC7",
+            "enabled": true
+        }
+    ],
+    "speed": 4,
+    "horizontalPressure": 3,
+    "verticalPressure": 4,
+    "waveFrequencyX": 3,
+    "waveFrequencyY": 3,
+    "waveAmplitude": 8,
+    "shadows": 1,
+    "highlights": 5,
+    "colorBrightness": 1,
+    "colorSaturation": 7,
+    "wireframe": false,
+    "colorBlending": 8,
+    "backgroundColor": "#003FFF",
+    "backgroundAlpha": 1,
+    "grainScale": 3,
+    "grainIntensity": 0.3,
+    "grainSpeed": 1,
+    "resolution": 1
+};
+
 export const STRIPE_PRESET = {
     "colors": [
         {
@@ -35,9 +78,9 @@ export const STRIPE_PRESET = {
     "colorBlending": 8,
     "backgroundColor": "#003FFF",
     "backgroundAlpha": 1,
-    "grainScale": 3,
-    "grainIntensity": 0.3,
-    "grainSpeed": 1,
+    "grainScale": 0,
+    "grainIntensity": 0,
+    "grainSpeed": 0,
     "resolution": 1
 };
 
@@ -703,6 +746,7 @@ export const FOREST_PRESET = {
 };
 
 export const PRESETS = {
+    "Neat": NEAT_PRESET,
     "Stripe": STRIPE_PRESET,
     "FireCMS": FIRECMS_PRESET,
     "Lemon": LEMON_PRESET,

diff --git a/lib/src/NeatGradient.ts b/lib/src/NeatGradient.ts
@@ -103,7 +103,7 @@ export class NeatGradient implements NeatController {
             colorSaturation = 0,
             colorBrightness = 1,
             colorBlending = 5,
-            grainScale= 2,
+            grainScale = 2,
             grainIntensity = 0.55,
             grainSpeed = 0.1,
             wireframe = false,
@@ -156,11 +156,15 @@ export class NeatGradient implements NeatController {
                     height = this._ref.height;
 
                 const colors = [
-                    ...this._colors.map(color => ({
-                        is_active: color.enabled,
-                        color: new THREE.Color(color.color),
-                        influence: color.influence
-                    })),
+                    ...this._colors.map(color => {
+                        let threeColor = new THREE.Color();
+                        threeColor.setStyle(color.color, "");
+                        return ({
+                            is_active: color.enabled,
+                            color: threeColor,
+                            influence: color.influence
+                        });
+                    }),
                     ...Array.from({ length: COLORS_COUNT - this._colors.length }).map(() => ({
                         is_active: false,
                         color: new THREE.Color(0x000000)
@@ -469,24 +473,25 @@ void main() {
             float noiseSpeed = (1. + float(i)) * 0.11;
             float noiseSeed = 13. + float(i) * 7.;
             
+            int reverseIndex = u_colors_count - i;
+            
             float noise = snoise(
                 vec3(
                     noise_cord.x * u_color_pressure.x + u_time * noiseFlow * 2.,
                     noise_cord.y * u_color_pressure.y,
                     u_time * noiseSpeed
                 ) + noiseSeed
-            );
+            ) - (.1 * float(i)) + (.5 * u_color_blending);
             
             noise = clamp(minNoise, maxNoise + float(i) * 0.02, noise);
             vec3 nextColor = u_colors[i].color;
+            color = mix(color, nextColor, smoothstep(0.0, u_color_blending, noise));
             
-            vec3 colorOklab = oklab2rgb(color);
-            vec3 nextColorOklab = oklab2rgb(nextColor);
-            vec3 mixColor = mix(colorOklab, nextColorOklab, smoothstep(0.0, u_color_blending, noise));
-
-            color = rgb2oklab(mixColor);
+            // vec3 colorOklab = oklab2rgb(color);
+            // vec3 nextColorOklab = oklab2rgb(nextColor);
+            // vec3 mixColor = mix(colorOklab, nextColorOklab, smoothstep(0.0, u_color_blending, noise));
+            // color = rgb2oklab(mixColor);
             
-            // color = mix(color, nextColor, smoothstep(0.0, u_color_blending, noise));
         }
         
     }