The Code Therapy

Hexagonal Vaporwave Elevator

The hexagonal tiling piece to look at while you listen to Kalax playing Neon Blood, with the usual lovely bad-VHS aesthetics that makes me feel good.

Created by marcogomez on Thu, 27 May 2021 23:02:52 GMT.

Author Twitter Profile: TheCodeTherapy
Author Website: https://mgz.me

hexagon, hexagonal, tiling, VHS, neon, retro, post-processing


// ╔═════════════╦════════════════╗
// ║ Marco Gomez ║ https://mgz.me ║
// ╚═════════════╩════════════════╝
precision highp float;

uniform sampler2D noiseTexture;
uniform sampler2D prgm3Texture;
uniform sampler2D prgm4Texture;
uniform vec2 resolution;
uniform float time;

const float PI = acos(-1.0);
const float TAU = PI * 2.0;
const float SQRTAU = sqrt(TAU);
const float h = 0.0021;
const float v = 0.009;
const float g = 0.21;

float stepm(float a, float b, float c) {
  return step(c, sin(time + a * cos(time * b)));
}

float gaussian(float z, float u, float o) {
  return (1.0 / (o * SQRTAU)) * exp(-(((z - u) * (z - u)) / (2.0 * (o * o))));
}

vec3 grainColor(float t) {
  vec2 ps = vec2(1.0) / resolution.xy;
  vec2 uv = gl_FragCoord.xy * ps;
  float seed = dot(uv, vec2(12.9898, 78.233));
  float noise = fract(sin(seed) * 43758.5453 + t);
  noise = gaussian(noise, 0.0, 0.5);
  return vec3(noise);
}

vec3 rgbShift(vec2 p , vec4 shift, sampler2D tex) {
  shift *= 2.0 * shift.w - 1.0;
  vec2 rs = vec2(shift.x, -shift.y);
  vec2 gs = vec2(shift.y, -shift.z);
  vec2 bs = vec2(shift.z, -shift.x);
  float r = texture2D(tex, p + rs, 0.0).x;
  float g = texture2D(tex, p + gs, 0.0).y;
  float b = texture2D(tex, p + bs, 0.0).z;
  return vec3(r, g, b);
}

vec3 badVHS(vec2 uv, sampler2D tex) {
  float tmod = mod(time * 0.25, 3.0);
  float lookyMod = uv.y - tmod;
  float window = 1.0 / (1.0 + 20.0 * lookyMod * lookyMod);
  float lookyStep = stepm(4.0, 4.0, 0.3);
  uv.x = uv.x + sin(uv.y * 10.0 + time) / 100.0 * lookyStep * (1.0 + cos(time * 80.0)) * window * 0.25;
  float vShift = v * stepm(2.0, 3.0, 0.9) * (sin(time) * sin(time * 20.0) + (0.5 + 0.1 * sin(time * 200.0) * cos(time)));
  uv.y = mod(uv.y + vShift, 5.0);
  vec3 desatColor;
  float _r, _g, _b;
  float x = sin(0.3 * time + uv.y * 21.0) * sin(0.7 * time + uv.y * 29.0) * sin(0.3 + 0.33 * time + uv.y * 31.0) * h;
  _r = texture2D(tex, vec2(x + uv.x + 0.001, uv.y + 0.001)).x + 0.007;
  _g = texture2D(tex, vec2(x + uv.x + 0.000, uv.y - 0.002)).y + 0.007;
  _b = texture2D(tex, vec2(x + uv.x - 0.002, uv.y + 0.000)).z + 0.007;
  _r += 0.08 * texture2D(tex, 0.75 * vec2(x +  0.012, -0.013) + vec2(uv.x + 0.001, uv.y + 0.001)).x;
  _g += 0.05 * texture2D(tex, 0.75 * vec2(x + -0.011, -0.010) + vec2(uv.x + 0.000, uv.y - 0.002)).y;
  _b += 0.08 * texture2D(tex, 0.75 * vec2(x + -0.010, -0.009) + vec2(uv.x - 0.002, uv.y + 0.000)).z;
  float _luma = 0.3 * _r + 0.6 * _g + 0.1 * _b;
  float _desat = 0.3;
  desatColor = vec3(
    _r + _desat * (_luma - _r),
    _g + _desat * (_luma - _g),
    _b + _desat * (_luma - _b)
  );
  desatColor = clamp(desatColor, 0.0, 1.0);
  return desatColor;
}

vec4 staticNoise(vec2 uv) {
  return texture2D(noiseTexture, uv, 0.0);
}

