tv shader

by Ben Gillbanks

HTML

<canvas id="webgl-canvas" width="512" height="512"></canvas>

JavaScript

// Get the canvas element and initialize WebGL context
const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');
const ctx = canvas.getContext('2d');
console.log(ctx);

// Set canvas size
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getRandomColor() {
    const r = getRandomInt(0, 255);
    const g = getRandomInt(0, 255);
    const b = getRandomInt(0, 255);
    return `rgb(${r},${g},${b})`;
}

function drawRandomRectangles(numRectangles) {
    for (let i = 0; i < numRectangles; i++) {
        const x = getRandomInt(0, canvasWidth);
        const y = getRandomInt(0, canvasHeight);
        const width = getRandomInt(20, 100);
        const height = getRandomInt(20, 100);
        const color = getRandomColor();

        ctx.fillStyle = color;
        ctx.fillRect(x, y, width, height);
    }
}

drawRandomRectangles(50); // Change this number to add more or fewer rectangles







if (!gl) {
    console.error('WebGL not supported, falling back on experimental-webgl');
    gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
    alert('Your browser does not support WebGL');
}

// Define the vertex shader
const vertexShaderSource = `
    attribute vec4 a_position;
    void main() {
        gl_Position = a_position;
    }
`;

// Define the fragment shader
const fragmentShaderSource = `
    precision mediump float;
    uniform float u_time;
    uniform vec2 u_resolution;

    // Function to generate random noise
    float random(vec2 co) {
        return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
    }

    void main() {
        vec2 uv = gl_FragCoord.xy / u_resolution;
        
        // CRT screen bulge effect
        vec2 center = uv - 0.5;
        center.x *= u_resolution.x / u_resolution.y; // Correct aspect ratio
        float len = length(center);
        uv += center *...