Cringle Major Image Effect Generator

function processImage(originalImg, distortionIntensity = "15", crinkleFrequency = "25", rgbSplit = "3") {
    const intensity = Number(distortionIntensity);
    const frequency = Number(crinkleFrequency);
    const split = Number(rgbSplit);

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;

    // Draw original image to extract pixel data
    ctx.drawImage(originalImg, 0, 0);
    const imgData = ctx.getImageData(0, 0, w, h);
    const data = imgData.data;

    // Create a new ImageData object for the output
    const outImgData = ctx.createImageData(w, h);
    const outData = outImgData.data;

    // Normalize frequency relative to the image size so the crinkles scale well
    const normFreq = frequency / Math.min(w, h);

    // Simple pseudo-random hash for sharp "crinkle" artifacts
    function pseudoNoise(x, y) {
        return Math.sin(x * 12.9898 + y * 78.233) * 43758.5453 % 1;
    }

    for (let y = 0; y < h; y++) {
        for (let x = 0; x < w; x++) {
            // Base sine-wave distortions for the "major" wavy glass/crinkle effect
            const waveX = Math.sin(y * normFreq * Math.PI * 2) * Math.cos(x * normFreq * Math.PI) * intensity;
            const waveY = Math.cos(x * normFreq * Math.PI * 2) * Math.sin(y * normFreq * Math.PI) * intensity;
            
            // Add a layer of high-frequency noise for the "crinkle" texture
            const noiseFactor = (pseudoNoise(x * 0.1, y * 0.1) - 0.5) * (intensity * 0.3);

            const dx = waveX + noiseFactor;
            const dy = waveY + noiseFactor;

            const destIdx = (y * w + x) * 4;

            // Apply RGB channel splitting for a more intense "Major" effect
            for (let c = 0; c < 3; c++) {
                // Channel offset: Red (-split), Green (0), Blue (+split)
                const channelOffset = (c - 1) * split;
                
                let srcX = Math.floor(x + dx + channelOffset);
                let srcY = Math.floor(y + dy + channelOffset);

                // Clamp to edge
                srcX = Math.max(0, Math.min(w - 1, srcX));
                srcY = Math.max(0, Math.min(h - 1, srcY));

                const srcIdx = (srcY * w + srcX) * 4;
                outData[destIdx + c] = data[srcIdx + c];
            }
            // Preserve the original alpha channel bounds or set to fully opaque
            const alphaSrcX = Math.max(0, Math.min(w - 1, Math.floor(x + dx)));
            const alphaSrcY = Math.max(0, Math.min(h - 1, Math.floor(y + dy)));
            outData[destIdx + 3] = data[(alphaSrcY * w + alphaSrcX) * 4 + 3];
        }
    }

    // Put the processed pixel data back onto the canvas
    ctx.putImageData(outImgData, 0, 0);

    return canvas;
}