vec4 vec4pow(vec4 v, float p) {
  return vec4(
    pow(v.x, p),
    pow(v.y, p),
    pow(v.z, p),
    v.w
  );
}

float oscillate(float s, float e, float t) {
  return (e - s) * 0.5 + s + sin(t) * (e - s) * 0.5;
}

void main(void) {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  vec3 color = badVHS(uv, prgm4Texture);
  vec3 oColor = color;
  const float rgbShiftSpeed = 0.01;
  const float rgbShiftAmplitude = 0.01;
  vec4 shift = vec4pow(
    staticNoise(
      vec2(rgbShiftSpeed * time, rgbShiftSpeed * time / 25.0 )
    ), 8.0
  ) * vec4(vec3(rgbShiftAmplitude), 1.0);
  color = rgbShift(uv, shift, prgm4Texture);
  float frameScale = 29.97;
  float frameTime = floor(time * frameScale) / frameScale;
  vec3 grain = grainColor(frameTime) * g;
  float scans = clamp(0.35 + 0.35 * sin(3.5 * time + uv.y * resolution.y * 1.5), 0.0, 1.0);
  float s = pow(abs(scans), 2.33);
  color *= vec3( 1.4 + 1.7 * s) * 1.3;
  color -= grain;
  float vig = (0.0 + 1.0 * 16.0 * uv.x * uv.y * (1.0 - uv.x) * (1.0 - uv.y));
  color *= vec3(pow(abs(vig), 0.12));
  color = mix(color * color, texture2D(prgm4Texture, uv).rgb, oscillate(0.3, 0.8, time * 0.5));
  vec4 prgm3 = texture2D(prgm3Texture, uv);
  color = mix(color, prgm3.xyz, 0.5);
  gl_FragColor = vec4(color, 1.0);
}


// ╔═════════════╦════════════════╗
// ║ Marco Gomez ║ https://mgz.me ║
// ╚═════════════╩════════════════╝
precision highp float;

uniform sampler2D noiseTexture;
uniform vec2 resolution;
uniform vec2 mouselerp;
uniform float time;
uniform float fft;

const float PI = acos(-1.0); // π or acos(-1.0) or 180°
const float TAU = PI * 2.0; //  τ = π * 2 or 360°
#define S(r, v) smoothstep(12.0 / resolution.y, 0.0, abs(v - (r)))

const vec3 baseCol = vec3(0.07, 0.15, 0.27);
const float thickness = 0.021;
const float lineOffsetA = 0.42;
const float lineOffsetB = 0.30;

const vec2 h = vec2(1.0, sqrt(3.0));

float hexDist(vec2 uv) {
  uv = abs(uv);
  return max(dot(uv, h * 0.5), uv.x);
}

float hash(vec2 uv) {
  float h = fract(sin(dot(uv.xy, vec2(12.9898, 78.233))) * 43758.5453);
  return h;
}

float noise(vec2 x) {
  vec2 p = floor(x);
  vec2 f = fract(x);
  f = f * f * (3.0 - 2.0 * f);
  float a = texture2D(noiseTexture, (p + vec2(0.5, 0.5 + fft * 0.25)) / 256.0, 0.0).x;
  float b = texture2D(noiseTexture, (p + vec2(1.5, 0.5 + fft * 0.25)) / 256.0, 0.0).x;
  float c = texture2D(noiseTexture, (p + vec2(0.5, 1.5 + fft * 0.25)) / 256.0, 0.0).x;
  float d = texture2D(noiseTexture, (p + vec2(1.5, 1.5 + fft * 0.25)) / 256.0, 0.0).x;
  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
}

vec4 hexCoord(vec2 uv) {
  vec4 center = floor(vec4(uv, uv - vec2(0.5, 1.0)) / h.xyxy) + 0.5;
  vec4 offset = vec4(uv - center.xy * h, uv - (center.zw + 0.5) * h);
  return (
    dot(offset.xy, offset.xy) < dot(offset.zw, offset.zw)
    ? vec4(offset.xy, center.xy)
    : vec4(offset.zw, center.zw)
  );
}

vec2 curve(vec2 uv) {
  uv *= 1.1;
  uv.x *= 1.0 + pow((abs(uv.y) / 5.0), 2.0);
  uv.y *= 1.0 + pow((abs(uv.x) / 5.0), 2.0);
  uv = (uv / 2.0) + 0.5;
  uv = uv * 0.92 + 0.08;
  return uv;
}

