Image Home Builder

/**
 * Creates a collage of a house using random patches from the original image.
 * This function builds a house shape (a rectangular base with a triangular roof)
 * and fills it with small, randomly selected square blocks from the source image,
 * effectively "building a house" out of the image's textures and colors.
 *
 * @param {HTMLImageElement} originalImg The original image object to use as the source for textures.
 * @param {number} blockSize The width and height of the square patches sampled from the original image to build the house.
 * @param {number} houseWidth The width of the house base. The total canvas width will be equal to this.
 * @param {number} houseHeight The height of the rectangular base of the house.
 * @param {number} roofHeight The height of the triangular roof.
 * @param {number} addDoor A boolean-like parameter (1 for true, 0 for false) to add a door to the house. The door will be a tinted area.
 * @param {number} addWindows A boolean-like parameter (1 for true, 0 for false) to add two windows to the house. The windows will be tinted areas.
 * @returns {HTMLCanvasElement} A canvas element displaying the generated house image.
 */
function processImage(originalImg, blockSize = 10, houseWidth = 400, houseHeight = 300, roofHeight = 200, addDoor = 1, addWindows = 1) {
    // 1. Create the destination canvas
    const canvas = document.createElement('canvas');
    const totalWidth = houseWidth;
    const totalHeight = houseHeight + roofHeight;
    canvas.width = totalWidth;
    canvas.height = totalHeight;
    const ctx = canvas.getContext('2d');

    // Basic validation
    if (originalImg.width < blockSize || originalImg.height < blockSize) {
        console.error("Original image is smaller than the block size.");
        ctx.font = "16px sans-serif";
        ctx.fillStyle = "black";
        ctx.textAlign = "center";
        ctx.fillText("Image is smaller than block size.", canvas.width / 2, canvas.height / 2);
        return canvas;
    }

    // 2. Define regions for house features (door and windows)
    const doorWidth = addDoor ? totalWidth / 5 : 0;
    const doorHeight = addDoor ? houseHeight / 2 : 0;
    const doorX = addDoor ? (totalWidth - doorWidth) / 2 : -1;
    const doorY = addDoor ? totalHeight - doorHeight : -1;
    const doorEndX = doorX + doorWidth;
    const doorEndY = doorY + doorHeight;

    const windowSize = addWindows ? totalWidth / 6 : 0;
    const windowY = addWindows ? roofHeight + houseHeight / 5 : -1;
    const window1X = addWindows ? totalWidth * 0.25 - windowSize / 2 : -1;
    const window2X = addWindows ? totalWidth * 0.75 - windowSize / 2 : -1;
    const window1EndX = window1X + windowSize;
    const window2EndX = window2X + windowSize;
    const windowEndY = windowY + windowSize;


    // 3. Iterate through the canvas grid and build the house
    for (let y = 0; y < totalHeight; y += blockSize) {
        for (let x = 0; x < totalWidth; x += blockSize) {

            // Use the center of the block to check if it's inside the house shape
            const checkX = x + blockSize / 2;
            const checkY = y + blockSize / 2;

            let isInShape = false;
            const halfHouseWidth = houseWidth / 2;

            // Check if the block is in the triangular roof
            if (checkY >= 0 && checkY < roofHeight) {
                const y_normalized = checkY / roofHeight;
                const roofWidthAtY = y_normalized * houseWidth;
                const roofStartX = halfHouseWidth - roofWidthAtY / 2;
                const roofEndX = halfHouseWidth + roofWidthAtY / 2;

                if (checkX >= roofStartX && checkX < roofEndX) {
                    isInShape = true;
                }
            }
            // Check if the block is in the rectangular base
            else if (checkY >= roofHeight && checkY < totalHeight) {
                if (checkX >= 0 && checkX < houseWidth) {
                    isInShape = true;
                }
            }

            if (isInShape) {
                // Pick a random patch from the source image
                const sourceX = Math.random() * (originalImg.width - blockSize);
                const sourceY = Math.random() * (originalImg.height - blockSize);

                // Draw the patch onto the canvas
                ctx.drawImage(
                    originalImg,
                    sourceX,
                    sourceY,
                    blockSize,
                    blockSize,
                    x,
                    y,
                    blockSize,
                    blockSize
                );

                // Check if the block falls within a feature region and apply a tint if so
                // Check for door
                if (addDoor && checkX >= doorX && checkX < doorEndX && checkY >= doorY && checkY < doorEndY) {
                    ctx.fillStyle = 'rgba(101, 67, 33, 0.4)'; // Dark brown tint
                    ctx.fillRect(x, y, blockSize, blockSize);
                }
                // Check for windows
                else if (addWindows &&
                    ((checkX >= window1X && checkX < window1EndX && checkY >= windowY && checkY < windowEndY) ||
                        (checkX >= window2X && checkX < window2EndX && checkY >= windowY && checkY < windowEndY))
                ) {
                    ctx.fillStyle = 'rgba(173, 216, 230, 0.5)'; // Light blue tint
                    ctx.fillRect(x, y, blockSize, blockSize);
                }
            }
        }
    }

    // 4. Return the final canvas
    return canvas;
}