Added a ton of test shaders

main.cpp

@@ -5,6 +5,7 @@
 #include <JUI/Widgets/Window.hpp>
 #include "JUI/Widgets/CommandLine.hpp"
 #include "JGL/types/Shader.h"
+#include <ReWindow/Logger.h>
 
 std::vector<std::string> string_expand(const std::string& input, char delimiter = ' ')
 {
@@ -21,46 +22,105 @@ std::vector<std::string> string_expand(const std::string& input, char delimiter
 
 class ReShaderProgram : public ReWindow::OpenGLWindow {
 public:
-    JUI::Scene* scene;
-    JUI::CommandLine* console;
+    JUI::Scene *scene;
+    JUI::CommandLine *console;
     JGL::Shader shader;
-    float accumulated_time;
+    JGL::RenderTarget *canvas;
+    float u_time;
+    std::string frag_name;
+    std::string vert_name;
 
     ReShaderProgram() : ReWindow::OpenGLWindow("ReShader", 1080, 720, 2, 1) {
-        Shader::OnCompilationErrorMessage += [this] (std::string type, std::string infoLog) {
+        Shader::OnCompilationErrorMessage += [this](std::string type, std::string infoLog) {
             auto log_lines = string_expand(infoLog, '\n');
             console->Log(type, Colors::Red);
-            for (auto line : log_lines) {
+            for (auto line: log_lines) {
                 console->Log(line, Colors::Red);
             }
         };
 
-        accumulated_time = 0;
+        u_time = 0;
     }
 
-    void ReloadShader()
+    static std::filesystem::path VertexShaderFilepathFromPrefixName(const std::string &name)
     {
-        //shader.Unload();
-        shader = Shader(std::filesystem::path("../shaders/test.vert.glsl"),  std::filesystem::path("../shaders/test.frag.glsl"));
+        return "../shaders/" + name + ".vert.glsl";
+    }
+
+    static std::filesystem::path FragmentShaderFilepathFromPrefixName(const std::string &name)
+    {
+        return "../shaders/" + name + ".frag.glsl";
+    }
+
+    void LoadShader(const std::string& name)
+    {
+        frag_name = name;
+        vert_name = name;
+        shader = Shader(VertexShaderFilepathFromPrefixName(name), FragmentShaderFilepathFromPrefixName(name));
+    }
+
+    void LoadShader(const std::string& vertex_name, const std::string& fragment_name)
+    {
+        this->vert_name = vertex_name;
+        this->frag_name = fragment_name;
+        shader = Shader(VertexShaderFilepathFromPrefixName(vert_name), FragmentShaderFilepathFromPrefixName(frag_name));
+    }
+
+    void LoadShaderWithDefaultVertex(const std::string& name) {
+        this->frag_name = name;
+        shader = Shader(VertexShaderFilepathFromPrefixName(vert_name), FragmentShaderFilepathFromPrefixName(name));
+    }
+
+    void ReloadShader() {
+        LoadShader(vert_name, frag_name);
     }
 
     void CreateMenu() {
         using namespace JUI::UDimLiterals;
 
+        // TODO: Utilize for things later.
         auto* wind = new JUI::Window(scene);
         wind->SetTitle("ReShader");
         wind->MinSize({100, 100});
-        wind->Size({200_px, 200_px});
+        wind->Size({200_px, 100_px});
+        wind->Close();
 
         console = new JUI::CommandLine(scene);
+        console->MinSize(Vector2(200, 200));
+        console->MaxSize(Vector2(GetWidth()-10, GetHeight()-10));
+        console->Size({100_percent, 200_px});
+        console->Position({0_percent, JUI::UDim(-200, 1)});
         console->OnInput += [this] (const std::string& message) {
             auto tokens = string_expand(message);
 
             std::string cmd = tokens[0];
 
-            if (cmd == "r")
+            if (tokens.size() == 0)
             {
+                console->Log("No command input!", Colors::Red);
+                return;
+            }
+
+            if (cmd == "r" || cmd == "reload") {
                 ReloadShader();
+            } else if (cmd == "lf") {
+                if (tokens.size() > 1) {
+                    std::string fragment = tokens[1];
+                    // TODO: Check for file in question.
+                    LoadShaderWithDefaultVertex(fragment);
+                    return;
+                }
+                console->Log("Error: Command syntax is lf <fragment-shader-name>", Colors::Red);
+            } else if (cmd == "ls") {
+                if (tokens.size() > 1) {
+                    std::string shader = tokens[1];
+                    // TODO: Check for file in question.
+                    LoadShader(shader);
+                    return;
+                }
+                console->Log("Error: Command syntax is ls <shader-name>", Colors::Red);
+            } else {
+                console->Log(std::format("No such command: {}", cmd), Colors::Red);
             }
         };
     }
@@ -72,17 +132,22 @@ public:
 
         auto size = GetSize();
         auto vec_size = Vector2i(size.x, size.y);
-        bool result = JGL::Init(vec_size, 0.f, 0.f);
+        if (!JGL::Init(vec_size, 0.f, 1.f))
+            return false;
         JGL::Update(vec_size);
         glClearColor(0.f, 0.f, 0.f, 0.f);
 
+        glEnable(GL_DEPTH_TEST);
+        glDepthFunc(GL_LESS);
+        glDepthMask(GL_TRUE);
         // TODO: Delete when we update to the next release of JGL
         glPixelStorei(GL_UNPACK_ALIGNMENT, 1); // NOTE: This MUST be called for text rendering to work properly!!!
 
         scene = new JUI::Scene();
         CreateMenu();
 
-        shader = Shader(std::filesystem::path("../shaders/test.vert.glsl"),  std::filesystem::path("../shaders/test.frag.glsl"));
+        canvas = new RenderTarget(vec_size);
+        LoadShader("test");
 
         return true;
     }
@@ -91,32 +156,46 @@ public:
         Vector2i vSize = Vector2i(size.x, size.y);
         JGL::Update(vSize);
         scene->SetViewportSize(Vector2(vSize));
+        console->MaxSize(Vector2(GetWidth()-10, GetHeight()-10));
+
+        // TODO: Causes the shader canvas to not appear...?
+        //canvas->Resize(vSize);
     }
     void Update(float elapsed) {
         scene->Update(elapsed);
 
-        accumulated_time += elapsed;
+        u_time += elapsed;
 
         Vector2 u_res = Vector2(GetSize().x, GetSize().y);
 
+        // TODO: Why do we need to multiply X by 1.5 here?
+        Vector2 u_mouse = Vector2(GetMouseCoordinates().x*1.5f, GetSize().y-GetMouseCoordinates().y);
+
         shader.SetVector2("u_resolution", u_res);
-        shader.SetFloat("u_time", accumulated_time);
+        shader.SetFloat("u_time", u_time);
+        shader.SetVector2("u_mouse", u_mouse);
     }
     void Draw() {
+
         Shader::UseDefault();
         glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
         glMatrixMode(GL_MODELVIEW);
         glLoadIdentity();
 
+        // TODO: Have to be particular about the order-of-operations in regards to shaders.
+        // Protip: Use RenderTarget to draw a quad with the shader in question. *After rendering the rest of the scene.*
 
-        shader.Use();
-        JGL::J2D::Begin();
+        J2D::Begin();
+        J2D::DrawRenderTarget(canvas, {0, 0});
+        J2D::End();
 
-        JGL::J2D::FillRect(Colors::Gray, {0, 0}, Vector2(GetSize().x, GetSize().y));
-        JGL::J2D::End();
-        Shader::UseDefault();
         scene->Draw();
 
+        JGL::J2D::Begin(canvas, true);
+        shader.Use();
+        JGL::J2D::FillRect(Colors::Black, {0, 0}, Vector2(GetSize().x, GetSize().y));
+        JGL::J2D::End();
+
     }
     void OnRefresh(float elapsed) override {
         PropagateWindowSize();
@@ -146,7 +225,11 @@ public:
         scene->ObserveMouseMovement(nmp);
     }
     void OnKeyDown(const ReWindow::KeyDownEvent &e) override {
-        scene->ObserveKeyInput(e.key, true);
+        if (scene->ObserveKeyInput(e.key, true))
+            return;
+
+        if (e.key == Keys::R)
+            ReloadShader();
     }
     void OnKeyUp(const ReWindow::KeyUpEvent &e) override {
         scene->ObserveKeyInput(e.key, false);
@@ -159,6 +242,7 @@ private:
 
 int main(int argc, char** argv) {
 
+    ReWindow::Logger::Debug.EnableConsole(false);
 
 
     auto* program = new ReShaderProgram();

shaders/bricks.frag.glsl

@@ -0,0 +1,45 @@
+#version 120
+
+// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform float u_time;
+
+vec2 brickTile(vec2 _st, float _zoom){
+    _st *= _zoom;
+
+    // Here is where the offset is happening
+    _st.x += step(1., mod(_st.y,2.0)) * 0.5;
+
+    return fract(_st);
+}
+
+float box(vec2 _st, vec2 _size){
+    _size = vec2(0.5)-_size*0.5;
+    vec2 uv = smoothstep(_size,_size+vec2(1e-4),_st);
+    uv *= smoothstep(_size,_size+vec2(1e-4),vec2(1.0)-_st);
+    return uv.x*uv.y;
+}
+
+void main(void){
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    vec3 color = vec3(0.0);
+
+    // Modern metric brick of 215mm x 102.5mm x 65mm
+    // http://www.jaharrison.me.uk/Brickwork/Sizes.html
+    // st /= vec2(2.15,0.65)/1.5;
+
+    // Apply the brick tiling
+    st = brickTile(st,5.0);
+
+    color = vec3(box(st,vec2(0.9)));
+
+    // Uncomment to see the space coordinates
+    // color = vec3(st,0.0);
+
+    gl_FragColor = vec4(color,1.0);
+}

shaders/colorwheel.frag.glsl

@@ -0,0 +1,37 @@
+#version 120
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+#define TWO_PI 6.28318530718
+
+uniform vec2 u_resolution;
+uniform float u_time;
+
+//  Function from Iñigo Quiles
+//  https://www.shadertoy.com/view/MsS3Wc
+vec3 hsb2rgb( in vec3 c ){
+    vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
+                             6.0)-3.0)-1.0,
+                     0.0,
+                     1.0 );
+    rgb = rgb*rgb*(3.0-2.0*rgb);
+    return c.z * mix( vec3(1.0), rgb, c.y);
+}
+
+void main(){
+    vec2 st = gl_FragCoord.xy/u_resolution;
+    vec3 color = vec3(0.0);
+
+    // Use polar coordinates instead of cartesian
+    vec2 toCenter = vec2(0.5)-st;
+    float angle = atan(toCenter.y,toCenter.x);
+    float radius = length(toCenter)*2.0;
+
+    // Map the angle (-PI to PI) to the Hue (from 0 to 1)
+    // and the Saturation to the radius
+    color = hsb2rgb(vec3((angle/TWO_PI)+0.5,radius,1.0));
+
+    gl_FragColor = vec4(color,1.0);
+}

shaders/distancefield.frag.glsl

@@ -0,0 +1,32 @@
+#version 120
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+void main(){
+  vec2 st = gl_FragCoord.xy/u_resolution.xy;
+  st.x *= u_resolution.x/u_resolution.y;
+  vec3 color = vec3(0.0);
+  float d = 0.0;
+
+  // Remap the space to -1. to 1.
+  st = st *2.-1.;
+
+  // Make the distance field
+  d = length( abs(st)-.3 );
+  // d = length( min(abs(st)-.3,0.) );
+  // d = length( max(abs(st)-.3,0.) );
+
+  // Visualize the distance field
+  gl_FragColor = vec4(vec3(fract(d*10.0)),1.0);
+
+  // Drawing with the distance field
+  // gl_FragColor = vec4(vec3( step(.3,d) ),1.0);
+  // gl_FragColor = vec4(vec3( step(.3,d) * step(d,.4)),1.0);
+  // gl_FragColor = vec4(vec3( smoothstep(.3,.4,d)* smoothstep(.6,.5,d)) ,1.0);
+}

shaders/fastmandelbrot.frag.glsl

@@ -0,0 +1,23 @@
+#version 120
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+void main()
+{
+
+    vec2 I = gl_FragCoord.xy;
+
+
+    //vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+    //vec3 col = 0.5 + 0.5*cos(u_time+uv.xyx+vec3(0,2,4));
+    //gl_FragColor = vec4(col, 1.0);
+
+    vec2 c = ( 2.*I - R) / R.y, z = 0./R;
+
+}

shaders/fbmwarp.frag.glsl

@@ -0,0 +1,84 @@
+#version 120
+
+// Author @patriciogv - 2015
+// http://patriciogonzalezvivo.com
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+float random (in vec2 _st) {
+    return fract(sin(dot(_st.xy,
+                         vec2(12.9898,78.233)))*
+        43758.5453123);
+}
+
+// Based on Morgan McGuire @morgan3d
+// https://www.shadertoy.com/view/4dS3Wd
+float noise (in vec2 _st) {
+    vec2 i = floor(_st);
+    vec2 f = fract(_st);
+
+    // Four corners in 2D of a tile
+    float a = random(i);
+    float b = random(i + vec2(1.0, 0.0));
+    float c = random(i + vec2(0.0, 1.0));
+    float d = random(i + vec2(1.0, 1.0));
+
+    vec2 u = f * f * (3.0 - 2.0 * f);
+
+    return mix(a, b, u.x) +
+            (c - a)* u.y * (1.0 - u.x) +
+            (d - b) * u.x * u.y;
+}
+
+#define NUM_OCTAVES 5
+
+float fbm ( in vec2 _st) {
+    float v = 0.0;
+    float a = 0.5;
+    vec2 shift = vec2(100.0);
+    // Rotate to reduce axial bias
+    mat2 rot = mat2(cos(0.5), sin(0.5),
+                    -sin(0.5), cos(0.50));
+    for (int i = 0; i < NUM_OCTAVES; ++i) {
+        v += a * noise(_st);
+        _st = rot * _st * 2.0 + shift;
+        a *= 0.5;
+    }
+    return v;
+}
+
+void main() {
+    vec2 st = gl_FragCoord.xy/u_resolution.xy*3.;
+    // st += st * abs(sin(u_time*0.1)*3.0);
+    vec3 color = vec3(0.0);
+
+    vec2 q = vec2(0.);
+    q.x = fbm( st + 0.00*u_time);
+    q.y = fbm( st + vec2(1.0));
+
+    vec2 r = vec2(0.);
+    r.x = fbm( st + 1.0*q + vec2(1.7,9.2)+ 0.15*u_time );
+    r.y = fbm( st + 1.0*q + vec2(8.3,2.8)+ 0.126*u_time);
+
+    float f = fbm(st+r);
+
+    color = mix(vec3(0.101961,0.619608,0.666667),
+                vec3(0.666667,0.666667,0.498039),
+                clamp((f*f)*4.0,0.0,1.0));
+
+    color = mix(color,
+                vec3(0,0,0.164706),
+                clamp(length(q),0.0,1.0));
+
+    color = mix(color,
+                vec3(0.666667,1,1),
+                clamp(length(r.x),0.0,1.0));
+
+    gl_FragColor = vec4((f*f*f+.6*f*f+.5*f)*color,1.);
+}

shaders/gradientcircle.frag.glsl

@@ -0,0 +1,34 @@
+#version 120
+
+// Author @patriciogv - 2015
+// http://patriciogonzalezvivo.com
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+void main(){
+	vec2 st = gl_FragCoord.xy/u_resolution;
+    float pct = 0.0;
+
+    // a. The DISTANCE from the pixel to the center
+    pct = distance(st,vec2(0.5));
+
+    // b. The LENGTH of the vector
+    //    from the pixel to the center
+    // vec2 toCenter = vec2(0.5)-st;
+    // pct = length(toCenter);
+
+    // c. The SQUARE ROOT of the vector
+    //    from the pixel to the center
+    // vec2 tC = vec2(0.5)-st;
+    // pct = sqrt(tC.x*tC.x+tC.y*tC.y);
+
+    vec3 color = vec3(pct);
+
+	gl_FragColor = vec4( color, 1.0 );
+}

shaders/matrix.frag.glsl

@@ -0,0 +1,55 @@
+#version 120
+
+// Author @patriciogv - 2015
+// http://patriciogonzalezvivo.com
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+float random(in float x){
+    return fract(sin(x)*43758.5453);
+}
+
+float random(in vec2 st){
+    return fract(sin(dot(st.xy ,vec2(12.9898,78.233))) * 43758.5453);
+}
+
+float rchar(in vec2 outer,in vec2 inner){
+    float grid = 5.;
+    vec2 margin = vec2(.2,.05);
+    float seed = 23.;
+    vec2 borders = step(margin,inner)*step(margin,1.-inner);
+    return step(.5,random(outer*seed+floor(inner*grid))) * borders.x * borders.y;
+}
+
+vec3 matrix(in vec2 st){
+    float rows = 80.0;
+    vec2 ipos = floor(st*rows);
+
+    ipos += vec2(.0,floor(u_time*20.*random(ipos.x)));
+
+
+    vec2 fpos = fract(st*rows);
+    vec2 center = (.5-fpos);
+
+    float pct = random(ipos);
+    float glow = (1.-dot(center,center)*3.)*2.0;
+
+    // vec3 color = vec3(0.643,0.851,0.690) * ( rchar(ipos,fpos) * pct );
+    // color +=  vec3(0.027,0.180,0.063) * pct * glow;
+    return vec3(rchar(ipos,fpos) * pct * glow);
+}
+
+void main(){
+    vec2 st = gl_FragCoord.st/u_resolution.xy;
+    st.y *= u_resolution.y/u_resolution.x;
+    vec3 color = vec3(0.0);
+
+    color = matrix(st);
+    gl_FragColor = vec4( 1.-color , 1.0);
+}

shaders/noise.frag.glsl

@@ -0,0 +1,26 @@
+#version 120
+
+// Author @patriciogv - 2015
+// http://patriciogonzalezvivo.com
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+float random (vec2 st) {
+    return fract(sin(dot(st.xy,
+                         vec2(12.9898,78.233)))*
+        43758.5453123);
+}
+
+void main() {
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+
+    float rnd = random( st );
+
+    gl_FragColor = vec4(vec3(rnd),1.0);
+}

shaders/noise2.frag.glsl

@@ -0,0 +1,33 @@
+#version 120
+// Author @patriciogv - 2015
+// Title: Mosaic
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+float random (vec2 st) {
+    return fract(sin(dot(st.xy,
+                         vec2(12.9898,78.233)))*
+        43758.5453123);
+}
+
+void main() {
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+
+    st *= 10.0; // Scale the coordinate system by 10
+    vec2 ipos = floor(st);  // get the integer coords
+    vec2 fpos = fract(st);  // get the fractional coords
+
+    // Assign a random value based on the integer coord
+    vec3 color = vec3(random( ipos ));
+
+    // Uncomment to see the subdivided grid
+    // color = vec3(fpos,0.0);
+
+    gl_FragColor = vec4(color,1.0);
+}

shaders/pattern1.frag.glsl

@@ -0,0 +1,32 @@
+#version 120
+
+// Author @patriciogv - 2015
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform float u_time;
+
+float circle(in vec2 _st, in float _radius){
+    vec2 l = _st-vec2(0.5);
+    return 1.-smoothstep(_radius-(_radius*0.01),
+                         _radius+(_radius*0.01),
+                         dot(l,l)*4.0);
+}
+
+void main() {
+	vec2 st = gl_FragCoord.xy/u_resolution;
+    vec3 color = vec3(0.0);
+
+    st *= 3.0;      // Scale up the space by 3
+    st = fract(st); // Wrap around 1.0
+
+    // Now we have 9 spaces that go from 0-1
+
+    color = vec3(st,0.0);
+    //color = vec3(circle(st,0.5));
+
+	gl_FragColor = vec4(color,1.0);
+}

shaders/test.frag.glsl

@@ -4,20 +4,36 @@
 precision mediump float;
 #endif
 
+#define PI 3.14159265359
+
 uniform vec2 u_resolution;
+uniform vec2 u_mouse;
 uniform float u_time;
 
-vec3 colorA = vec3(0.649,0.241,0.912);
-vec3 colorB = vec3(0.000,0.833,0.224);
+vec3 colorA = vec3(0.149,0.141,0.912);
+vec3 colorB = vec3(1.000,0.833,0.224);
+
+float plot (vec2 st, float pct){
+  return  smoothstep( pct-0.01, pct, st.y) -
+          smoothstep( pct, pct+0.01, st.y);
+}
 
 void main() {
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
     vec3 color = vec3(0.0);
 
-    float pct = abs(sin(u_time));
+    vec3 pct = vec3(st.x);
+
+    // pct.r = smoothstep(0.0,1.0, st.x);
+    // pct.g = sin(st.x*PI);
+    // pct.b = pow(st.x,0.5);
 
-    // Mix uses pct (a value from 0-1) to
-    // mix the two colors
     color = mix(colorA, colorB, pct);
 
+    // Plot transition lines for each channel
+    color = mix(color,vec3(1.0,0.0,0.0),plot(st,pct.r));
+    color = mix(color,vec3(0.0,1.0,0.0),plot(st,pct.g));
+    color = mix(color,vec3(0.0,0.0,1.0),plot(st,pct.b));
+
     gl_FragColor = vec4(color,1.0);
 }

shaders/test.vert.glsl

@@ -2,4 +2,4 @@
 
 void main() {
     gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
-}
+}

shaders/voronoi.frag.glsl

@@ -0,0 +1,64 @@
+#version 120
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+vec2 random2( vec2 p ) {
+    return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453);
+}
+
+void main() {
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    st.x *= u_resolution.x/u_resolution.y;
+    vec3 color = vec3(.0);
+
+    // Scale
+    st *= 3.;
+
+    // Tile the space
+    vec2 i_st = floor(st);
+    vec2 f_st = fract(st);
+
+    float m_dist = 1.;  // minimum distance
+
+    for (int y= -1; y <= 1; y++) {
+        for (int x= -1; x <= 1; x++) {
+            // Neighbor place in the grid
+            vec2 neighbor = vec2(float(x),float(y));
+
+            // Random position from current + neighbor place in the grid
+            vec2 point = random2(i_st + neighbor);
+
+			// Animate the point
+            point = 0.5 + 0.5*sin(u_time + 6.2831*point);
+
+			// Vector between the pixel and the point
+            vec2 diff = neighbor + point - f_st;
+
+            // Distance to the point
+            float dist = length(diff);
+
+            // Keep the closer distance
+            m_dist = min(m_dist, dist);
+        }
+    }
+
+    // Draw the min distance (distance field)
+    color += m_dist;
+
+    // Draw cell center
+    color += 1.-step(.02, m_dist);
+
+    // Draw grid
+    color.r += step(.98, f_st.x) + step(.98, f_st.y);
+
+    // Show isolines
+    // color -= step(.7,abs(sin(27.0*m_dist)))*.5;
+
+    gl_FragColor = vec4(color,1.0);
+}

