Skip to content

Instantly share code, notes, and snippets.

@co3moz
Last active March 28, 2018 06:23
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save co3moz/e49740d499e12330d0a2 to your computer and use it in GitHub Desktop.
Save co3moz/e49740d499e12330d0a2 to your computer and use it in GitHub Desktop.
just glsl starter boilerplate :)
precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
void main() {
vec2 aspect = resolution.xy / min(resolution.x, resolution.y);
vec2 position = (gl_FragCoord.xy / resolution.xy) * aspect;
vec4 color = vec4(0.0);
gl_FragColor = color;
}
@co3moz
Copy link
Author

co3moz commented Feb 21, 2016

Circle example

precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void main() {
    vec2 aspect = resolution.xy / min(resolution.x, resolution.y);
    vec2 position = (gl_FragCoord.xy / resolution.xy) * aspect;
    vec4 color = vec4(0.0);

    if(distance(mouse * aspect, position) < 0.1) {
        color = vec4(1);    
    }

    gl_FragColor = color;
}

image

@co3moz
Copy link
Author

co3moz commented Feb 21, 2016

Soft circle

precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void main() {
    vec2 aspect = resolution.xy / min(resolution.x, resolution.y);
    vec2 position = (gl_FragCoord.xy / resolution.xy) * aspect;
    vec4 color = vec4(0.0);

    if(distance(mouse * aspect, position) < 0.1) {
        color = vec4(1.0 - distance(mouse * aspect, position) * 10.0);  
    }

    gl_FragColor = color;
}

image

@co3moz
Copy link
Author

co3moz commented Feb 21, 2016

Red soft circle

precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void main() {
    vec2 aspect = resolution.xy / min(resolution.x, resolution.y);
    vec2 position = (gl_FragCoord.xy / resolution.xy) * aspect;
    vec4 color = vec4(0.0);

    if(distance(mouse * aspect, position) < 0.1) {
        color = vec4(1.0 - distance(mouse * aspect, position) * 10.0, 0.0, 0.0, 1.0);  
    }

    gl_FragColor = color;
}

image

@co3moz
Copy link
Author

co3moz commented Feb 22, 2016

Blue and red together

precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void main() {
    vec2 aspect = resolution.xy / min(resolution.x, resolution.y);
    vec2 position = (gl_FragCoord.xy / resolution.xy) * aspect;
    vec4 color = vec4(0.0);

    if (distance(mouse * aspect, position) < 0.1) {
        if (mouse.y * aspect.y < position.y) {
            color = vec4(1.0 - distance(mouse * aspect, position) * 10.0, 0.0, 0.0, 1.0);
        } else {
            color = vec4(0.0, 0.0, 1.0 - distance(mouse * aspect, position) * 10.0, 1.0);
        }
    }

    gl_FragColor = color;
}

image

@co3moz
Copy link
Author

co3moz commented Feb 22, 2016

Rainbow effect.
For rainbow effect we must understand basic sinus formula. sin(x) =? sin(x+2pi) so there is 2pi for color shift. We have 3 different color that r,g,b so for each gets 2pi/3. Basicly if we use this code we get rainbow vec3(sin(x), sin(x + 2pi/3), sin(x + 4pi/3)). Rainbow effect will be done with time so x=time. Lets make a rainbow effect.
2pi/3 = 2.094395
4pi/3 = 4.188790

precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void main() {
  vec2 aspect = resolution.xy / min(resolution.x, resolution.y);
  vec2 position = (gl_FragCoord.xy / resolution.xy) * aspect;
  vec4 color = vec4(0.0);

  if(distance(mouse * aspect, position) < 0.1) {
    float merge = 1.0 - distance(mouse * aspect, position) * 10.0;  
    color = vec4(sin(time) * merge, sin(time + 2.094395) * merge, sin(time + 4.188790) * merge, 1.0);
  }
  gl_FragColor = color;
}

image
image

color is keep changing..

@co3moz
Copy link
Author

co3moz commented Feb 22, 2016

Rotation Red and Blue together

precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void rotate(out vec2 position, float angle) {
    float px = position.x;
    position.x = px * cos(time) - position.y * sin(time);
    position.y = px * sin(time) + position.y * cos(time);   
}

void main() {
    vec2 aspect = resolution.xy / min(resolution.x, resolution.y);
    vec2 position = (gl_FragCoord.xy / resolution.xy) * aspect;
    vec4 color = vec4(0.0);

    vec2 m = mouse * aspect;
    rotate(position, time);
    rotate(m, time);

    if (distance(m , position) < 0.1) {
        if (m.y < position.y) {
            color = vec4(1.0 - distance(m, position) * 10.0, 0.0, 0.0, 1.0);
        } else {
            color = vec4(0.0, 0.0, 1.0 - distance(m, position) * 10.0, 1.0);
        }
    }

    gl_FragColor = color;
}

image

@co3moz
Copy link
Author

co3moz commented Feb 22, 2016

Multicolored

precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void rotate(out vec2 position, float angle) {
    float px = position.x;
    position.x = px * cos(time) - position.y * sin(time);
    position.y = px * sin(time) + position.y * cos(time);
}

void main() {
    vec2 aspect = resolution.xy / min(resolution.x, resolution.y);
    vec2 position = (gl_FragCoord.xy / resolution.xy) * aspect;
    vec4 color = vec4(0.0);

    vec2 m = mouse * aspect;
    rotate(position, time);
    rotate(m, time);

    float size = 0.3;
    if (distance(m, position) < size) {
        float merge = 1.0 - distance(m, position) / size;

        if (m.y < position.y) {
            if (m.x > position.x) {
                color = vec4(merge, 0.0, 0.0, 1.0);
            } else {
                color = vec4(0.0, 0.0, merge, 1.0);
            }
        } else {
            if (m.x > position.x) {
                color = vec4(0.0, merge, 0.0, 1.0);
            } else {
                color = vec4(merge, merge, 0.0, 1.0);
            }
        }
    }

    gl_FragColor = color;
}

image

@co3moz
Copy link
Author

co3moz commented Feb 26, 2016

Spiral Tube
Buffer example

precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
uniform sampler2D buffer;

void rotate(out vec2 position, float angle) {
    float px = position.x;
    position.x = px * cos(time) - position.y * sin(time);
    position.y = px * sin(time) + position.y * cos(time);
}

vec4 loadColorFromBuffer(vec2 position, vec2 aspect, vec2 shift) {
    return texture2D(buffer, position / aspect + shift);
}

void main() {
    vec2 aspect = resolution.xy / min(resolution.x, resolution.y);
    vec2 position = (gl_FragCoord.xy / resolution.xy) * aspect;
    vec4 color = vec4(0.0);
    if (time > 1.0) {
        #define load(x, y) loadColorFromBuffer(position, aspect, vec2(x, y))
        color = (load(0.001, 0.0) / load(-0.001, 0.0));
    }

    vec2 m = vec2(0.7 + sin(time) / 10.0, 0.5 + cos(time) / 10.0) * aspect;
    rotate(position, time);
    rotate(m, time);

    float size = 0.3;
    if (distance(m, position) < size) {
        float merge = 1.0 - distance(m, position) / size;

        if (m.y < position.y) {
            if (m.x > position.x) {
                color = vec4(merge, 0.0, 0.0, 1.0);
            } else {
                color = vec4(0.0, 0.0, merge, 1.0);
            }
        } else {
            if (m.x > position.x) {
                color = vec4(0.0, merge, 0.0, 1.0);
            } else {
                color = vec4(merge, merge, 0.0, 1.0);
            }
        }
    }

    gl_FragColor = color;
}

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment