Image Starry Hour Effect Generator

function processImage(originalImg, starCount = 100, tintIntensity = 0.6) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.width;
    const h = originalImg.height;
    
    canvas.width = w;
    canvas.height = h;
    
    // Draw the original image
    ctx.drawImage(originalImg, 0, 0);
    
    // Parse parameters
    const intensity = Math.max(0, Math.min(1, Number(tintIntensity)));
    const totalStars = Math.max(0, parseInt(starCount, 10) || 100);
    
    // Apply a nighttime / twilight color grade (Звёздный час / Starry Hour)
    // Darken and add deep blue/purple tint (Multiply)
    ctx.globalCompositeOperation = 'multiply';
    ctx.fillStyle = `rgba(20, 25, 60, ${intensity})`;
    ctx.fillRect(0, 0, w, h);
    
    // Add a soft magical blueish/cyan hue to lift shadows slightly (Screen)
    ctx.globalCompositeOperation = 'screen';
    ctx.fillStyle = `rgba(30, 60, 100, ${intensity * 0.6})`;
    ctx.fillRect(0, 0, w, h);
    
    // Reset composite operation for drawing stars
    ctx.globalCompositeOperation = 'source-over';
    
    // Helper function to draw a magical 4-pointed sparkle
    function drawSparkle(x, y, size, opacity) {
        ctx.save();
        
        ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
        ctx.shadowBlur = Math.max(1, size);
        ctx.shadowColor = 'rgba(180, 220, 255, 1)';
        
        // Draw the 4-pointed star using quadratic bezier curves
        ctx.beginPath();
        ctx.moveTo(x, y - size);
        ctx.quadraticCurveTo(x, y, x + size, y);
        ctx.quadraticCurveTo(x, y, x, y + size);
        ctx.quadraticCurveTo(x, y, x - size, y);
        ctx.quadraticCurveTo(x, y, x, y - size);
        ctx.fill();
        ctx.closePath();
        
        // Add a tiny, bright core to the center for a glowing effect
        ctx.shadowBlur = 0;
        ctx.fillStyle = `rgba(255, 255, 255, ${Math.min(1, opacity + 0.4)})`;
        ctx.beginPath();
        ctx.arc(x, y, size * 0.15, 0, Math.PI * 2);
        ctx.fill();
        
        ctx.restore();
    }
    
    // 1. Draw distant background space dust / tiny stars
    for (let i = 0; i < totalStars * 3; i++) {
        const x = Math.random() * w;
        const y = Math.random() * h;
        // Make sure size scales decently with the image, but stays small
        const size = (Math.random() * 1.5 + 0.5) * (w / 1000 + 0.5); 
        const opacity = Math.random() * 0.7 + 0.1;
        
        ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
        ctx.beginPath();
        ctx.arc(x, y, size, 0, Math.PI * 2);
        ctx.fill();
    }
    
    // 2. Draw prominent magical sparkles
    const dimension = Math.min(w, h);
    const maxSparkleSize = dimension * 0.025; // max 2.5% of the shortest side
    const minSparkleSize = Math.max(2, dimension * 0.005);
    
    for (let i = 0; i < totalStars; i++) {
        const x = Math.random() * w;
        const y = Math.random() * h;
        
        // Skewing the random distribution so most stars are small, and very few are large
        const sizeRaw = Math.pow(Math.random(), 3); 
        const size = minSparkleSize + sizeRaw * (maxSparkleSize - minSparkleSize);
        const opacity = Math.random() * 0.6 + 0.3;
        
        drawSparkle(x, y, size, opacity);
    }
    
    return canvas;
}