Octoblock Major Image Effect Generator

function processImage(originalImg, effectMode = "Octoblock Major", parameterStr = "default") {
    // Create canvas matching original image dimensions
    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 the image first to grab source pixel data
    ctx.drawImage(originalImg, 0, 0, width, height);
    const imgData = ctx.getImageData(0, 0, width, height);
    const srcData = imgData.data;

    // Create an empty destination image data
    const outData = ctx.createImageData(width, height);
    const dst = outData.data;

    // Determine requested effects
    let isMajor = effectMode.includes("Major");
    let isMosaic = effectMode.includes("Mosaic") || effectMode.includes("Octagon");
    let isKaleidoscope = effectMode.includes("Octoblock") && !isMosaic; 
    
    // Explicit effect over-rides if standard strings are provided
    if (effectMode === "Octagon Major" || effectMode === "Octagon Mosaic") {
        isKaleidoscope = false;
        isMosaic = true;
    }
    if (effectMode === "Classic Major") {
        isKaleidoscope = false;
        isMosaic = false;
        isMajor = true;
    }
    // Fallback if string is completely unrecognized
    if (!isMajor && !isMosaic && !isKaleidoscope) {
        isKaleidoscope = true;
        isMajor = true;
    }

    // Effect 1: Octoblock (8-Slice Kaleidoscope)
    if (isKaleidoscope) {
        const cx = width / 2;
        const cy = height / 2;
        const slices = 8;
        const sliceAngle = (2 * Math.PI) / slices;
        
        // Use parameter as zoom, defaulting to 1 for this effect
        let zoom = parseFloat(parameterStr);
        if (isNaN(zoom) || zoom <= 0 || parameterStr === "default") zoom = 1.0;
        
        for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
                let dx = x - cx;
                let dy = y - cy;
                
                let distance = Math.sqrt(dx*dx + dy*dy) / zoom;
                let angle = Math.atan2(dy, dx);
                
                // Keep angle positive (0 to 2*PI)
                if (angle < 0) angle += 2 * Math.PI;
                
                let slice = Math.floor(angle / sliceAngle);
                let localAngle = angle % sliceAngle;
                
                // Alternate sections are mirrored symmetrically
                if (slice % 2 === 1) {
                    localAngle = sliceAngle - localAngle;
                }
                
                // Shift the starting angle so the sampled wedge is pointing straight up (towards face/top)
                let srcAngle = localAngle - Math.PI / 2; 
                
                // Determine source coordinates
                let srcX = Math.floor(cx + distance * Math.cos(srcAngle));
                let srcY = Math.floor(cy + distance * Math.sin(srcAngle));
                
                // Clamp coordinates to the edge of the image
                srcX = Math.max(0, Math.min(width - 1, srcX));
                srcY = Math.max(0, Math.min(height - 1, srcY));
                
                let dstIdx = (y * width + x) * 4;
                let srcIdx = (srcY * width + srcX) * 4;
                
                let r = srcData[srcIdx];
                let g = srcData[srcIdx+1];
                let b = srcData[srcIdx+2];

                // Apply "Major" Meme Color Invert
                if (isMajor) {
                    r = 255 - r;
                    g = 255 - g;
                    b = 255 - b;
                }
                
                dst[dstIdx] = r;
                dst[dstIdx+1] = g;
                dst[dstIdx+2] = b;
                dst[dstIdx+3] = srcData[srcIdx+3];
            }
        }
        ctx.putImageData(outData, 0, 0);
        return canvas;
    }

    // Effect 2: Octagon Mosaic (8-Sided Block Halftoning)
    if (isMosaic) {
        // Use parameter as block size, defaulting to 16 for this effect
        let blockSize = parseInt(parameterStr, 10);
        if (isNaN(blockSize) || blockSize < 2 || parameterStr === "default") blockSize = 16;

        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, width, height);
        
        for (let y = 0; y < height; y += blockSize) {
            for (let x = 0; x < width; x += blockSize) {
                // Find average color in the region
                let r = 0, g = 0, b = 0, count = 0;
                for (let yy = 0; yy < blockSize; yy++) {
                    for (let xx = 0; xx < blockSize; xx++) {
                        let px = x + xx;
                        let py = y + yy;
                        if (px < width && py < height) {
                            let idx = (py * width + px) * 4;
                            r += srcData[idx];
                            g += srcData[idx+1];
                            b += srcData[idx+2];
                            count++;
                        }
                    }
                }
                if (count > 0) {
                    r = Math.round(r / count);
                    g = Math.round(g / count);
                    b = Math.round(b / count);
                }

                // Apply "Major" Meme Color Invert
                if (isMajor) {
                    r = 255 - r;
                    g = 255 - g;
                    b = 255 - b;
                }

                ctx.fillStyle = `rgb(${r},${g},${b})`;
                
                // Draw a perfect Octagon 
                const s = blockSize;
                // Ratio to slice corners off a square to make an enclosed regular octagon
                const d = s * 0.2928932; 
                ctx.beginPath();
                ctx.moveTo(x + d, y);
                ctx.lineTo(x + s - d, y);
                ctx.lineTo(x + s, y + d);
                ctx.lineTo(x + s, y + s - d);
                ctx.lineTo(x + s - d, y + s);
                ctx.lineTo(x + d, y + s);
                ctx.lineTo(x, y + s - d);
                ctx.lineTo(x, y + d);
                ctx.closePath();
                ctx.fill();
            }
        }
        return canvas;
    }

    // Effect 3: Classic Major Effect (Only Major Color Invert)
    if (isMajor && !isKaleidoscope && !isMosaic) {
        for (let i = 0; i < srcData.length; i += 4) {
            dst[i] = 255 - srcData[i];
            dst[i+1] = 255 - srcData[i+1];
            dst[i+2] = 255 - srcData[i+2];
            dst[i+3] = srcData[i+3];
        }
        ctx.putImageData(outData, 0, 0);
        return canvas;
    }

    return canvas;
}