Image Star Identifier

/**
 * Identifies star-like objects in an image based on brightness and size, and marks them on a new canvas.
 *
 * This function works by:
 * 1. Converting the image to grayscale to analyze pixel brightness.
 * 2. Applying a brightness threshold to identify potential star pixels.
 * 3. Grouping connected bright pixels into "blobs" using a Breadth-First Search (BFS) algorithm.
 * 4. Filtering these blobs based on their size (number of pixels) to distinguish stars from noise or larger objects like planets or the moon.
 * 5. Calculating the center (centroid) of each valid star blob.
 * 6. Drawing the original image on a canvas and overlaying circular markers on the identified star locations.
 * 7. Displaying a count of the identified stars.
 *
 * @param {Image} originalImg The original javascript Image object to process.
 * @param {string} threshold A number from 0 to 255. Pixels with a grayscale brightness above this value will be considered potential star candidates. A higher value detects only brighter objects. Default is '150'.
 * @param {string} minSize The minimum number of connected pixels required for a bright spot to be considered a star. Helps filter out single-pixel noise. Default is '2'.
 * @param {string} maxSize The maximum number of connected pixels allowed for a star. Helps filter out larger objects like planets, the moon, or lens flare. Default is '100'.
 * @param {string} markerColor The CSS color string for the circle drawn around each identified star. Default is 'rgba(255, 0, 0, 0.7)'.
 * @param {string} markerSize The radius, in pixels, of the circle drawn around each star. Default is '8'.
 * @returns {HTMLCanvasElement} A new canvas element with the original image and markers drawn on it.
 */
async function processImage(originalImg, threshold = '150', minSize = '2', maxSize = '100', markerColor = 'rgba(255, 0, 0, 0.7)', markerSize = '8') {
    // 1. Parameter Parsing and Validation
    const brightnessThreshold = parseInt(threshold, 10) || 150;
    const minStarPixels = parseInt(minSize, 10) || 2;
    const maxStarPixels = parseInt(maxSize, 10) || 100;
    const markerRadius = parseInt(markerSize, 10) || 8;

    // 2. Canvas Setup
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const {
        width,
        height
    } = originalImg;
    canvas.width = width;
    canvas.height = height;

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

    // 3. Image Data Extraction and Grayscale Analysis
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Create 2D arrays to keep track of bright pixels and visited pixels during blob detection
    const isBright = Array.from({
        length: height
    }, () => new Array(width).fill(false));
    const visited = Array.from({
        length: height
    }, () => new Array(width).fill(false));

    // Populate the isBright grid based on the brightness threshold
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const index = (y * width + x) * 4;
            const r = data[index];
            const g = data[index + 1];
            const b = data[index + 2];
            // Use the luminosity formula for a more accurate grayscale value
            const grayscale = 0.2126 * r + 0.7152 * g + 0.0722 * b;
            if (grayscale > brightnessThreshold) {
                isBright[y][x] = true;
            }
        }
    }

    // 4. Blob Detection using Breadth-First Search (BFS)
    const stars = [];

    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // If we find a bright pixel that hasn't been visited, start a new blob search
            if (isBright[y][x] && !visited[y][x]) {
                const currentBlob = [];
                const queue = [
                    [x, y]
                ];
                visited[y][x] = true;

                while (queue.length > 0) {
                    const [cx, cy] = queue.shift();
                    currentBlob.push([cx, cy]);

                    // Check all 8 neighbors
                    for (let dy = -1; dy <= 1; dy++) {
                        for (let dx = -1; dx <= 1; dx++) {
                            if (dx === 0 && dy === 0) continue;

                            const nx = cx + dx;
                            const ny = cy + dy;

                            if (
                                nx >= 0 && nx < width && ny >= 0 && ny < height &&
                                isBright[ny][nx] && !visited[ny][nx]
                            ) {
                                visited[ny][nx] = true;
                                queue.push([nx, ny]);
                            }
                        }
                    }
                }

                // 5. Filter blob by size and calculate centroid
                if (currentBlob.length >= minStarPixels && currentBlob.length <= maxStarPixels) {
                    let sumX = 0;
                    let sumY = 0;
                    currentBlob.forEach(([px, py]) => {
                        sumX += px;
                        sumY += py;
                    });
                    const centroidX = sumX / currentBlob.length;
                    const centroidY = sumY / currentBlob.length;
                    stars.push({
                        x: centroidX,
                        y: centroidY
                    });
                }
            }
        }
    }

    // 6. Draw markers on the canvas
    ctx.strokeStyle = markerColor;
    ctx.lineWidth = 2;
    ctx.fillStyle = 'transparent';

    stars.forEach(star => {
        ctx.beginPath();
        ctx.arc(star.x, star.y, markerRadius, 0, 2 * Math.PI);
        ctx.stroke();
    });

    // 7. Display star count
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
    ctx.font = '18px "Arial", sans-serif';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    ctx.shadowColor = 'black';
    ctx.shadowBlur = 4;
    ctx.fillText(`Stars identified: ${stars.length}`, 10, 10);

    return canvas;
}