From 67e8b0292ec8329be34b820c369d49f13ff6dee3 Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Thu, 20 Feb 2025 10:33:23 +0100
Subject: [PATCH] refraction => dispersion

---
 src/app/hero/liquid-frag.ts |  8 ++++----
 src/hero/canvas.tsx         |  6 +++---
 src/hero/hero.tsx           | 12 ++++++------
 src/hero/params.ts          |  4 ++--
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/hero/liquid-frag.ts b/src/app/hero/liquid-frag.ts
index 8956715..9e23735 100644
--- a/src/app/hero/liquid-frag.ts
+++ b/src/app/hero/liquid-frag.ts
@@ -9,7 +9,7 @@ uniform float u_time;
 uniform float u_ratio;
 uniform float u_img_ratio;
 uniform float u_patternScale;
-uniform float u_refraction;
+uniform float u_dispersion;
 uniform float u_edge;
 uniform float u_patternBlur;
 uniform float u_liquid;
@@ -182,13 +182,13 @@ void main() {
     refr_b += (smoothstep(0., .4, uv.y) * smoothstep(.8, .1, uv.y)) * (smoothstep(.4, .6, bulge) * smoothstep(.8, .4, bulge));
     refr_b -= .2 * edge;
 
-    refr_r *= u_refraction;
-    refr_b *= u_refraction;
+    refr_r *= u_dispersion;
+    refr_b *= u_dispersion;
 
     vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);
     w[1] -= .02 * smoothstep(.0, 1., edge + bulge);
     float stripe_r = mod(dir + refr_r, 1.);
-    float r = get_color_channel(color1.r, color2.r, stripe_r, w, 0.02 + .03 * u_refraction * bulge, bulge);
+    float r = get_color_channel(color1.r, color2.r, stripe_r, w, 0.02 + .03 * u_dispersion * bulge, bulge);
     float stripe_g = mod(dir, 1.);
     float g = get_color_channel(color1.g, color2.g, stripe_g, w, 0.01 / (1. - diagonal), bulge);
     float stripe_b = mod(dir - refr_b, 1.);
diff --git a/src/hero/canvas.tsx b/src/hero/canvas.tsx
index 1b25034..2ab962c 100644
--- a/src/hero/canvas.tsx
+++ b/src/hero/canvas.tsx
@@ -9,7 +9,7 @@ import { toast } from 'sonner';
 // uniform float u_ratio;
 // uniform float u_img_ratio;
 // uniform float u_patternScale;
-// uniform float u_refraction;
+// uniform float u_dispersion;
 // uniform float u_edge;
 // uniform float u_patternBlur;
 // uniform float u_liquid;
@@ -27,7 +27,7 @@ void main() {
 
 export type ShaderParams = {
   patternScale: number;
-  refraction: number;
+  dispersion: number;
   edge: number;
   patternBlur: number;
   liquid: number;
@@ -56,7 +56,7 @@ export function Canvas({
     gl.uniform1f(uniforms.u_patternBlur, params.patternBlur);
     gl.uniform1f(uniforms.u_time, 0);
     gl.uniform1f(uniforms.u_patternScale, params.patternScale);
-    gl.uniform1f(uniforms.u_refraction, params.refraction);
+    gl.uniform1f(uniforms.u_dispersion, params.dispersion);
     gl.uniform1f(uniforms.u_liquid, params.liquid);
   }
 
diff --git a/src/hero/hero.tsx b/src/hero/hero.tsx
index 71873d5..f33be72 100644
--- a/src/hero/hero.tsx
+++ b/src/hero/hero.tsx
@@ -265,12 +265,12 @@ export function Hero({ imageId }: HeroProps) {
         </div>
 
         <Control
-          label="Refraction"
-          value={state.refraction}
-          min={params.refraction.min}
-          max={params.refraction.max}
-          step={params.refraction.step}
-          onValueChange={(value) => setState((state) => ({ ...state, refraction: value }))}
+          label="dispersion"
+          value={state.dispersion}
+          min={params.dispersion.min}
+          max={params.dispersion.max}
+          step={params.dispersion.step}
+          onValueChange={(value) => setState((state) => ({ ...state, dispersion: value }))}
         />
         <Control
           label="Edge"
diff --git a/src/hero/params.ts b/src/hero/params.ts
index c7d5471..1b47bbb 100644
--- a/src/hero/params.ts
+++ b/src/hero/params.ts
@@ -1,6 +1,6 @@
 export type ShaderParams = {
   patternScale: number;
-  refraction: number;
+  dispersion: number;
   edge: number;
   patternBlur: number;
   liquid: number;
@@ -8,7 +8,7 @@ export type ShaderParams = {
 };
 
 export const params = {
-  refraction: {
+  dispersion: {
     min: 0,
     max: 0.06,
     step: 0.001,