- Sign In
- Sign Up
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.
// ╔═════════════╦════════════════╗ // ║ 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); }
xxxxxxxxxx
// ╔═════════════╦════════════════╗
// ║ 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);
}
101 fps 18ms
00:00:00.35
0.00