vec3 BSC(vec3 color, float brt, float sat, float con) {
  const float AvgLumR = 0.5;
  const float AvgLumG = 0.5;
  const float AvgLumB = 0.5;
  const vec3 LumCoeff = vec3(0.2125, 0.7154, 0.0721);
  vec3 AvgLumin = vec3(AvgLumR, AvgLumG, AvgLumB);
  vec3 brtColor = color * brt;
  vec3 intensity = vec3(dot(brtColor, LumCoeff));
  vec3 satColor = mix(intensity, brtColor, sat);
  vec3 conColor = mix(AvgLumin, satColor, con);
  return conColor;
}

vec2 rotate(vec2 uv, float a) {
  return vec2(uv.x * cos(a) - uv.y * sin(a), uv.x * sin(a) + uv.y * cos(a));
}

void main(void) {
  vec2 uv = (gl_FragCoord.xy / resolution.xy) * 2.0 - 1.0;
  uv = curve(uv) * 10.0;
  float ar = resolution.x / resolution.y;
  uv.x *= ar;
  uv -= vec2(mouselerp.x * ar, mouselerp.y) * 4.5;
  uv.y += time;
  vec4 hex = hexCoord(uv);
  float dist = hexDist(hex.xy) + thickness;
  float rand = mix(noise(hex.zw), noise(hex.zw), 0.6 + fft * 0.3);
  float angle = 3.0 * atan(hex.y, hex.x) + rand * 5.0 + time * 3.0 + fft * 3.0;
  vec3 line = (
    S(lineOffsetA, dist) * baseCol * step(2.0 + rand * 0.5, mod(angle, TAU)) +
    S(lineOffsetB, dist) * baseCol * step(3.0 + rand * 1.5, mod(angle + rand * 2.0, TAU))
  ) * 3.0;
  float sinOffset = sin(time + rand * 8.0 + fft);
  float aa = 5.0 / resolution.y;
  vec3 color = vec3(
    smoothstep(0.51, 0.51 - aa, dist) +
    pow(1.0 - max(0.0, 0.5 - dist), 12.0) * 1.5
  ) * (baseCol + rand * vec3(0.01 + (0.3 - rand * 0.021), rand * 0.05, 0.2));
  color += line + baseCol * smoothstep(0.12 + sinOffset, 0.2 + sinOffset - aa, dist);
  color = clamp(BSC(color, 1.2, 0.8, 0.9), 0.0, 1.0);
  vec3 mask = vec3(noise(rotate(hex.wz, hex.z)));
  color = mix(color, clamp(mask, 0.0, 0.7), 0.6);
  gl_FragColor = vec4(color * color * 1.2, 1.0);
}


// ╔═════════════╦════════════════╗
// ║ Marco Gomez ║ https://mgz.me ║
// ╚═════════════╩════════════════╝
precision highp float;

uniform sampler2D prgm1Texture;
uniform vec2 resolution;

void main(void) {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  vec3 prgm1 = texture2D(prgm1Texture, uv).xyz;
  gl_FragColor = vec4(clamp(prgm1 * prgm1, 0.05, 1.0), 1.0);
}


// ╔═════════════╦════════════════╗
// ║ Marco Gomez ║ https://mgz.me ║
// ╚═════════════╩════════════════╝
precision highp float;

uniform sampler2D prgm2Texture;
uniform vec2 resolution;
uniform float time;

const float PI = acos(-1.0);
const float TAU = PI * 2.0;
const float W = 1.2;
const float T = 7.5;
const float amount = 1.0;
const float reinhardAmount = 0.7;
const float brightness = 1.5;
const float saturation = 1.3;
const float contrast = 0.9;
const vec2 vignetteSize = vec2(0.25, 0.25);
const float vignetteRoundness = 0.12;
const float vignetteMix = 1.2;
const float vignetteSmoothness = 0.42;

float filmicReinhardCurve(float x) {
  float q = (T * T + 1.0) * x * x;
  return q / (q + x + T * T);
}

vec3 filmicReinhard(vec3 c) {
  float w = filmicReinhardCurve(W);
  return vec3(
    filmicReinhardCurve(c.r),
    filmicReinhardCurve(c.g),
    filmicReinhardCurve(c.b)
  ) / w;
}

vec3 ContrastSaturationBrightness(vec3 color, float brt, float sat, float con) {
  const float AvgLumR = 0.5;
  const float AvgLumG = 0.5;
  const float AvgLumB = 0.5;
  const vec3 LumCoeff = vec3(0.2125, 0.7154, 0.0721);
  vec3 AvgLumin = vec3(AvgLumR, AvgLumG, AvgLumB);
  vec3 brtColor = color * brt;
  vec3 intensity = vec3(dot(brtColor, LumCoeff));
  vec3 satColor = mix(intensity, brtColor, sat);
  vec3 conColor = mix(AvgLumin, satColor, con);
  return conColor;
}

