runnable fragment

8bit

glitch-core generative glsl runnable fragment MIT
code snippet
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;
uniform int   u_palette;   // 0=CGA1, 1=CGA2, 2=EGA, 3=GameBoy
uniform float u_pixelate;  // block size (1-16)

vec3 pal(float l, int p) {
  if (p == 0) {
    if (l < 0.33) return vec3(0, 0, 0);
    if (l < 0.66) return vec3(0, 1, 1);
    return vec3(1, 0, 1);
  }
  if (p == 1) {
runnable fragment

Antialiased Circle

ericjang-glsl-playground generative glsl runnable fragment MIT
code snippet
precision mediump float;
float circle_transparency(vec2 uv, vec2 center, float radius) {
    float d = length(uv - center) - radius; // if d positive, then is outside circle
    return clamp(d,0.0,1.0); // if d between 0 and 1, blend for anti-aliasing.
}

void main(void) {
    vec2 uv = gl_FragCoord.xy;
    vec2 center = iResolution.xy * 0.5;
    float radius = 0.25 * iResolution.y;

    vec3 background = vec3(.2);
    vec3 foreground = vec3(1,0,0);
    float alpha = circle_transparency(uv, center, radius);
runnable fragment

Channel Invert

glitch-core generative glsl runnable fragment MIT
code snippet
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;
uniform int u_channel; // 0=all, 1=red only, 2=green only, 3=blue only

void main() {
  vec4 c = texture2D(u_texture, v_texCoord);

  if (u_channel == 0) {
    c.rgb = 1.0 - c.rgb;
  } else if (u_channel == 1) {
    c.r = 1.0 - c.r;
  } else if (u_channel == 2) {
runnable fragment

Clock

ericjang-glsl-playground generative glsl runnable fragment MIT
code snippet
precision mediump float;
// Created by inigo quilez - iq/2013
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

uniform vec3 iResolution; // viewport resolution (in pixels)
uniform float iGlobalTime; // shader playback time (in seconds)
uniform vec4 iMouse; // mouse pixel coords. xy: current pixel coords. zw = click pixel
uniform vec4 iDate; // (year, month, day, time in seconds)

float sdSegment( in vec2 p, in vec2 a, in vec2 b )
{
	vec2 pa = p-a, ba = b-a;
	float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 );
	return length( pa - ba*h );
runnable fragment

Crt

glitch-core generative glsl runnable fragment MIT
code snippet
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;
uniform float u_gap;         // pixel gap (1-8)
uniform float u_curve;       // curvature (0-0.3)
uniform float u_vignette;    // vignette intensity (0-1)
uniform float u_dispersion;  // chromatic dispersion (0-0.2)

void main() {
  vec2 uv = v_texCoord;
  vec2 d = uv - 0.5;
  float r = length(d);
  float safeCurve = min(u_curve, 0.25);
runnable fragment

Data Glitch

glitch-core generative glsl runnable fragment MIT
code snippet
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;
uniform float u_intensity; // 0-1
uniform float u_block;     // 4-64
uniform int   u_seed;      // 1-999

float hash(vec2 p) {
  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453 + float(u_seed) * 123.456);
}

void main() {
  vec2 uv = v_texCoord;
runnable fragment

Edge Detect

glitch-core generative glsl runnable fragment MIT
code snippet
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;
uniform float u_intensity; // 0-3
uniform int   u_mode;      // 0=sobel line art, 1=overlay, 2=edges only

float lum(vec3 c) {
  return dot(c, vec3(0.299, 0.587, 0.114));
}

void main() {
  vec2 ps = 1.0 / u_resolution;
runnable fragment

Frag Dla

webgl-shader-examples generative glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Texture with the particle profile
uniform sampler2D u_texture;

// Varying with the aggregation information
varying float v_aggregation;

/*
 * The main program
 */
void main() {
    // Use a different color for aggregated and non-aggregated particles
    vec3 particleColor = v_aggregation < 0.0 ? vec3(1.0) : vec3(0.5);
runnable fragment

Frag Dots

webgl-shader-examples pattern glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;

// Common varyings
varying vec3 v_position;
varying vec3 v_normal;

/*
 * Returns a value between 1 and 0 that indicates if the pixel is inside the circle
runnable fragment

Fragment

zero-x7444ff-shader-art material glsl runnable fragment MIT
code snippet
precision mediump float;
uniform sampler2D uTexture;
uniform float uTextureFrequency;
uniform float u_time;
uniform float uHslTimeFrequency;
uniform float uHslHue;
uniform float uHslHueOffset;
uniform float uHslHueFrequency; 
uniform float uHslLightness; 
uniform float uHslLightnessVariation; 
uniform float uHslLightnessFrequency; 
uniform float uTextureOffset; 

runnable fragment

Fragment

zero-x7444ff-shader-art material glsl runnable fragment MIT
code snippet
precision mediump float;
varying vec2 v_texcoord;
uniform float u_time;
uniform float uAmplitude;
uniform float uScrollSpeed;

uniform sampler2D uDiffuse;

float inverseLerp(float v, float minVal, float maxVal) {
    return (v - minVal) / (maxVal - minVal);
}

float remap(float v, float inMin, float inMax, float outMin, float outMax) {
    float t = inverseLerp(v, inMin, inMax);
runnable fragment

Fragment

qc20-generative-shaders generative glsl runnable fragment MIT
code snippet
precision highp float;
#define O gl_FragColor
uniform float time;
uniform vec2 resolution;
#define FC gl_FragCoord.xy
#define R resolution
#define T time
#define MN min(R.x,R.y)
#define S smoothstep
#define SE(v,a) S(fwidth(a),-.35,v-a)
#define PI radians(180.)
#define lum(a) dot(a,vec3(.21,.71,.07))
#define hue(a)(.5+.5*sin(PI*(a)+vec3(1,2,3)))
vec3 watermark() {
runnable fragment

Fragment

zero-x7444ff-shader-art generative glsl runnable fragment MIT
code snippet
precision mediump float;
uniform float u_time;
uniform float uRandomFloat;
uniform vec2 u_resolution;
varying vec2 v_texcoord;

#include "./helpers/utils.glsl";
const float DAY_LENGTH = 60.0;

// Background Colors
const vec3 MORNING_COLOR1 = vec3(1.0, 0.89, 0.79);
const vec3 MORNING_COLOR2 = vec3(1.0, 0.77, 0.59);
const vec3 MIDDAY_COLOR1 = vec3(0.64, 0.93, 1.0);
const vec3 MIDDAY_COLOR2 = vec3(0.3, 0.66, 1.0);
runnable fragment

Frag Noise

webgl-shader-examples generative glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;

/*
 * GLSL textureless classic 2D noise "cnoise",
 * with an RSL-style periodic variant "pnoise".
 * Author:  Stefan Gustavson (stefan.gustavson@liu.se)
 * Version: 2011-08-22
 *
runnable fragment

Frag Random

webgl-shader-examples generative glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;

/*
 * Random number generator with a vec2 seed
 *
 * Credits:
 * http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0
 * https://github.com/mattdesl/glsl-random
runnable fragment

Frag Sim

webgl-shader-examples generative glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Texture with the particle profile
uniform sampler2D u_texture;

/*
 * The main program
 */
void main() {
    // Get the particle alpha value from the texture
    float alpha = texture2D(u_texture, gl_PointCoord).a;

    // Fragment shader output
    gl_FragColor = vec4(vec3(1.0), alpha);
runnable fragment

Frag Stripes

webgl-shader-examples generative glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;

// Common varyings
varying vec3 v_position;
varying vec3 v_normal;

/*
 *  Calculates the diffuse factor produced by the light illumination
runnable fragment

Frag Tile

webgl-shader-examples pattern glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;

/*
 * Returns a value between 1 and 0 that indicates if the pixel is inside the square
 */
float square(vec2 pixel, vec2 bottom_left, float side) {
    vec2 top_right = bottom_left + side;
runnable fragment

Frag Toon

webgl-shader-examples generative glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;

// Common varyings
varying vec3 v_position;
varying vec3 v_normal;

/*
 *  Calculates the diffuse factor produced by the light illumination
runnable fragment

Frag Wave

webgl-shader-examples pattern glsl runnable fragment LGPL-3.0
code snippet
precision mediump float;
#define GLSLIFY 1
// Common uniforms
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_frame;

// Common varyings
varying vec3 v_position;
varying vec3 v_normal;

/*
 *  Calculates the diffuse factor produced by the light illumination
runnable fragment

Grain

glitch-core material glsl runnable fragment MIT
code snippet
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;
uniform float u_intensity; // 0-1
uniform float u_size;      // grain size (0.5-10)
uniform int   u_color;     // 0=color, 1=grayscale

float hash(vec2 p) {
  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
}

void main() {
  vec4 c = texture2D(u_texture, v_texCoord);
runnable fragment

Halftone

glitch-core generative glsl runnable fragment MIT
code snippet
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;
uniform float u_size;      // dot size (2-30)
uniform float u_angle;     // degrees (0-90)
uniform int   u_type;      // 0=dots, 1=lines

float lum(vec3 c) {
  return dot(c, vec3(0.299, 0.587, 0.114));
}

void main() {
  vec2 uv = v_texCoord * u_resolution;
runnable fragment

Kaleidoscope

glitch-core generative glsl runnable fragment MIT
code snippet
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;
uniform float u_sides;     // number of sides (2-16)
uniform float u_angle;     // rotation angle (0-6.28)
uniform vec2 u_center;     // center point (0-1)

void main() {
  vec2 uv = v_texCoord - u_center;
  float a = atan(uv.y, uv.x) + u_angle;
  float r = length(uv);
  float seg = 3.14159 * 2.0 / u_sides;
  a = mod(a, seg);
runnable fragment

Pixelate

glitch-core generative glsl runnable fragment MIT
code snippet
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;
uniform float u_block; // pixel block size (2-64)

void main() {
  vec2 uv = v_texCoord;
  uv = floor(uv * u_resolution / u_block) * u_block / u_resolution + u_block / u_resolution * 0.5;
  gl_FragColor = texture2D(u_texture, uv);
}
runnable fragment

Pixel Sort

glitch-core generative glsl runnable fragment MIT
code snippet
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;
uniform float u_intensity;   // 0.0-1.0
uniform float u_threshold;   // 0.0-1.0 brightness threshold
uniform float u_direction;   // 0=horizontal, 1=vertical

float luminance(vec3 c) {
  return dot(c, vec3(0.299, 0.587, 0.114));
}

void main() {
  vec2 uv = v_texCoord;
runnable fragment

Rgb Shift

glitch-core generative glsl runnable fragment MIT
code snippet
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;
uniform vec2 u_rOffset;  // red channel offset (px)
uniform vec2 u_bOffset;  // blue channel offset (px)

void main() {
  vec2 pixelSize = 1.0 / u_resolution;

  float r = texture2D(u_texture, v_texCoord + u_rOffset * pixelSize).r;
  float g = texture2D(u_texture, v_texCoord).g;
  float b = texture2D(u_texture, v_texCoord + u_bOffset * pixelSize).b;
  float a = texture2D(u_texture, v_texCoord).a;
runnable fragment

Scanlines

glitch-core generative glsl runnable fragment MIT
code snippet
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;
uniform float u_density;    // scanline spacing (px)
uniform float u_opacity;    // 0.0-1.0
uniform vec3 u_color;       // scanline color

void main() {
  vec4 texColor = texture2D(u_texture, v_texCoord);
  float lineY = v_texCoord.y * u_resolution.y;

  float line = step(0.5, mod(lineY, u_density) / u_density);
  vec3 blended = mix(texColor.rgb, u_color * texColor.rgb, line * u_opacity);
runnable fragment

Stretch

glitch-core generative glsl runnable fragment MIT
code snippet
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;
uniform float u_intensity; // 0-1
uniform int   u_direction; // 0=horizontal, 1=vertical

void main() {
  vec2 uv = v_texCoord;

  if (u_direction == 0) {
    float band = floor(uv.y * u_resolution.y / 8.0);
    float off = (fract(sin(band * 127.1) * 43758.54) - 0.5) * u_intensity * 0.05;
    uv.x += off;
runnable fragment

Vhs

glitch-core generative glsl runnable fragment MIT
code snippet
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;
uniform float u_track;     // tracking noise (0-1)
uniform float u_noise;     // noise level (0-0.5)
uniform float u_bleed;     // color bleed (0-1)

float hash(vec2 p) {
  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
}

void main() {
  vec2 uv = v_texCoord;
runnable fragment

Wave

glitch-core pattern glsl runnable fragment MIT
code snippet
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;
uniform float u_amplitude; // px
uniform float u_frequency; // waves across image
uniform int   u_direction; // 0=horizontal, 1=vertical, 2=radial

void main() {
  vec2 uv = v_texCoord;
  float amp = u_amplitude / u_resolution.x;
  float freq = u_frequency * 6.28318;
  float offset = 0.0;