<!DOCTYPE html>
<html lang="en">
<head>
<script src="/content/7e37766541506810ba6399c4b2735121f508bd9209df43dd200bf2316b014594i0"></script>
<style>
html, body { margin: 0; padding: 0; }
canvas { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
</style>
<meta charset="utf-8" />
</head>
<body>
<script>
let img;
let theShader;
let shaderGraphics;
// Glitch effect parameters
let glitch_size = 0.00720;
let glitch_horizontal = 0.32505405;
let glitch_vertical = 0.1505405;
let randomize_size = true;
let randomize_zoom = true;
let offset = [1.5, 1.5];
let blendFactor = 0.51;
const vertShaderSource = `
attribute vec3 aPosition;
attribute vec2 aTexCoord;
varying vec2 vTexCoord;
void main() {
vTexCoord = aTexCoord;
vec4 positionVec4 = vec4(aPosition, 1.0);
positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
gl_Position = positionVec4;
}
`;
const fragShaderSource = `
precision mediump float;
uniform sampler2D iChannel0;
uniform float iTime;
uniform vec2 iResolution;
uniform bool iDeactivate;
uniform float glitch_size;
uniform float glitch_horizontal;
uniform float glitch_vertical;
uniform bool randomize_size;
uniform bool randomize_zoom;
uniform vec2 offset;
uniform float blendFactor;
varying vec2 vTexCoord;
float rand(vec2 co) {
return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
}
float randomNoise(vec2 seed) {
return fract(sin(dot(seed * floor(iTime * 7.0), vec2(17.13, 3.71))) * 43758.5453123);
}
vec3 applyCRTEffect(vec2 uv, vec3 color) {
float scanline_intensity = 0.1;
float scanline = sin(uv.y * 800.0) * scanline_intensity;
color.rgb -= scanline;
return color;
}
vec3 increaseContrast(vec3 color, float amount) {
return clamp((color - 0.5) * amount + 0.5, 0.0, 1.0);
}
void main() {
vec2 uv = vTexCoord;
uv.y = 1.0 - uv.y;
// Original glitch effect
vec4 colorR = texture2D(iChannel0, uv);
vec4 colorG = texture2D(iChannel0, uv);
vec4 colorB = texture2D(iChannel0, uv);
if (!iDeactivate) {
float block = randomNoise(floor(uv * 5.0));
float displaceNoise = pow(block, 8.0) * pow(block, 3.0);
float splitRGBNoise = pow(randomNoise(vec2(7.2341, 1.0)), 17.0);
float offsetX = (displaceNoise - splitRGBNoise) * 6.0 - 1.0;
float offsetY = (displaceNoise - splitRGBNoise) * 6.0 - 1.0;
float noiseX = 0.01 * (randomNoise(vec2(13.0, 1.0)) * 2.0 - .50);
float noiseY = 0.01 * (randomNoise(vec2(7.0, 1.0)) * 2.0 - .50);
vec2 glitchOffset = vec2(offsetX * noiseX, offsetY * noiseY);
colorR = texture2D(iChannel0, uv + glitchOffset);
colorG = texture2D(iChannel0, uv - glitchOffset);
colorB = texture2D(iChannel0, uv + glitchOffset * 0.5);
}
vec3 color = vec3(colorR.r, colorG.g, colorB.b);
// New glitch effect
vec2 xy = uv;
vec2 random;
float local_glitch_size = glitch_size;
float random_offset = 0.0;
if (randomize_size) {
random_offset = mod(rand(vec2(iTime, iTime)), 0.5);
local_glitch_size = random_offset * glitch_size;
}
if (local_glitch_size > 0.0) {
random.x = rand(vec2(floor(random_offset + xy.y / local_glitch_size) * local_glitch_size, iTime));
random.y = rand(vec2(floor(random_offset + xy.x / local_glitch_size) * local_glitch_size, iTime));
} else {
random.x = rand(vec2(xy.x, iTime));
random.y = rand(vec2(xy.y, iTime));
}
if (randomize_zoom) {
if ((random.x < glitch_horizontal) && (random.y < glitch_vertical)) {
float level = rand(vec2(random.x, random.y)) / 5.0 + 0.90;
xy = (xy - vec2(0.5)) * (1.0 / level) + vec2(0.5);
} else if (random.x < glitch_horizontal) {
float level = (random.x) + 0.98;
xy = (xy - vec2(0.5)) * (1.0 / level) + vec2(0.5);
} else if (random.y < glitch_vertical) {
float level = (random.y) + 0.98;
xy = (xy - vec2(0.5)) * (1.0 / level) + vec2(0.5);
}
}
if ((random.x < glitch_horizontal) && (random.y < glitch_vertical)) {
vec2 shift = (offset - 0.5);
shift = shift * rand(shift + random);
xy.x = mod(xy.x + random.x, 1.0);
xy.y = mod(xy.y + random.y, 1.0);
xy = xy + shift;
} else if (random.x < glitch_horizontal) {
vec2 shift = (offset - 0.5);
shift = shift * rand(shift + random);
xy = mod(xy + vec2(0.0, random.x) + shift, 1.0);
} else if (random.y < glitch_vertical) {
vec2 shift = (offset - 0.5);
shift = shift * rand(shift + random);
xy = mod(xy + vec2(random.y, 0.0) + shift, 1.0);
}
// Combine both glitch effects
vec3 newColor = texture2D(iChannel0, xy).rgb;
color = mix(color, newColor, 0.5);
// Increase contrast
color = increaseContrast(color, 2.0); // Adjust the 1.5 value to increase or decrease contrast
// Add video grain effect
float grainIntensity = rand(xy * iTime) * 0.15;
vec3 grainColor = vec3(grainIntensity);
float grainBlend = .50;
color = mix(color, color + grainColor, grainBlend);
// Apply CRT grid effect
color = applyCRTEffect(xy, color);
gl_FragColor = vec4(color, 1.0);
}
`;
function preload() {
img = loadImage('/content/6b010c895438aaea2e6835a5c5632445bdc592b5677fbc833b024fc0f53c205bi0');
}
function setup() {
createCanvas(windowWidth, windowHeight);
// Create a separate WEBGL graphics buffer for the shader
shaderGraphics = createGraphics(windowWidth, windowHeight, WEBGL);
// Create shader in the WEBGL context
theShader = shaderGraphics.createShader(vertShaderSource, fragShaderSource);
img.originalWidth = img.width;
img.originalHeight = img.height;
}
function draw() {
background(0);
shaderGraphics.shader(theShader);
theShader.setUniform("iResolution", [width, height]);
theShader.setUniform("iTime", millis() / 1100.0);
theShader.setUniform('iChannel0', img);
theShader.setUniform('iDeactivate', false);
theShader.setUniform('glitch_size', glitch_size);
theShader.setUniform('glitch_horizontal', glitch_horizontal);
theShader.setUniform('glitch_vertical', glitch_vertical);
theShader.setUniform('randomize_size', randomize_size);
theShader.setUniform('randomize_zoom', randomize_zoom);
theShader.setUniform('offset', offset);
theShader.setUniform('blendFactor', blendFactor);
shaderGraphics.rect(0, 0, width, height);
let aspectRatio = img.originalWidth / img.originalHeight;
let newWidth, newHeight;
if (width / height > aspectRatio) {
newWidth = height * aspectRatio;
newHeight = height;
} else {
newWidth = width;
newHeight = width / aspectRatio;
}
image(shaderGraphics, (width - newWidth) / 2, (height - newHeight) / 2, newWidth, newHeight);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
shaderGraphics.resizeCanvas(windowWidth, windowHeight);
}
</script>
</body>
</html>