A Tribute to Phenomena +dither

A tribute to the unforgettable 90s aesthetics and to the pioneer giants whose shoulders we stand on.

Created by marcogomez on Sat, 21 Aug 2021 20:50:32 GMT.


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

uniform	sampler2D eTexture0; // https://i.imgur.com/N9yUvGf.png
uniform sampler2D prgm1Texture;
uniform sampler2D prgm2Texture;
uniform vec2 resolution;
uniform float time;
uniform float alpha;

const vec3 tWhite = vec3(1.0);
const float tPixelSize = 8.0;
const float transitionSpread = 0.21;
const float transitionSpeed = 0.15;
const float transitionIntensity = 32.0;

void main(void) {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  vec4 prgm1 = texture2D(prgm1Texture, uv);
  vec4 prgm2 = texture2D(prgm2Texture, uv);
  vec2 noiseCell = floor(gl_FragCoord.xy / tPixelSize);
  vec2 noiseUV = noiseCell / resolution.xy;
  float noise = texture2D(eTexture0, noiseUV).x * transitionSpread;
  float progress = (time * transitionSpeed) + noiseUV.y + noise;
  float peak = cos(progress) * transitionIntensity;
  float transition = clamp(peak, 0.0, 1.0);
  vec4 col = mix(prgm2, prgm1, transition);
  gl_FragColor = col;
}

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

uniform vec2 resolution;
uniform float time;

#define t time * 0.7
const int starsPerPlane = 30;
const int planes = 4;
const float barSize = 0.12;
const float barsAng = 1.4;
vec2 barPos;
vec3 barCol;
vec3 cp;

float rand (vec2 uv) {
  return fract(sin(dot(uv, vec2(12.4124, 48.4124))) * 48512.41241);
}

float noise (vec2 uv) {
  vec2 b = floor(uv);
  return mix(
    mix(rand(b), rand(b + vec2(1.0, 0.0)), 0.5),
    mix(rand(b + vec2(0.0, 1.0)), rand(b + vec2(1.0, 1.0)), 0.5),
    0.5
  );
}

vec3 mixCol(float val, float r, float g, float b) {
  return vec3(val * r, val * g, val * b);
}

void bar(float pos, float r, float g, float b) {
  if (
    (barPos.y <= pos + barSize) &&
    (barPos.y >= pos - barSize)
  ) {
    barCol = mixCol(1.0 - abs(pos - barPos.y) / barSize, r, g, b);
  }
}


vec3 twist(vec3 p) {
  float f = sin(t / 3.0) * 1.45;
  float c = cos(f * p.y);
  float s = sin(f / 2.0 * p.y);
  mat2 m = mat2(c, -s, s, c);
  return vec3(m * p.xz, p.y);
}

float cube(vec3 p) {
  p = twist(p);
  cp.x = sin(-t);
  cp.y = cos(-t);
  mat2 m = mat2(cp.y, -cp.x, cp.x, cp.y);
  p.xy *= m; p.xy *= m; p.yz *= m;
  p.zx *= m; p.zx *= m; p.zx *= m;
  cp = p;
  return length(max(abs(p) - vec3(0.4), 0.0)) - 0.08;
}

float face(vec2 uv) {
  uv.y = mod(uv.y, 1.0);
  return (uv.y < uv.x != 1.0 - uv.y < uv.x) ? 1.0 : 0.0;
}

vec3 getNormal(vec3 p) {
  vec2 e = vec2(0.005, -0.005);
  return normalize(
    e.xyy * cube(p + e.xyy) +
    e.yyx * cube(p + e.yyx) +
    e.yxy * cube(p + e.yxy) +
    e.xxx * cube(p + e.xxx)
  );
}

