Activate Any Motor Mode Tool

/**
 * Applies an "Activate Motor Mode" meme effect to an image.
 * This effect is inspired by an internet meme and typically involves
 * applying high contrast, a color glow, radial lines, a vignette,
 * and a specific Russian caption to an image to give it a "powered-up" look.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} [intensity=1.0] The overall intensity of the effect, recommended range 0.0 to 2.0.
 * @param {string} [color='red'] A CSS color string for the glow effect and text.
 * @param {string} [addText='true'] A string ('true' or 'false') to control whether the meme text is added.
 * @returns {HTMLCanvasElement} A new canvas element with the effect applied.
 */
function processImage(originalImg, intensity = 1.0, color = 'red', addText = 'true') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure we have valid image dimensions before setting canvas size
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;
    canvas.width = w;
    canvas.height = h;

    // Clamp intensity to a reasonable range to avoid extreme visual artifacts.
    const clampedIntensity = Math.max(0, Math.min(2.0, intensity));

    // 1. Draw the base image with enhanced contrast and saturation for a dramatic feel.
    const contrast = 100 + 60 * clampedIntensity; // e.g., 160% at intensity 1.0
    const saturate = 100 + 60 * clampedIntensity; // e.g., 160% at intensity 1.0
    const brightness = 100 + 10 * clampedIntensity; // e.g., 110% at intensity 1.0
    ctx.filter = `contrast(${contrast}%) saturate(${saturate}%) brightness(${brightness}%)`;
    ctx.drawImage(originalImg, 0, 0, w, h);
    ctx.filter = 'none'; // Reset filter for subsequent drawing operations.

    // 2. Add radial "energy" lines for the activated effect.
    if (clampedIntensity > 0) {
        const centerX = w / 2;
        const centerY = h / 2;
        const numLines = Math.floor(60 * clampedIntensity);
        const maxRadius = Math.sqrt(centerX * centerX + centerY * centerY);

        ctx.save();
        // Use 'lighter' for an additive blending effect, which looks like a glow.
        ctx.globalCompositeOperation = 'lighter';
        ctx.strokeStyle = color;
        ctx.lineWidth = 1.5;
        ctx.globalAlpha = 0.5 * Math.min(1, clampedIntensity);

        for (let i = 0; i < numLines; i++) {
            const angle = Math.random() * Math.PI * 2;
            const startRadius = Math.random() * maxRadius * 0.3;
            const endRadius = startRadius + maxRadius * (0.1 + Math.random() * 0.5);

            ctx.beginPath();
            ctx.moveTo(centerX + Math.cos(angle) * startRadius, centerY + Math.sin(angle) * startRadius);
            ctx.lineTo(centerX + Math.cos(angle) * endRadius, centerY + Math.sin(angle) * endRadius);
            ctx.stroke();
        }
        ctx.restore(); // Restore composite operation and alpha.
    }

    // 3. Apply a vignette to focus the center of the image.
    if (clampedIntensity > 0) {
        const centerX = w / 2;
        const centerY = h / 2;
        const gradient = ctx.createRadialGradient(centerX, centerY, h / 3, centerX, centerY, w * 0.65);
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, `rgba(0,0,0,${0.85 * Math.min(1, clampedIntensity)})`);
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);
    }

    // 4. Add the meme caption text if enabled.
    if (addText === 'true') {
        const text1 = "*Любой режим Мотора*";
        const text2 = "-активировать!";
        // Use a font size relative to the image width, with a minimum size.
        const fontSize = Math.max(24, Math.floor(w / 18));
        const fontFamily = 'Impact, "Arial Black", sans-serif';

        ctx.font = `bold ${fontSize}px ${fontFamily}`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        const textX = w / 2;
        // Position text near the bottom of the canvas.
        const textY = h - fontSize * 0.5;

        // Style for the text outline for better readability.
        ctx.strokeStyle = '#000000';
        ctx.lineWidth = fontSize / 8;
        ctx.lineJoin = 'round'; // Improves the appearance of the stroke corners.

        // Draw the text in two lines.
        const line1Y = textY - fontSize * 1.1; // Position line 1 above line 2.

        // Draw the black outline first
        ctx.strokeText(text2, textX, textY);
        ctx.strokeText(text1, textX, line1Y);

        // Then draw the colored fill on top
        ctx.fillStyle = color;
        ctx.fillText(text2, textX, textY);
        ctx.fillText(text1, textX, line1Y);
    }

    return canvas;
}