Image Latitude Line Finder

function processImage(originalImg, sensitivity = 50, lineColor = 'red', lineWidth = 2) {
    // Creating the canvas and context based on the original image
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    
    // If the image is too small to process, return as is
    if (width < 3 || height < 3) return canvas;

    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;
    
    // 1. Convert image to grayscale for edge detection
    const gray = new Float32Array(width * height);
    for (let i = 0; i < width * height; i++) {
        // Luminosity method to convert RGB to Grayscale
        gray[i] = data[i * 4] * 0.299 + data[i * 4 + 1] * 0.587 + data[i * 4 + 2] * 0.114;
    }
    
    // 2. Apply a Vertical Gradient Operator (Y-direction Sobel-like) 
    // to find horizontal edges (i.e. 'latitude' lines parallel to the x-axis)
    const rowScores = new Float32Array(height);
    let maxScore = 0;
    
    for (let y = 1; y < height - 1; y++) {
        let rowSum = 0;
        for (let x = 1; x < width - 1; x++) {
            // Upper row pixels
            const p1 = gray[(y - 1) * width + (x - 1)];
            const p2 = gray[(y - 1) * width + x];
            const p3 = gray[(y - 1) * width + (x + 1)];
            
            // Lower row pixels
            const p7 = gray[(y + 1) * width + (x - 1)];
            const p8 = gray[(y + 1) * width + x];
            const p9 = gray[(y + 1) * width + (x + 1)];
            
            // Gradient Y magnitude
            const val = (p7 + 2 * p8 + p9) - (p1 + 2 * p2 + p3);
            rowSum += Math.abs(val);
        }
        
        // Calculate the average edge score for this row
        const avgScore = rowSum / (width - 2);
        rowScores[y] = avgScore;
        
        // Track the maximum edge score found to normalize later
        if (avgScore > maxScore) {
            maxScore = avgScore;
        }
    }
    
    // 3. Normalize row scores and locate local peaks
    const peaks = [];
    const parsedSensitivity = Number(sensitivity);
    const safeSensitivity = isNaN(parsedSensitivity) ? 50 : Math.max(0, Math.min(100, parsedSensitivity));
    
    // The threshold determines line detection cutoff (0 to 100)
    // 100 sensitivity means 0 threshold (all possible lines), 0 sensitivity means 100 threshold (only strongest line)
    const threshold = maxScore > 0 ? (100 - safeSensitivity) : 100;

    for (let y = 1; y < height - 1; y++) {
        if (maxScore === 0) break; // Bypass if image is solid color (no gradients)
        
        const normalizedScore = (rowScores[y] / maxScore) * 100;
        
        if (normalizedScore >= threshold) {
            // Local maximum check to prevent drawing adjacent thick clumps of lines for a single edge
            if (rowScores[y] >= rowScores[y - 1] && rowScores[y] >= rowScores[y + 1]) {
                peaks.push(y);
            }
        }
    }
    
    // 4. Draw the detected horizontal (latitude) lines back onto the canvas
    if (peaks.length > 0) {
        ctx.strokeStyle = typeof lineColor === 'string' ? lineColor : 'red';
        
        const parsedWidth = Number(lineWidth);
        ctx.lineWidth = isNaN(parsedWidth) ? 2 : parsedWidth;
        
        ctx.beginPath();
        for (let i = 0; i < peaks.length; i++) {
            const y = peaks[i];
            ctx.moveTo(0, y);
            ctx.lineTo(width, y);
        }
        ctx.stroke();
    }
    
    return canvas;
}