Please bookmark this page to avoid losing your image tool!

G-Major 16 Image Effect 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, gridSize = "4", applyInvert = "1", alternateMirror = "1") {
    // Parse parameters
    let colsRows = parseInt(gridSize, 10);
    if (isNaN(colsRows) || colsRows < 1) colsRows = 4;
    
    const invertColors = parseInt(applyInvert, 10) !== 0;
    const mirrorMode = parseInt(alternateMirror, 10) !== 0;

    // Create canvas matching the original image dimensions
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

    // Calculate the size of each grid cell (4x4 = 16 cells for G-Major 16)
    const cellW = width / colsRows;
    const cellH = height / colsRows;

    // Draw the image in a grid with optional alternating mirroring
    for (let y = 0; y < colsRows; y++) {
        for (let x = 0; x < colsRows; x++) {
            ctx.save();
            
            // Destination coordinates of the top-left of the cell
            const destX = x * cellW;
            const destY = y * cellH;

            // Translate to the middle of the cell to allow for mirroring around the center
            ctx.translate(destX + cellW / 2, destY + cellH / 2);

            let scaleX = 1;
            let scaleY = 1;

            if (mirrorMode) {
                // Mirror horizontally on odd columns
                if (x % 2 !== 0) scaleX = -1;
                // Mirror vertically on odd rows
                if (y % 2 !== 0) scaleY = -1;
            }

            ctx.scale(scaleX, scaleY);
            
            // Draw the image squeezed into the cell dimensions
            ctx.drawImage(originalImg, -cellW / 2, -cellH / 2, cellW, cellH);

            ctx.restore();
        }
    }

    // Apply the classic G-Major color inversion effect
    if (invertColors) {
        const imageData = ctx.getImageData(0, 0, width, height);
        const data = imageData.data;
        
        for (let i = 0; i < data.length; i += 4) {
            // Invert the RGB channels
            data[i]     = 255 - data[i];       // Red
            data[i + 1] = 255 - data[i + 1];   // Green
            data[i + 2] = 255 - data[i + 2];   // Blue
            // Alpha (data[i + 3]) remains untouched
        }
        
        ctx.putImageData(imageData, 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 G-Major 16 Image Effect Generator is a creative tool designed to apply a stylized, tiled visual effect to your images. It divides an image into a customizable grid and replicates it across the canvas, with options to alternate mirroring for a patterned look. Additionally, it can apply a color inversion effect to achieve a high-contrast, surreal aesthetic. This tool is ideal for users looking to create unique social media graphics, abstract art, or meme-style visuals.

Leave a Reply

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