void main(void) {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  vec2 suv = uv;
  uv = uv * 2.0 - 1.0;
  float ar = resolution.x / resolution.y;
  uv.x *= ar;
  uv *= 1.2;
  float x = gl_FragCoord.x;
  float stp = 1.0;
  float dist = 0.0;
  float near = -1.0;
  float far = -1.0;
  vec3 lightPos = vec3(1.5, 0.5, 1.0);
  float hitdist = -1.0;
  float ay = max(0.1, 0.5 - t / 6.0);
  vec3 ro = vec3(0.0, 0.0, 2.1);
  vec3 rd = normalize(vec3(uv, -2.0));
  for (int i = 0; i < 128; i++) {
    stp = cube(ro + rd * dist);
    dist += stp * 0.5;
    if (dist > 4.0) { break; }
    if (stp < 0.01) {
      far = (
        face(+cp.yx) +
        face(-cp.yx) +
        face(+cp.xz) +
        face(-cp.xz) +
        face(+cp.zy) +
        face(-cp.zy)
      );
      if (hitdist < 0.0) { hitdist = dist; }
      if (near < 0.0) { near = far; }
      dist += 0.05;
    }
  }
  const float speed = 42.0;
  const int layers = 12;
  float stars = 0.0;
  float fl, s;
  for (int layer = 0; layer < layers; layer++) {
    fl = float(layer);
    s = (500.0 - fl * 30.0);
    stars += step(
      0.1,
      pow(
        abs(noise(mod(vec2(suv.x * s + time * speed - fl * 100.0, suv.y * s), resolution.x))),
        21.0
      )
    ) * (fl / float(layers));
  }
  barPos = uv;
  barCol = vec3(stars);
  bar(sin(time                      ), 1.0, 0.0, 0.0);
  bar(sin(time + barsAng / 6.0      ), 1.0, 1.0, 0.0);
  bar(sin(time + barsAng / 6.0 * 2.0), 0.0, 1.0, 0.0);
  bar(sin(time + barsAng / 6.0 * 3.0), 0.0, 1.0, 1.0);
  bar(sin(time + barsAng / 6.0 * 4.0), 0.5, 0.0, 1.0);
  bar(sin(time + barsAng / 6.0 * 5.0), 1.0, 0.0, 1.0);
  vec3 col = barCol;
  if (near > 0.0) {
    vec3 sp = ro + rd * hitdist;
    vec3 ld = lightPos - sp;
    float lDist = max(length(ld), 0.001);
    ld /= lDist;
    float atten = 1.0 / (1.0 + lDist * 0.2 + lDist * 0.1);
    float ambience = 0.5;
    vec3 sn = getNormal(sp);
    float diff = min(0.3, max(dot(sn, ld), 0.0));
    float spec = pow(max(dot(reflect(-ld, sn), -rd), 0.0), 32.0);
    col = mix(
      vec3(0.12, 0.0, 0.3),
      vec3(1.0, 1.0, 1.0),
      vec3((near * 0.45 + far * far * 0.04))
    );
    col = col * (diff + ambience) + vec3(0.78, 0.5, 1.0) * spec / 1.5;
  }
  float gs = 2.0;
  float grid = (
    (mod(floor((suv.x) * resolution.x / gs), 2.0) == 0.0 ? 1.0 : 0.0) *
    (mod(floor((suv.y) * resolution.y / gs), 2.0) == 0.0 ? 1.0 : 0.0)
  );
  gl_FragColor = vec4(col, 1.0);
}

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

uniform sampler2D prgm1Texture;
uniform vec2 resolution;

const mat4 bayertl = mat4(
  00.0 / 64.0, 32.0 / 64.0, 08.0 / 64.0, 40.0 / 64.0,
  48.0 / 64.0, 16.0 / 64.0, 56.0 / 64.0, 24.0 / 64.0,
  12.0 / 64.0, 44.0 / 64.0, 04.0 / 64.0, 36.0 / 64.0,
  60.0 / 64.0, 28.0 / 64.0, 52.0 / 64.0, 20.0 / 64.0
);

