Solvalou Plane Conversion And Background Pattern Changer Tool

function processImage(originalImg, greenThreshold = "1.2") {
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    
    // Draw original image
    ctx.drawImage(originalImg, 0, 0);
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;
    
    // Create a brick pattern on an offscreen canvas to represent the background changer
    const brickCanvas = document.createElement('canvas');
    brickCanvas.width = width;
    brickCanvas.height = height;
    const bCtx = brickCanvas.getContext('2d');
    
    // Fill background with brick color
    bCtx.fillStyle = '#A52A2A'; // Brown/Brick Red
    bCtx.fillRect(0, 0, width, height);
    
    // Draw mortar lines
    bCtx.fillStyle = '#DDDDDD';
    const brickWidth = Math.max(20, Math.floor(width / 15));
    const brickHeight = Math.max(10, Math.floor(brickWidth / 2));
    const mortarThickness = Math.max(1, Math.floor(brickHeight / 10));
    
    for (let y = 0; y < height; y += brickHeight) {
        bCtx.fillRect(0, y, width, mortarThickness);
        const offset = (Math.floor(y / brickHeight) % 2 === 0) ? 0 : Math.floor(brickWidth / 2);
        for (let x = -brickWidth; x < width; x += brickWidth) {
            bCtx.fillRect(x + offset, y, mortarThickness, brickHeight);
        }
    }
    
    const brickData = bCtx.getImageData(0, 0, width, height).data;
    const thresh = parseFloat(greenThreshold);
    
    // Replace green "grassy" portions with the generated brick pattern
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i+1];
        const b = data[i+2];
        const a = data[i+3];
        
        // Simple condition to detect grass-like green pixels
        if (g > 60 && g > r * thresh && g > b * thresh && a > 0) {
            data[i] = brickData[i];
            data[i+1] = brickData[i+1];
            data[i+2] = brickData[i+2];
            // alpha remains exactly the same as the original pixel
        }
    }
    
    // Update the canvas with the modified image data
    ctx.putImageData(imgData, 0, 0);
    
    // "The Solvalou is changed into a plane" -> Simulate this by drawing an actual plane over the bottom portion
    ctx.font = `${Math.max(40, Math.floor(width / 8))}px Arial`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    const planeX = width / 2;
    const planeY = height - Math.max(50, height / 6);
    ctx.fillText('🛩️', planeX, planeY);
    
    // "replacing most enemies and turrets" -> Draw alternative mock aerial vehicles to represent new enemy sprites
    ctx.font = `${Math.max(25, Math.floor(width / 12))}px Arial`;
    const enemyPositions = [
        { x: 0.2, y: 0.2, emoji: '🛸' },
        { x: 0.8, y: 0.3, emoji: '🚁' },
        { x: 0.5, y: 0.1, emoji: '🛸' },
        { x: 0.3, y: 0.4, emoji: '👾' },
        { x: 0.7, y: 0.5, emoji: '🚁' }
    ];
    
    enemyPositions.forEach(pos => {
        ctx.fillText(pos.emoji, width * pos.x, height * pos.y);
    });
    
    // Pay homage to the "crude 8-bit rendition of Morrigan's theme/corrupted music" by sprinkling music notes
    ctx.font = `${Math.max(20, Math.floor(width / 15))}px Arial`;
    ctx.fillText('🎶', width * 0.1, height * 0.85);
    ctx.fillText('🎵', width * 0.9, height * 0.85);
    
    return canvas;
}