Image Prismatic Foil Filter Effect Tool

function processImage(originalImg, rainbowDensity = 1.0, foilIntensity = 0.3, crinkleSize = 60) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

    ctx.drawImage(originalImg, 0, 0, width, height);
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Helper: HSL to RGB converter
    // h, s, l are in [0, 1] range
    // Returns [r, g, b] in [0, 255] range
    function hslToRgb(h, s, l) {
        let r, g, b;
        if (s === 0) {
            r = g = b = l; // achromatic
        } else {
            const hue2rgb = (p, q, t) => {
                if (t < 0) t += 1;
                if (t > 1) t -= 1;
                if (t < 1 / 6) return p + (q - p) * 6 * t;
                if (t < 1 / 2) return q;
                if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
                return p;
            };
            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            const p = 2 * l - q;
            r = hue2rgb(p, q, h + 1 / 3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1 / 3);
        }
        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }

    // Helper: Generates a smooth, crinkle-like pattern value, typically between -1 and 1
    // scale controls the size of the crinkles
    function crinklePattern(x, y, scale) {
        const sX = x / scale;
        const sY = y / scale;
        
        // Sum of a few sine/cosine waves with different frequencies, amplitudes, and orientations
        // This creates an irregular, smooth wave pattern resembling crinkles.
        // Amplitudes (0.4, 0.3, 0.2, 0.1) sum to 1.0, so output is roughly in [-1, 1].
        const val = 
            0.4 * Math.sin(sX * 1.0 + sY * 0.5) +
            0.3 * Math.cos(sX * 0.3 - sY * 0.8) +
            0.2 * Math.sin(sX * 2.2 + sY * 1.5) + // Higher frequency, smaller amplitude
            0.1 * Math.cos(sX * 1.8 - sY * 2.5); // Higher frequency, smaller amplitude
        return val;
    }

    for (let i = 0; i < data.length; i += 4) {
        const rOrig = data[i];
        const gOrig = data[i + 1];
        const bOrig = data[i + 2];

        const x = (i / 4) % width;
        const y = Math.floor((i / 4) / width);

        // 1. Calculate original image luminance (brightness) in [0, 1] range
        const lum = (0.299 * rOrig + 0.587 * gOrig + 0.114 * bOrig) / 255;

        // 2. Calculate prismatic base hue for this pixel
        const normX = x / width;  // Normalized coordinate X [0, 1]
        const normY = y / height; // Normalized coordinate Y [0, 1]
        
        // Swirly hue pattern. `rainbowDensity` scales the "frequency" of color changes.
        // The numeric constants define the base swirl shapes.
        // The final '* 60' scales the overall hue range traversed by the base pattern.
        // `rainbowDensity` modifies the frequency of the sinusoidal components of the pattern.
        let baseHue = (
            (normX * 2.0 + normY * 3.0 + 
            Math.sin(normX * 5.0 * rainbowDensity) * 0.3 + 
            Math.cos(normY * 7.0 * rainbowDensity) * 0.3 +
            Math.sin((normX + normY) * 3.0 * rainbowDensity) * 0.4 
            ) * 60 
        ) % 360; // Hue in degrees [0, 360)
        if (baseHue < 0) baseHue += 360; // Ensure hue is positive

        // 3. Calculate foil crinkle modifier using the crinklePattern function
        // `crinkleSize` determines the apparent size of the crinkles
        const crinkleMod = crinklePattern(x, y, crinkleSize); // Output approx -1 to 1

        // 4. Determine final lightness of the foil pixel
        // Base lightness is derived from original image luminance, mapped to a typical metallic reflectivity range.
        let lightness = lum * 0.6 + 0.15; // Maps luminance [0,1] to lightness [0.15, 0.75]
        // Add crinkle effect (highlights/shadows), scaled by `foilIntensity`
        lightness += crinkleMod * foilIntensity;
        // Clamp perceptual lightness to a range [0.05, 0.95] to avoid pure black/white and maintain color presence.
        lightness = Math.max(0.05, Math.min(0.95, lightness));

        // 5. Determine saturation for the prismatic colors.
        // Kept high for vibrant foil, but could be modulated (e.g., desaturate highlights).
        let saturation = 0.9; // Saturation in [0, 1]

        // 6. Convert HSL (baseHue, saturation, lightness) to RGB
        // Note: baseHue is in degrees, hslToRgb expects h in [0,1]
        const [finalR, finalG, finalB] = hslToRgb(baseHue / 360, saturation, lightness);

        data[i] = finalR;
        data[i + 1] = finalG;
        data[i + 2] = finalB;
        // Alpha channel (data[i+3]) is preserved from the original image
    }

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