const mat4 bayertr = mat4(
  02.0 / 64.0, 34.0 / 64.0, 10.0 / 64.0, 42.0 / 64.0,
  50.0 / 64.0, 18.0 / 64.0, 58.0 / 64.0, 26.0 / 64.0,
  14.0 / 64.0, 46.0 / 64.0, 06.0 / 64.0, 38.0 / 64.0,
  62.0 / 64.0, 30.0 / 64.0, 54.0 / 64.0, 22.0 / 64.0
);

const mat4 bayerbl = mat4(
  03.0 / 64.0, 35.0 / 64.0, 11.0 / 64.0, 43.0 / 64.0,
  51.0 / 64.0, 19.0 / 64.0, 59.0 / 64.0, 27.0 / 64.0,
  15.0 / 64.0, 47.0 / 64.0, 07.0 / 64.0, 39.0 / 64.0,
  63.0 / 64.0, 31.0 / 64.0, 55.0 / 64.0, 23.0 / 64.0
);

const mat4 bayerbr = mat4(
  01.0 / 64.0, 33.0 / 64.0, 09.0 / 64.0, 41.0 / 64.0,
  49.0 / 64.0, 17.0 / 64.0, 57.0 / 64.0, 25.0 / 64.0,
  13.0 / 64.0, 45.0 / 64.0, 05.0 / 64.0, 37.0 / 64.0,
  61.0 / 64.0, 29.0 / 64.0, 53.0 / 64.0, 21.0 / 64.0
);

float dither(mat4 m, ivec2 p) {
  if (p.y == 0) {
    if (p.x == 0) { return m[0][0]; }
    else if (p.x == 1) { return m[1][0]; }
    else if (p.x == 2) { return m[2][0]; }
    else { return m[3][0]; }
  } else if (p.y == 1) {
    if (p.x == 0) { return m[0][1]; }
    else if (p.x == 1) { return m[1][1]; }
    else if (p.x == 2) { return m[2][1]; }
    else { return m[3][1]; }
  } else if (p.y == 2) {
    if (p.x == 0) { return m[0][1]; }
    else if (p.x == 1) { return m[1][2]; }
    else if (p.x == 2) { return m[2][2]; }
    else { return m[3][2]; }
  } else {
    if (p.x == 0) { return m[0][3]; }
    else if (p.x == 1) { return m[1][3]; }
    else if (p.x == 2) { return m[2][3]; }
    else { return m[3][3]; }
  }
}

void main(void) {
  ivec2 p = ivec2(mod(gl_FragCoord.xy, 8.0));
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  vec4 prgm1 = texture2D(prgm1Texture, uv);
  vec3 c = prgm1.xyz;
  c = pow(abs(c), vec3(2.2));
  c -= 1.0 / 255.0;
  vec3 d = vec3(0.0);
  if (p.x <= 3 && p.y <= 3) {
    d.r = float(c.r > dither(bayertl, p));
    d.g = float(c.g > dither(bayertl, p));
    d.b = float(c.b > dither(bayertl, p));
  } else if (p.x > 3 && p.y <= 3) {
    d.r = float(c.r > dither(bayertr, p - ivec2(4, 0)));
    d.g = float(c.g > dither(bayertr, p - ivec2(4, 0)));
    d.b = float(c.b > dither(bayertr, p - ivec2(4, 0)));
  } else if (p.x <= 3 && p.y > 3) {
    d.r = float(c.r > dither(bayerbl, p - ivec2(0, 4)));
    d.g = float(c.g > dither(bayerbl, p - ivec2(0, 4)));
    d.b = float(c.b > dither(bayerbl, p - ivec2(0, 4)));
  } else if (p.x > 3 && p.y > 3) {
    d.r = float(c.r > dither(bayerbr, p - ivec2(4, 4)));
    d.g = float(c.g > dither(bayerbr, p - ivec2(4, 4)));
    d.b = float(c.b > dither(bayerbr, p - ivec2(4, 4)));
  }
  vec4 color = vec4(d, 1.0);
  gl_FragColor = color;
}