[New Shader] - Gradient flow

source/shaders/gradient-flow/index.md

@@ -0,0 +1,97 @@
+---
+description: A shader that generates dynamic, fluid effects with noise-driven rotation.
+shader:
+  title: Gradient Flow
+  description: A random dynamic, noisy background.
+  screenshot: gradient-flow.png
+  video: gradient-flow.mp4
+# For the moment we need to record the path to this directory until Static Shock provides this
+directory: shaders/gradient-flow/
+---
+```glsl
+// shader by https://www.shadertoy.com/user/hahnzhu
+// from https://www.shadertoy.com/view/wdyczG
+
+#version 460 core
+
+precision mediump float;
+
+#include <flutter/runtime_effect.glsl>
+
+uniform vec2 iResolution;
+uniform float iTime;
+
+// Uniforms for the gradient colors
+uniform vec3 colorPrimary;
+uniform vec3 colorSecondary;
+uniform vec3 colorAccent1;
+uniform vec3 colorAccent2;
+
+
+out vec4 fragColor;
+
+#define S(a,b,t) smoothstep(a,b,t)
+
+mat2 Rot(float a)
+{
+    float s = sin(a);
+    float c = cos(a);
+    return mat2(c, -s, s, c);
+}
+
+// Created by inigo quilez - iq/2014
+// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
+vec2 hash( vec2 p )
+{
+    p = vec2( dot(p,vec2(2127.1,81.17)), dot(p,vec2(1269.5,283.37)) );
+    return fract(sin(p)*43758.5453);
+}
+
+float noise( in vec2 p )
+{
+    vec2 i = floor( p );
+    vec2 f = fract( p );
+
+    vec2 u = f*f*(3.0-2.0*f);
+
+    float n = mix( mix( dot( -1.0+2.0*hash( i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ),
+    dot( -1.0+2.0*hash( i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x),
+    mix( dot( -1.0+2.0*hash( i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ),
+    dot( -1.0+2.0*hash( i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y);
+    return 0.5 + 0.5*n;
+}
+
+void main() {
+    vec2 fragCoord = FlutterFragCoord().xy;
+
+    vec2 uv = fragCoord / iResolution.xy ;
+    float ratio = iResolution.x / iResolution.y;
+
+    vec2 tuv = uv;
+    tuv -= .5;
+
+    // rotate with Noise
+    float degree = noise(vec2(iTime*.1, tuv.x*tuv.y));
+
+    tuv.y *= 1./ratio;
+    tuv *= Rot(radians((degree-.5)*720.+180.));
+    tuv.y *= ratio;
+
+    // Wave warp with sin
+    float frequency = 5.;
+    float amplitude = 30.;
+    float speed = iTime * 2.;
+    tuv.x += sin(tuv.y*frequency+speed)/amplitude;
+    tuv.y += sin(tuv.x*frequency*1.5+speed)/(amplitude*.5);
+
+    // draw the image
+    vec3 layer1 = mix(colorPrimary, colorSecondary, S(-.3, .2, (tuv*Rot(radians(-5.))).x));
+    vec3 layer2 = mix(colorAccent1, colorAccent2, S(-.3, .2, (tuv*Rot(radians(-5.))).x));
+
+    vec3 finalComp = mix(layer1, layer2, S(.5, -.3, tuv.y));
+
+    vec3 col = finalComp;
+
+    fragColor = vec4(col, 1.0);
+}
+```