Please bookmark this page to avoid losing your image tool!

Mysterious Hole Image Generator

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
function processImage(originalImg, holeRadiusPct = "0.6", holeDepth = "1.5", holeTwist = "0.5", glowColor = "60,10,120", centerX = "0.5", centerY = "0.5") {
    // Parse parameters
    const pct = parseFloat(holeRadiusPct) || 0.6;
    const depth = parseFloat(holeDepth) || 1.5;
    const twist = parseFloat(holeTwist) || 0.5;
    const cxPct = parseFloat(centerX) || 0.5;
    const cyPct = parseFloat(centerY) || 0.5;
    
    // Parse the mysterious glow color
    let glowColors = String(glowColor).split(",").map(n => parseInt(n.trim()));
    if (glowColors.length !== 3 || glowColors.some(isNaN)) {
        glowColors = [60, 10, 120]; // Fallback to a mysterious dark purple
    }
    const [tintR, tintG, tintB] = glowColors;

    // Set up canvas
    const w = originalImg.width;
    const h = originalImg.height;

    const canvas = document.createElement("canvas");
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext("2d");
    if (!w || !h) return canvas;

    // Draw original image to sample from it
    ctx.drawImage(originalImg, 0, 0);

    const imgData = ctx.getImageData(0, 0, w, h);
    const srcData = new Uint8ClampedArray(imgData.data);
    const dstData = imgData.data;

    // Determine hole properties
    const cx = w * Math.max(0, Math.min(1, cxPct));
    const cy = h * Math.max(0, Math.min(1, cyPct));
    const minDim = Math.min(w, h);
    const holeRadius = (minDim / 2) * pct;

    // Apply Mysterious Hole (tunnel/pit) distortion & shading
    for (let y = 0; y < h; y++) {
        for (let x = 0; x < w; x++) {
            const dx = x - cx;
            const dy = y - cy;
            const r = Math.sqrt(dx * dx + dy * dy);
            const dstIdx = (y * w + x) * 4;

            if (r > holeRadius) {
                // Ground surface outside the hole
                const rimDist = r - holeRadius;
                // Add soft shadow right at the edge of the rim
                const rimShadow = Math.min(1, rimDist / (holeRadius * 0.15));
                const shade = 0.5 + 0.5 * rimShadow;

                dstData[dstIdx] = srcData[dstIdx] * shade;
                dstData[dstIdx + 1] = srcData[dstIdx + 1] * shade;
                dstData[dstIdx + 2] = srcData[dstIdx + 2] * shade;
                dstData[dstIdx + 3] = srcData[dstIdx + 3];
            } else {
                // Interior of the mysterious hole
                const r_norm = r / holeRadius;
                const light = Math.pow(r_norm, 1.2); // Fades to complete darkness down the pit
                
                // If it's too dark or directly at the center pole, set pure black to avoid aliasing
                if (r < 1 || light < 0.01) {
                    dstData[dstIdx] = 0;
                    dstData[dstIdx + 1] = 0;
                    dstData[dstIdx + 2] = 0;
                    dstData[dstIdx + 3] = 255;
                    continue;
                }

                // Mathematical mapping for falling inwards
                const a = Math.atan2(dy, dx);
                const z = depth / r_norm; // Depth mapping towards infinity

                let u = (a / (2 * Math.PI) + 0.5 + twist * z) * w;
                let v = z * h;

                // Wrap texture coordinates
                u = Math.floor(u) % w;
                if (u < 0) u += w;
                v = Math.floor(v) % h;
                if (v < 0) v += h;

                const srcIdx = (v * w + u) * 4;

                let pixelR = srcData[srcIdx];
                let pixelG = srcData[srcIdx + 1];
                let pixelB = srcData[srcIdx + 2];

                // Adds a magical/mysterious glow tint emanating from the abyss
                const glowStrength = Math.max(0, Math.pow(1 - r_norm, 2.5));
                pixelR = pixelR * (1 - glowStrength) + tintR * glowStrength;
                pixelG = pixelG * (1 - glowStrength) + tintG * glowStrength;
                pixelB = pixelB * (1 - glowStrength) + tintB * glowStrength;

                // Inner wall shadow right beneath the rim to simulate an overhang cliff
                const edgeShadow = Math.min(1, (holeRadius - r) / (holeRadius * 0.2));
                const finalLight = light * (0.3 + 0.7 * edgeShadow);

                dstData[dstIdx]     = pixelR * finalLight;
                dstData[dstIdx + 1] = pixelG * finalLight;
                dstData[dstIdx + 2] = pixelB * finalLight;
                dstData[dstIdx + 3] = srcData[srcIdx + 3];
            }
        }
    }

    ctx.putImageData(imgData, 0, 0);
    return canvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Mysterious Hole Image Generator applies a surreal tunnel or pit effect to your images, creating the illusion of a deep, swirling abyss in the center of your photo. The tool distorts the image content within a circular area to simulate depth and movement, incorporating customizable parameters like hole radius, depth, and twist. It also features a customizable glow color that emanates from the center, adding a mystical or magical atmosphere. This tool is ideal for creating unique digital art, social media graphics, or conceptual visual effects for creative projects.

Leave a Reply

Your email address will not be published. Required fields are marked *