float sdSquare(vec2 point, float width) {
  vec2 d = abs(point) - width;
  return min(max(d.x, d.y), 0.0) + length(max(d, 0.0));
}

float vignette(vec2 uv, vec2 size, float roundness, float smoothness) {
  uv -= 0.5;
  float minWidth = min(size.x, size.y);
  uv.x = sign(uv.x) * clamp(abs(uv.x) - abs(minWidth - size.x), 0.0, 1.0);
  uv.y = sign(uv.y) * clamp(abs(uv.y) - abs(minWidth - size.y), 0.0, 1.0);
  float boxSize = minWidth * (1.0 - roundness);
  float dist = sdSquare(uv, boxSize) - (minWidth * roundness);
  return 1.0 - smoothstep(0.0, smoothness, dist);
}

float gaussian(float z, float u, float o) {
  return (
    (1.0 / (o * sqrt(TAU))) *
    (exp(-(((z - u) * (z - u)) / (2.0 * (o * o)))))
  );
}

vec3 gaussgrain(float t) {
  vec2 ps = vec2(1.0) / resolution.xy;
  vec2 uv = gl_FragCoord.xy * ps;
  float seed = dot(uv, vec2(12.9898, 78.233));
  float noise = fract(sin(seed) * 43758.5453123 + t);
  noise = gaussian(noise, 0.0, 0.5);
  return vec3(noise);
}

void main(void) {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  vec4 prgm2 = texture2D(prgm2Texture, uv);
  vec3 reinhard = filmicReinhard(prgm2.rgb);
  vec3 color = prgm2.rgb;
  color = mix(prgm2.rgb, reinhard, reinhardAmount);
  color = ContrastSaturationBrightness(color, brightness, saturation, contrast);
  float v = vignette(uv, vignetteSize, vignetteRoundness, vignetteSmoothness);
  vec3 vig = color * v;
  vec3 g = gaussgrain(time) * 0.03;
  color = mix(color, vig, vignetteMix);
  color = mix(prgm2.rgb, color, amount) - g;
  color = clamp(color, 0.0, 1.0);
  gl_FragColor = vec4(color, 1.0);
}


// ╔═════════════╦════════════════╗
// ║ Marco Gomez ║ https://mgz.me ║
// ╚═════════════╩════════════════╝
precision highp float;

uniform sampler2D prgm3Texture;
uniform vec2 resolution;
uniform vec2 mouselerp;
uniform float time;
uniform float fftNormalized;

const float PI = acos(-1.0);
const float TAU = PI * 2.0;
const float SQRTAU = sqrt(TAU);

const int samples = 8;
const float density = 0.5;
const float weight = 0.7;
const float exposure = 0.55;

float rand(vec2 uv) {
    uv = fract(uv * vec2(5.3987, 5.4421));
    uv += dot(uv.yx, uv.xy + vec2(21.5351, 14.3137));
    float xy = uv.x * uv.y;
    return fract(xy * 95.4307) + fract(xy * 75.04961) - 1.0;
}

float gaussian(float z, float u, float o) {
  return (
    (1.0 / (o * SQRTAU)) *
    (exp(-(((z - u) * (z - u)) / (2.0 * (o * o)))))
  );
}

vec3 gaussgrain(float t) {
  vec2 ps = vec2(1.0) / resolution.xy;
  vec2 uv = gl_FragCoord.xy * ps;
  float seed = dot(uv, vec2(12.9898, 78.233));
  float noise = fract(sin(seed) * 43758.5453123 + t);
  noise = gaussian(noise, 0.0, 0.5);
  return vec3(noise);
}

void main(void) {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  vec2 dist = (uv - (-mouselerp + 0.5));
  float density = 0.75 + 0.2 * sin(2.0 * radians(360.0));
  dist *= 1.0 / float(samples) * density;
  vec3 g = gaussgrain(time) * 0.03;
  vec3 color = texture2D(prgm3Texture, uv).rgb;
  float illuminationdecay = 1.0;
  for (int i = 0; i < samples; i++)   {
    uv -= dist;
    vec3 sample_ = texture2D(prgm3Texture, uv + dist * rand(uv)).rgb - g;
    sample_ *= illuminationdecay * weight;
    color += sample_;
    float decay = 0.6 + fftNormalized * 0.21;
    illuminationdecay *= decay;
  }
  gl_FragColor = vec4(color * exposure, 1.0);
}