Man In Space Image Generator

function processImage(originalImg, text = "MAN IN SPACE", helmetColor = "#ffffff", planetColor = "#ff8844") {
    // Create canvas
    const canvas = document.createElement('canvas');
    const width = 800;
    const height = 800;
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // 1. Draw Space Background
    ctx.fillStyle = "#050510"; // Deep space black
    ctx.fillRect(0, 0, width, height);

    // Draw Nebula effect
    let grad = ctx.createRadialGradient(250, 250, 10, 400, 400, 600);
    grad.addColorStop(0, "rgba(80, 20, 150, 0.4)");
    grad.addColorStop(0.5, "rgba(20, 80, 180, 0.2)");
    grad.addColorStop(1, "transparent");
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, width, height);

    // Draw Stars
    Math.seedrandom = 42; // arbitrary fixed visually appealing seed concept
    for (let i = 0; i < 400; i++) {
        // Random values derived from index to ensure consistency (optional, but good for reliable output)
        const x = Math.random() * width;
        const y = Math.random() * height;
        const r = Math.random() * 2;
        const a = Math.random();
        
        ctx.fillStyle = `rgba(255, 255, 255, ${a})`;
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI * 2);
        ctx.fill();
    }

    // 2. Draw Distant Planet
    ctx.fillStyle = planetColor;
    ctx.beginPath();
    ctx.arc(680, 180, 80, 0, Math.PI * 2);
    ctx.fill();

    // Planet Shadow (for 3D effect)
    let pgrad = ctx.createLinearGradient(600, 100, 750, 250);
    pgrad.addColorStop(0, "rgba(0,0,0,0)");
    pgrad.addColorStop(1, "rgba(0,0,0,0.9)");
    ctx.fillStyle = pgrad;
    ctx.beginPath();
    ctx.arc(680, 180, 81, 0, Math.PI * 2); // slight overlap
    ctx.fill();
    
    // 3. Draw Astronaut Suit (Torso)
    ctx.fillStyle = helmetColor;
    ctx.beginPath();
    ctx.moveTo(220, 550);
    ctx.quadraticCurveTo(400, 480, 580, 550); // Shoulders
    ctx.lineTo(650, height);
    ctx.lineTo(150, height);
    ctx.closePath();
    ctx.fill();
    
    // Suit details & shadows
    ctx.strokeStyle = "#cccccc";
    ctx.lineWidth = 8;
    ctx.stroke();

    // Chest plate
    ctx.fillStyle = "#e0e0e0";
    ctx.beginPath();
    ctx.roundRect(300, 600, 200, 200, 15);
    ctx.fill();
    ctx.strokeRect(300, 600, 200, 200);

    // Chest buttons and dials
    ctx.fillStyle = "#ff4444";
    ctx.beginPath();
    ctx.arc(340, 640, 15, 0, Math.PI*2);
    ctx.fill();

    ctx.fillStyle = "#4444ff";
    ctx.beginPath();
    ctx.arc(390, 640, 15, 0, Math.PI*2);
    ctx.fill();

    ctx.fillStyle = "#44ff44";
    ctx.fillRect(440, 625, 30, 30);

    // Tube
    ctx.strokeStyle = "#aaaaaa";
    ctx.lineWidth = 15;
    ctx.beginPath();
    ctx.moveTo(400, 700);
    ctx.quadraticCurveTo(500, 750, 620, 650);
    ctx.stroke();

    // 4. Draw Astronaut Helmet
    ctx.fillStyle = helmetColor;
    ctx.beginPath();
    ctx.arc(400, 380, 220, 0, Math.PI * 2);
    ctx.fill();
    
    // Helmet shadow/outline
    ctx.strokeStyle = "#dddddd";
    ctx.lineWidth = 12;
    ctx.stroke();

    // 5. Visor (Canvas Clipping Mask for Image)
    const visorX = 400;
    const visorY = 380;
    const visorRadiusX = 160;
    const visorRadiusY = 130;

    ctx.save();
    ctx.beginPath();
    ctx.ellipse(visorX, visorY, visorRadiusX, visorRadiusY, 0, 0, Math.PI * 2);
    ctx.clip(); // Mask the next drawings to this oval shape

    // Draw the original image inside the visor
    let imgAspect = originalImg.width / originalImg.height;
    let targetWidth, targetHeight;
    
    // Cover the entire clipping area
    if (imgAspect > (visorRadiusX / visorRadiusY)) {
        targetHeight = visorRadiusY * 2;
        targetWidth = targetHeight * imgAspect;
    } else {
        targetWidth = visorRadiusX * 2;
        targetHeight = targetWidth / imgAspect;
    }
    
    ctx.drawImage(
        originalImg, 
        visorX - targetWidth / 2, 
        visorY - targetHeight / 2, 
        targetWidth, 
        targetHeight
    );

    // Visor Glass Reflection overlay
    ctx.fillStyle = "rgba(255, 255, 255, 0.25)";
    ctx.beginPath();
    ctx.ellipse(visorX - 30, visorY - 50, 90, 50, -Math.PI/8, 0, Math.PI * 2);
    ctx.fill();

    // Night/Glass tint
    ctx.fillStyle = "rgba(0, 20, 50, 0.3)";
    ctx.beginPath();
    ctx.ellipse(visorX, visorY, visorRadiusX, visorRadiusY, 0, 0, Math.PI * 2);
    ctx.fill();

    ctx.restore();

    // Visor thick border
    ctx.strokeStyle = "#222222";
    ctx.lineWidth = 20;
    ctx.beginPath();
    ctx.ellipse(visorX, visorY, visorRadiusX, visorRadiusY, 0, 0, Math.PI * 2);
    ctx.stroke();

    // 6. Draw Text
    if (text) {
        ctx.fillStyle = "#ffffff";
        ctx.font = "bold 60px 'Trebuchet MS', Arial, sans-serif";
        ctx.textAlign = "center";
        ctx.textBaseline = "top";
        
        // Text drop shadow for better visibility against stars
        ctx.shadowColor = "#000000";
        ctx.shadowBlur = 15;
        ctx.shadowOffsetX = 3;
        ctx.shadowOffsetY = 3;
        
        ctx.fillText(text, width / 2, 40);
        
        // Reset shadows
        ctx.shadowBlur = 0;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
    }

    return canvas;
}