C-Major Image Effect Generator

/**
 * Applies a "C-Major" Image Effect.
 * Inspired by color harmony and synesthesia, this effect snaps the hues of the image
 * towards a primary "C-Major chord" color triad: Red (Root), Yellow (Major 3rd), 
 * and Blue (Perfect 5th). It also bumps the brightness and saturation to create 
 * a cheerful, vibrant, and harmonious feeling.
 * 
 * @param {HTMLImageElement} originalImg - The input image.
 * @param {string|number} intensity - The strength of the hue shifting (0 to 100).
 * @param {string|number} brightBump - How much to bump the brightness (0 to 100).
 * @param {string|number} satBump - How much to boost the saturation (0 to 100).
 * @returns {HTMLCanvasElement} - The processed canvas.
 */
function processImage(originalImg, intensity = "80", brightBump = "5", satBump = "15") {
    // Sanitize parameters
    const safeIntensity = isNaN(Number(intensity)) ? 80 : Number(intensity);
    const safeBright = isNaN(Number(brightBump)) ? 5 : Number(brightBump);
    const safeSat = isNaN(Number(satBump)) ? 15 : Number(satBump);

    const pIntensity = Math.min(100, Math.max(0, safeIntensity)) / 100;
    const pBright = safeBright / 100;
    const pSat = safeSat / 100;

    // Create a canvas to manipulate the image
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    
    // Draw original image
    ctx.drawImage(originalImg, 0, 0);

    // Get pixel data
    const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imgData.data;

    // "C-Major" Anchors in Degrees representing Red (0), Yellow (60), Blue (240)
    const anchors = [0, 60, 240];

    // Helper functions for color space conversion
    function rgbToHsl(r, g, b) {
        r /= 255; g /= 255; b /= 255;
        let v = Math.max(r, g, b), cmin = Math.min(r, g, b);
        let c = v - cmin;
        let h = 0, s = 0, l = (v + cmin) / 2;
        if (c !== 0) {
            s = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);
            if (v === r) h = (g - b) / c + (g < b ? 6 : 0);
            else if (v === g) h = (b - r) / c + 2;
            else h = (r - g) / c + 4;
            h /= 6;
        }
        return [h * 360, s, l];
    }

    function hslToRgb(h, s, l) {
        h /= 360;
        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;
            };
            let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            let p = 2 * l - q;
            r = hue2rgb(p, q, h + 1/3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1/3);
        }
        return [r * 255, g * 255, b * 255];
    }

    // Process each pixel
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        
        // Skip fully transparent pixels
        if (data[i + 3] === 0) continue;

        let [h, s, l] = rgbToHsl(r, g, b);

        // Shift Hue towards the nearest C-Major triad color if saturation is significant
        if (s > 0.05) {
            let minDiff = Infinity;
            let targetHue = h;

            // Find the closest anchor
            for (let i = 0; i < anchors.length; i++) {
                let anchor = anchors[i];
                let diff = anchor - h;
                
                // Normalize distance on a circle (-180 to 180)
                while (diff > 180) diff -= 360;
                while (diff < -180) diff += 360;

                if (Math.abs(diff) < Math.abs(minDiff)) {
                    minDiff = diff;
                    targetHue = anchor;
                }
            }

            // Calculate exact shift based on intensity parameter
            let diff = targetHue - h;
            while (diff > 180) diff -= 360;
            while (diff < -180) diff += 360;

            let newH = h + diff * pIntensity;
            h = (newH % 360 + 360) % 360; // Keep in 0-359 range
        }

        // Apply cheerful tuning (bump saturation and lightness)
        s = Math.min(1, s + (s * pSat * pIntensity));
        l = Math.min(1, Math.max(0, l + (pBright * pIntensity)));

        let [nr, ng, nb] = hslToRgb(h, s, l);

        data[i] = nr;
        data[i + 1] = ng;
        data[i + 2] = nb;
    }

    // Put modified data back onto canvas
    ctx.putImageData(imgData, 0, 0);

    return canvas;
}