Cot Major Image Effect Generator

/**
 * Applies a "Cot Major" Image Effect - A combination of a Cotangent geometric wave 
 * glitch distortion ("Cot") and a standard creepy YTP "Major" invert/tint filter ("Major").
 * 
 * @param {HTMLImageElement} originalImg - The input image to be processed.
 * @param {string|number} wavePeriod - Vertical pixels per cotangent wave cycle.
 * @param {string|number} waveAmplitude - Base intensity of the horizontal cotangent shift.
 * @param {string|number} maxSpike - Max pixel shift (clamps the cotangent infinity spikes).
 * @param {string} tintColorHex - Hex color applied as a tint (default is red for G-Major style).
 * @param {string} invertColors - Whether to invert colors before tinting ("true" or "false").
 * @returns {HTMLCanvasElement} - The canvas with the generated effect.
 */
function processImage(
    originalImg, 
    wavePeriod = "40", 
    waveAmplitude = "15", 
    maxSpike = "150", 
    tintColorHex = "#ff0000", 
    invertColors = "true"
) {
    const width = originalImg.width;
    const height = originalImg.height;

    // Output canvas
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Offscreen canvas to extract original pixel data
    const offCanvas = document.createElement('canvas');
    offCanvas.width = width;
    offCanvas.height = height;
    const offCtx = offCanvas.getContext('2d');
    offCtx.drawImage(originalImg, 0, 0);
    const srcImgData = offCtx.getImageData(0, 0, width, height);
    const srcData = srcImgData.data;

    const outImgData = ctx.createImageData(width, height);
    const dstData = outImgData.data;

    // Parse parameters
    const period = parseFloat(wavePeriod) || 40;
    const amplitude = parseFloat(waveAmplitude) || 15;
    const clamp = parseFloat(maxSpike) || 150;
    const doInvert = String(invertColors).toLowerCase() === 'true';

    // Parse hex tint color (defaults to White/No-tint if invalid)
    let rTint = 255, gTint = 255, bTint = 255;
    const hexMatch = String(tintColorHex).match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
    if (hexMatch) {
        rTint = parseInt(hexMatch[1], 16);
        gTint = parseInt(hexMatch[2], 16);
        bTint = parseInt(hexMatch[3], 16);
    }

    // Process pixel grid
    for (let y = 0; y < height; y++) {
        // Calculate the cotangent horizontal shift
        // Math.cot(x) = 1 / Math.tan(x)
        const angle = (y / period) * Math.PI;
        let dx = amplitude / Math.tan(angle);
        
        // Handle JS edge cases (Infinity, NaN) and clamp the spikes
        if (isNaN(dx)) dx = 0;
        dx = Math.max(-clamp, Math.min(clamp, dx));
        
        const shiftX = Math.round(dx);

        for (let x = 0; x < width; x++) {
            // Apply horizontal shift with wrap-around
            let sx = x + shiftX;
            sx = (sx % width + width) % width; // Ensures positive modulo wrap around

            const srcIdx = (y * width + sx) * 4;
            const dstIdx = (y * width + x) * 4;

            let r = srcData[srcIdx];
            let g = srcData[srcIdx + 1];
            let b = srcData[srcIdx + 2];
            let a = srcData[srcIdx + 3];

            // Apply "Major" color inversion
            if (doInvert) {
                r = 255 - r;
                g = 255 - g;
                b = 255 - b;
            }

            // Apply specific color tinting multiplier
            r = Math.min(255, (r * rTint) / 255);
            g = Math.min(255, (g * gTint) / 255);
            b = Math.min(255, (b * bTint) / 255);

            // Assign processed values to output
            dstData[dstIdx] = r;
            dstData[dstIdx + 1] = g;
            dstData[dstIdx + 2] = b;
            dstData[dstIdx + 3] = a;
        }
    }

    ctx.putImageData(outImgData, 0, 0);
    return canvas;
}