Ryan McCauley
Ryan McCauley

Reputation: 216

Java - Tracing outline of abstract shapes and making outer pixels transparent

I want to layer two images together. A background and foreground. The foreground is stitched together as a grid of smaller images (3x3). I have been able to make all white pixels transparent as a workaround, however the inside of the shapes are white and I only want pixels outside the shapes transparent.

Say for example the grid of images contained a circle or square in each grid location. Is there a way I can iterate over each pixel and create two arrays of pixel locations - those outside the images making them transparent, and those inside the images where I can set the colour?

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;

// Stitches a grid of images together, scales a background image to fit and layers them.
public class Layer {

    public static void layerImages() {

        // Grid layout of images to stitch.
        int rows = 3;
        int cols = 3;
        int chunks = rows * cols;
        int chunckWidth, chunkHeight;

        // Image files to stitch
        File[] imgFiles = new File[chunks];

        for(int i = 0; i < chunks; i++) {
            imgFiles[i] = new File("ocarina_sprite" + (i + 1) + ".png");
        }

        // Read images into array.
        try {
            BufferedImage[] buffImages = new BufferedImage[chunks];
            for (int i = 0; i < chunks; i++) {
                buffImages[i] = ImageIO.read(imgFiles[i]);
            }

            chunckWidth = buffImages[0].getWidth();
            chunkHeight = buffImages[0].getHeight();

            BufferedImage finalImage = new BufferedImage(chunckWidth * cols, chunkHeight*rows, BufferedImage.TYPE_INT_ARGB);

            // Calculate background width and height to cover stitched image.
            int bwidth = 0;
            int bheight = 0;

            for(int i = 0; i < rows; i++) {
                bwidth += buffImages[i].getWidth();
            }
            for(int i = 0; i < cols; i++) {
                bheight += buffImages[i].getHeight();
            }

            // Background image
            File dory = new File("dory.png");
            BufferedImage original = ImageIO.read(dory);
            // Scale background image.
            BufferedImage background = scale(original, bwidth, bheight);

            // Prepare final image by drawing background first.
            Graphics2D g = finalImage.createGraphics();
            g.drawImage(background, 0, 0, null);

            // Prepare foreground image.
            BufferedImage foreground = new BufferedImage(chunckWidth * cols, chunkHeight*rows, BufferedImage.TYPE_INT_ARGB);

            // Stitch foreground images together
            int num = 0;
            for(int i = 0; i < rows; i++) {
                for(int j = 0; j < rows; j++) {
                    foreground.createGraphics().drawImage(buffImages[num],chunckWidth * j, chunkHeight * i, null);
                    num++;
                }
            }

            // Set white pixels to transparent.
            for (int y = 0; y < foreground.getHeight(); ++y) {
                for (int x = 0; x < foreground.getWidth(); ++x) {
                    int argb = foreground.getRGB(x, y);
                    if ((argb & 0xFFFFFF) > 0xFFFFEE) {
                        foreground.setRGB(x, y, 0x00FFFFFF);
                    }
                }
            }

            // Draw foreground image to final image.
            Graphics2D g3 = finalImage.createGraphics();
            g3.drawImage(foreground, 0, 0, null);


            // Output final image
            ImageIO.write(finalImage, "png", new File("finalImage.png"));
        }
        catch (Exception e) {
            System.out.println(e);
        }
    }

    // Scale image
    public static BufferedImage scale(BufferedImage imageToScale, int dWidth, int dHeight) {
        BufferedImage scaledImage = null;
        if (imageToScale != null) {
            scaledImage = new BufferedImage(dWidth, dHeight, imageToScale.getType());
            Graphics2D graphics2D = scaledImage.createGraphics();
            graphics2D.drawImage(imageToScale, 0, 0, dWidth, dHeight, null);
            graphics2D.dispose();
        }
        return scaledImage;
    }
} 

Upvotes: 1

Views: 613

Answers (1)

Ryan McCauley
Ryan McCauley

Reputation: 216

The floodfill solution mentioned in the comment was what I needed to solve the problem, however the recursion over a million+ pixels didn't work out so I implemented the forest fire algorithm which is floodfill using queues instead of recursion.

public static void forestFire(int width, int height, int x, int y) {
        // Check if already set
        int argb = foreground.getRGB(x, y);
        if (((argb >> 24) & 0xFF) == 0) {
            return;
        }
        coords.add(new Point(x, y));

        // Set transparent pixel
        foreground.setRGB(x, y, 0x00FFFFFF);

        Point currentCoord = new Point();

        while(!coords.isEmpty()) {
            currentCoord.setLocation(coords.poll());

            // Get current coordinates
            x = (int)currentCoord.getX();
            y = (int)currentCoord.getY();

            // North
            if(y != 0) {
                int north = foreground.getRGB(x, y - 1);
                // Check if transparent (already set) and check target colour (white)
                if (((north >> 24) & 0xFF) > 0 && (north & 0xFFFFFF) > 0x111100) {
                    // Set transparent pixel
                    foreground.setRGB(x, y - 1, 0x00FFFFFF);
                    coords.add(new Point(x, y - 1));
                }
            }

            // East
            if(x != width - 1) {
                int east = foreground.getRGB(x + 1, y);
                if (((east >> 24) & 0xFF) > 0 && (east & 0xFFFFFF) > 0x111100) {
                    foreground.setRGB(x + 1, y, 0x00FFFFFF);
                    coords.add(new Point(x + 1, y));
                }
            }

            // South
            if(y != height - 1) {
                int south = foreground.getRGB(x, y + 1);
                if (((south >> 24) & 0xFF) > 0 && (south & 0xFFFFFF) > 0x111100) {
                    foreground.setRGB(x, y + 1, 0x00FFFFFF);
                    coords.add(new Point(x, y + 1));
                }
            }

            // West
            if(x != 0) {
                int west = foreground.getRGB(x - 1, y);
                if (((west >> 24) & 0xFF) > 0 && (west & 0xFFFFFF) > 0x111100) {
                    foreground.setRGB(x - 1, y, 0x00FFFFFF);
                    coords.add(new Point(x - 1, y));
                }
            }
        }

Upvotes: 2

Related Questions