Audio Pitch Adjustment Tool

/**
 * Processes an image to create a 3D perspective "pitch" effect, simulating
 * tilting the image forward or backward.
 * This function interprets the "pitch audio" request in a visual context,
 * applying a perspective transformation to the image, which is analogous to "pitch"
 * rotation in 3D graphics.
 *
 * @param {HTMLImageElement} originalImg The original image element.
 * @param {number} pitchDegrees The angle in degrees to tilt the image.
 *   Positive values tilt the top away from the viewer (backward).
 *   Negative values tilt the top towards the viewer (forward).
 *   A reasonable range is -75 to 75. Default is 30.
 * @param {number} focalLength A number representing the simulated camera focal length.
 *   A larger value results in less perspective distortion. If set to 0, it defaults
 *   to the image width. Default is 0.
 * @returns {HTMLCanvasElement} A new canvas element with the transformed image.
 */
function processImage(originalImg, pitchDegrees = 30, focalLength = 0) {
    // Clamp the pitch angle to a reasonable range to avoid extreme/invalid results
    const clampedPitch = Math.max(-85, Math.min(85, pitchDegrees));
    const angle = clampedPitch * Math.PI / 180;

    const w = originalImg.width;
    const h = originalImg.height;

    // Use image width as a default focal length if not provided or invalid
    if (focalLength <= 0) {
        focalLength = w;
    }

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

    // The center of rotation is the geometric center of the image
    const rotX = w / 2;
    const rotY = h / 2;

    // Iterate over each 1-pixel high horizontal slice of the source image
    for (let ySrc = 0; ySrc < h; ySrc++) {
        // Calculate the y-coordinate relative to the center of rotation
        const yRel = ySrc - rotY;

        // --- 3D Transformation and Projection ---
        // 1. Rotate the point around the X-axis to get its new y and z coordinates in 3D space.
        //    'z' represents depth (positive is "into" the screen, negative is "out of").
        const z = -yRel * Math.sin(angle);
        const yRotated = yRel * Math.cos(angle);

        // 2. Apply perspective projection. Slices further away (higher z) will appear smaller.
        const perspectiveScale = focalLength / (focalLength + z);

        // If the slice is at or behind the camera's viewpoint, it's not visible.
        if (perspectiveScale <= 0) {
            continue;
        }

        // --- Calculate Destination Slice Properties ---
        const destWidth = w * perspectiveScale;
        const destX = rotX - destWidth / 2; // Center the slice horizontally
        const destY = rotY + yRotated * perspectiveScale;

        // To prevent gaps, calculate the projected height of this slice by finding
        // the projected position of the *next* slice and getting the difference.
        const yRelNext = (ySrc + 1) - rotY;
        const zNext = -yRelNext * Math.sin(angle);
        const yRotatedNext = yRelNext * Math.cos(angle);
        const perspectiveScaleNext = focalLength / (focalLength + zNext);
        const destYNext = rotY + yRotatedNext * perspectiveScaleNext;
        const destHeight = Math.abs(destYNext - destY);

        // --- Draw the transformed slice ---
        // We only draw if the slice has a visible width and height.
        if (destWidth > 0 && destHeight > 0) {
            ctx.drawImage(
                originalImg,
                0, ySrc, w, 1, // Source rectangle (a 1px high slice)
                destX, destY, destWidth, destHeight // Destination rectangle
            );
        }
    }

    return canvas;
}