Image Mischievous Filter App

function processImage(originalImg, intensity = 20, colorShift = 10, noiseLevel = 40) {
    // Parse parameters to ensure they are handled as numbers
    const distIntensity = parseFloat(intensity) || 20;
    const shift = parseFloat(colorShift) || 10;
    const noiseAmt = parseFloat(noiseLevel) || 40;

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

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

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

    // Create a new ImageData object for the final "mischievous" output
    const outData = ctx.createImageData(width, height);
    const out = outData.data;

    // Scale effects somewhat based on image size for consistency
    const sizeFactor = Math.max(width, height) / 800;
    const scaledIntensity = distIntensity * sizeFactor;
    const scaledShift = shift * sizeFactor;
    
    // Wave frequencies for a funhouse / wobble effect
    const waveFreqX = 0.05 / sizeFactor;
    const waveFreqY = 0.05 / sizeFactor;

    // Helper function to safely get a pixel's color channel
    const getPixelChannel = (px, py, channelOffset) => {
        // Clamp coordinates to image boundaries
        let safeX = Math.max(0, Math.min(width - 1, px));
        let safeY = Math.max(0, Math.min(height - 1, py));
        return data[(safeY * width + safeX) * 4 + channelOffset];
    };

    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // mischievous sine/cosine wave distortion
            const distX = x + Math.sin(y * waveFreqY) * scaledIntensity;
            const distY = y + Math.cos(x * waveFreqX) * scaledIntensity;
            
            // Chromatic aberration (RGB shift)
            const rX = Math.floor(distX + scaledShift);
            const gX = Math.floor(distX);
            const bX = Math.floor(distX - scaledShift);
            
            const dY = Math.floor(distY);

            const dstIdx = (y * width + x) * 4;

            // Generate some random noise for the chaotic vibe
            const noise = (Math.random() - 0.5) * noiseAmt;

            // Process Red channel
            let r = getPixelChannel(rX, dY, 0) + noise;
            // Process Green channel
            let g = getPixelChannel(gX, dY, 1) + noise;
            // Process Blue channel
            let b = getPixelChannel(bX, dY, 2) + noise;
            // Transparency (preserve from original shifted coordinate)
            let a = getPixelChannel(gX, dY, 3);

            // Periodically invert colors on some scanlines as an extra "troll/harmful" touch
            if (y % 15 < 2) {
                r = 255 - r;
                g = 255 - g;
                b = 255 - b;
            }

            // Assign clamped values to the output
            out[dstIdx] = Math.min(255, Math.max(0, r));
            out[dstIdx + 1] = Math.min(255, Math.max(0, g));
            out[dstIdx + 2] = Math.min(255, Math.max(0, b));
            out[dstIdx + 3] = a;
        }
    }

    ctx.putImageData(outData, 0, 0);

    return canvas;
}