Image To HSL HSV HSI And Halftone Converter

function processImage(originalImg, conversionType = 'HSL', halftoneDotSize = 5) {
    const canvas = document.createElement('canvas');
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    
    const type = String(conversionType).toUpperCase();
    
    if (type === 'HALFTONE') {
        const imageData = ctx.getImageData(0, 0, w, h);
        const data = imageData.data;
        
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, w, h);
        ctx.fillStyle = '#000000';
        
        // Ensure minimum dot size to avoid infinite loops or browser freezing
        const dotSize = Math.max(2, parseInt(halftoneDotSize, 10) || 5);
        
        for (let y = 0; y < h; y += dotSize) {
            for (let x = 0; x < w; x += dotSize) {
                let rSum = 0, gSum = 0, bSum = 0, count = 0;
                
                // Average the pixel data in this block
                for (let dy = 0; dy < dotSize && y + dy < h; dy++) {
                    for (let dx = 0; dx < dotSize && x + dx < w; dx++) {
                        let idx = ((y + dy) * w + (x + dx)) * 4;
                        rSum += data[idx];
                        gSum += data[idx + 1];
                        bSum += data[idx + 2];
                        count++;
                    }
                }
                
                const rAvg = rSum / count;
                const gAvg = gSum / count;
                const bAvg = bSum / count;
                
                // Convert to grayscale
                const gray = 0.299 * rAvg + 0.587 * gAvg + 0.114 * bAvg;
                const lightness = gray / 255;
                
                // Calculate radius (darker areas have larger dots)
                // Use square root for better overlapping and perceived density
                const radius = (Math.sqrt(1 - lightness) * dotSize) / 1.4;
                
                if (radius > 0.1) {
                    ctx.beginPath();
                    ctx.arc(x + dotSize / 2, y + dotSize / 2, radius, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
        }
    } else {
        const imageData = ctx.getImageData(0, 0, w, h);
        const data = imageData.data;
        
        for (let i = 0; i < data.length; i += 4) {
            let r = data[i] / 255;
            let g = data[i + 1] / 255;
            let b = data[i + 2] / 255;
            
            let cmax = Math.max(r, g, b);
            let cmin = Math.min(r, g, b);
            let delta = cmax - cmin;
            
            // Calculate Hue
            let hue = 0;
            if (delta === 0) {
                hue = 0;
            } else if (cmax === r) {
                hue = 60 * (((g - b) / delta) % 6);
            } else if (cmax === g) {
                hue = 60 * (((b - r) / delta) + 2);
            } else {
                hue = 60 * (((r - g) / delta) + 4);
            }
            
            if (hue < 0) hue += 360;
            let hNorm = hue / 360;
            
            let s = 0, v = 0, l = 0, inst = 0;
            
            // Map the calculated colorspace components back to RGB pixels for visualizing
            if (type === 'HSV' || type === 'HSB') {
                v = cmax;
                s = cmax === 0 ? 0 : delta / cmax;
                
                data[i] = hNorm * 255;      // R maps to Hue
                data[i + 1] = s * 255;      // G maps to Saturation
                data[i + 2] = v * 255;      // B maps to Value
                
            } else if (type === 'HSI') {
                inst = (r + g + b) / 3;
                s = inst === 0 ? 0 : 1 - (cmin / inst);
                
                data[i] = hNorm * 255;      // R maps to Hue
                data[i + 1] = s * 255;      // G maps to Saturation
                data[i + 2] = inst * 255;   // B maps to Intensity
                
            } else { 
                // Default to HSL
                l = (cmax + cmin) / 2;
                s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
                
                data[i] = hNorm * 255;      // R maps to Hue
                data[i + 1] = s * 255;      // G maps to Saturation
                data[i + 2] = l * 255;      // B maps to Lightness
            }
        }
        ctx.putImageData(imageData, 0, 0);
    }
    
    return canvas;
}