shaders/voronoi2.frag.glsl

@@ -0,0 +1,56 @@
+#version 120
+
+// Author: @patriciogv
+// Title: 4 cells voronoi
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+void main() {
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    st.x *= u_resolution.x/u_resolution.y;
+
+    vec3 color = vec3(.0);
+
+    // Cell positions
+    vec2 point[5];
+    point[0] = vec2(0.83,0.75);
+    point[1] = vec2(0.60,0.07);
+    point[2] = vec2(0.28,0.64);
+    point[3] =  vec2(0.31,0.26);
+    point[4] = u_mouse/u_resolution;
+
+    float m_dist = 1.;  // minimum distance
+    vec2 m_point;        // minimum position
+
+    // Iterate through the points positions
+    for (int i = 0; i < 5; i++) {
+        float dist = distance(st, point[i]);
+        if ( dist < m_dist ) {
+            // Keep the closer distance
+            m_dist = dist;
+
+            // Kepp the position of the closer point
+            m_point = point[i];
+        }
+    }
+
+    // Add distance field to closest point center
+    color += m_dist*2.;
+
+    // tint acording the closest point position
+    color.rg = m_point;
+
+    // Show isolines
+    color -= abs(sin(80.0*m_dist))*0.07;
+
+    // Draw point center
+    color += 1.-step(.02, m_dist);
+
+    gl_FragColor = vec4(color,1.0);
+}