Photo Representation Of Time Travel Case

/**
 * Processes an image to create a visual representation of a "time jump" or temporal distortion.
 * The effect includes a central "rift" that displaces pixels, chromatic aberration,
 * different color tints on either side of the rift, and a digital glitch effect.
 *
 * @param {Image} originalImg The original Javascript Image object to process.
 * @param {number} [riftPosition=0.5] The horizontal position of the rift's center, as a value from 0 (left) to 1 (right).
 * @param {number} [distortionStrength=100] The intensity of the pixel displacement effect near the rift. Higher values create a stronger pull.
 * @param {number} [glitchAmount=20] The number of horizontal glitch slices to apply to the image. Set to 0 to disable.
 * @param {number} [chromaticAberration=4] The strength of the color fringing effect near the rift.
 * @returns {HTMLCanvasElement} A new canvas element with the "time travel" effect applied.
 */
function processImage(originalImg, riftPosition = 0.5, distortionStrength = 100, glitchAmount = 20, chromaticAberration = 4) {
    // 1. Create a canvas and get its 2D rendering context.
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } is a performance hint for browsers when using getImageData frequently.
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // 3. Get the raw pixel data from the canvas.
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    const width = canvas.width;
    const height = canvas.height;

    // Create a pristine copy of the original pixel data to sample from. This is crucial
    // to prevent artifacts from reading pixels that have already been modified in the current pass.
    const originalData = new Uint8ClampedArray(data);

    // 4. Perform the main "Time Rift" distortion effect.
    const riftX = width * riftPosition;

    // Iterate over each pixel of the destination canvas.
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const index = (y * width + x) * 4;

            // Calculate the horizontal distance from the current pixel to the rift.
            const distance = Math.abs(x - riftX);

            // Calculate a non-linear displacement. The effect is strongest near the rift
            // and falls off with distance. Using Math.pow provides a pleasing curve.
            const displacement = distortionStrength / (Math.pow(distance, 0.7) + 1);

            // The direction of pixel shift is outwards from the rift.
            const direction = (x < riftX) ? -1 : 1;
            const displacedX = x + displacement * direction;

            // --- Chromatic Aberration Simulation ---
            // Calculate a color channel offset that is also strongest near the rift.
            const caOffset = (chromaticAberration / (distance + 1));
            // Determine the source X coordinates for each color channel (Red, Green, Blue).
            const rSampleX = Math.round(displacedX - caOffset);
            const gSampleX = Math.round(displacedX);
            const bSampleX = Math.round(displacedX + caOffset);

            // Clamp the coordinates to ensure they are within the image bounds.
            const clampedRSampleX = Math.max(0, Math.min(width - 1, rSampleX));
            const clampedGSampleX = Math.max(0, Math.min(width - 1, gSampleX));
            const clampedBSampleX = Math.max(0, Math.min(width - 1, bSampleX));

            // Get the pixel indices for each channel from the original data.
            const rIndex = (y * width + clampedRSampleX) * 4;
            const gIndex = (y * width + clampedGSampleX) * 4;
            const bIndex = (y * width + clampedBSampleX) * 4;

            // Sample the color channels.
            let r = originalData[rIndex];
            let g = originalData[gIndex + 1];
            let b = originalData[bIndex + 2];

            // --- Color Tinting ---
            // Apply different color schemes to represent "past" and "future".
            if (x < riftX) { // Left side ("Past"): apply a warmer, sepia-like tone.
                const avg = (r + g + b) / 3;
                r = avg + 40;
                g = avg + 20;
                b = avg;
            } else { // Right side ("Future"): apply a cooler, cyan-toned effect.
                const avg = (r + g + b) / 3;
                r = avg - 20;
                g = avg + 10;
                b = avg + 40;
            }

            // --- Rift Glow ---
            // Add a bright glow at the epicenter of the rift.
            if (distance < 3) {
                r += 100;
                g += 100;
                b += 150;
            }

            // Write the final, modified pixel color back to the imageData array.
            data[index] = r;
            data[index + 1] = g;
            data[index + 2] = b;
            // Alpha channel (data[index + 3]) remains unchanged.
        }
    }

    // 5. Apply the modified pixel data back to the canvas.
    ctx.putImageData(imageData, 0, 0);

    // 6. Add a layered "Glitch" effect on top of the distorted image.
    for (let i = 0; i < glitchAmount; i++) {
        // Choose a random vertical start position for the glitch slice.
        const startY = Math.floor(Math.random() * height);
        // Choose a random height for the slice.
        const chunkHeight = Math.floor(Math.random() * 15) + 1;

        // Ensure the slice doesn't go past the bottom of the image.
        if (startY + chunkHeight > height) {
            continue;
        }

        // Determine a random horizontal shift for the slice.
        const shiftX = Math.floor((Math.random() - 0.5) * 60);

        // Grab the pixel data for this slice from the canvas.
        const sliceData = ctx.getImageData(0, startY, width, chunkHeight);

        // Draw the slice back onto the canvas at the shifted position.
        ctx.putImageData(sliceData, shiftX, startY);
    }

    // 7. Return the final canvas element.
    return canvas;
}