Image Light Grunge Filter With Artifacts

/**
 * Applies a light grunge filter with artifacts to an image.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {number} grungeLevel A number between 0 and 1 representing the intensity of the grunge texture. Defaults to 0.4.
 * @param {number} artifactCount The number of grunge artifacts (scratches, specks) to add to the image. Defaults to 150.
 * @returns {HTMLCanvasElement} A new canvas element with the filter applied.
 */
function processImage(originalImg, grungeLevel = 0.4, artifactCount = 150) {
    // 1. Setup Canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // 2. Apply base image adjustments for a faded, aged look
    ctx.filter = 'saturate(70%) contrast(120%) brightness(105%)';
    ctx.drawImage(originalImg, 0, 0, width, height);
    ctx.filter = 'none'; // Reset filter for subsequent operations

    // 3. Generate and apply a noise/grunge texture overlay
    // Create a temporary canvas for the texture
    const textureCanvas = document.createElement('canvas');
    textureCanvas.width = width;
    textureCanvas.height = height;
    const textureCtx = textureCanvas.getContext('2d');
    const textureImageData = textureCtx.createImageData(width, height);
    const textureData = textureImageData.data;

    // Fill the texture with random grayscale noise
    for (let i = 0; i < textureData.length; i += 4) {
        const value = Math.random() * 255;
        textureData[i] = value;     // Red
        textureData[i + 1] = value; // Green
        textureData[i + 2] = value; // Blue
        textureData[i + 3] = 255;   // Alpha
    }
    textureCtx.putImageData(textureImageData, 0, 0);

    // Overlay the texture onto the main canvas
    ctx.globalAlpha = Math.max(0, Math.min(1, grungeLevel)); // Clamp grungeLevel between 0 and 1
    ctx.globalCompositeOperation = 'soft-light';
    ctx.drawImage(textureCanvas, 0, 0);

    // Reset composite and alpha settings
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 1.0;

    // 4. Add artifacts (scratches and specks)
    for (let i = 0; i < artifactCount; i++) {
        const randomChoice = Math.random();

        // High probability for small specks
        if (randomChoice < 0.8) {
            // Draw a speck
            const x = Math.random() * width;
            const y = Math.random() * height;
            const radius = Math.random() * 1.5;
            const isLight = Math.random() > 0.5;
            const color = isLight ? '255, 255, 255' : '0, 0, 0';
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2);
            ctx.fillStyle = `rgba(${color}, ${Math.random() * 0.5})`;
            ctx.fill();
        } else {
            // Draw a scratch
            const x1 = Math.random() * width;
            const y1 = Math.random() * height;
            const length = (Math.random() * width) / 7;
            const angle = Math.random() * Math.PI * 2;
            const x2 = x1 + Math.cos(angle) * length;
            const y2 = y1 + Math.sin(angle) * length;
            const isLight = Math.random() > 0.5;
            const color = isLight ? '255, 255, 255' : '0, 0, 0';

            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.strokeStyle = `rgba(${color}, ${Math.random() * 0.3})`;
            ctx.lineWidth = Math.random() * 1.5 + 0.5;
            ctx.stroke();
        }
    }

    // 5. Return the final canvas
    return canvas;
}