Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.

Alpha Composites

There are 12 AlphaComposites. They are:

Clear

Both the colour and the alpha of the destination are cleared. Whatever colour or shape you paint with, every pixel of the destination covered by the sourse will disappear.

Dst

The destination is left untouched. Whatever you draw on the destination will be descarded.

DstAtop

The part of the destination lying inside of the sourse is composed with the source and replaces the destination. The results in the destination appearing to be drawn on top of the source instead of the other way around.

DstIn

The past of the destination lying inside of the source replaces the destination. It is the opposite of DstOut. With an alpha of 50%, both operations will look the same.

DstOut

The past of the destination lying outside of the source replaces the destination. It is the opposite of DstIn. With an alpha of 50%, both operations will look the same.

DstOver

The destination is composed with the source and the result replaces the destination. The parts of the source outside are drawn normally.

Src

The destination is replaced by the source.

SrcAtop

The part of the source lying inside the destination is composed with the destination. The part of the source lying outside of the destination is discarded.

SrcIn

The part of the source lying inside the destination replaces the destination. The part of the source lying outside of the destination is discarded.

SrcOut

The part of the source lying outside the destination replaces the destination. The part of the source lying inside of the destination is discarded.

SrcOver

The source is composed with the destination.

Xor

The part ot the source that lies ourside of the destination is combinded with the part of the destination that lies outside of the source.

Alpha Composite example (Run Applet)

import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import javax.swing.*;

public class AlphaCompositeDemo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel implements ItemListener
    {
        private final Image image = new ImageIcon(getClass().getClassLoader().getResource("images/koala.jpg")).getImage();
        final private String alphaCompositeNames[] =
        {
            "Clear", "Dst", "DstAtop", "DstIn", "DstOut", "DstOver",
            "Src", "SrcAtop", "SrcIn", "SrcOut", "SrcOver", "Xor"
        };
        final private JComboBox alphaCompositeList = new JComboBox(alphaCompositeNames);
        private AlphaComposite selectedAlphaComposite = AlphaComposite.Dst;

        public View()
        {
            super();
            this.add(this.alphaCompositeList);
            this.alphaCompositeList.addItemListener(this);
        }

        @Override
        public void paintComponent(Graphics g)
        {
            super.paintComponent(g);


            final BufferedImage alphaCompositeBufferedImg = new BufferedImage(getWidth(), getHeight(), BufferedImage.TYPE_INT_ARGB);
            final Graphics2D alphaCompositeG = alphaCompositeBufferedImg.createGraphics();

            alphaCompositeG.setColor(Color.yellow);

            // Anything that is drawn BEFORE the application of the composite will be part of the composite
            alphaCompositeG.fillOval(70, 70, 210, 100);

            alphaCompositeG.setComposite(this.selectedAlphaComposite);

            // Anything that is drawn AFTER the application of the composite will have the composite applied to it
            alphaCompositeG.drawImage(this.image, 100, 40, 150, 150, this);
            alphaCompositeG.setColor(Color.red);
            alphaCompositeG.drawString("Text that is partially outside of Oval", 50, 100);


            g.drawImage(alphaCompositeBufferedImg, 0, 0, getWidth(), getHeight(), this);
        }

        @Override
        public void itemStateChanged(ItemEvent e)
        {
            final AlphaComposite alphaComposites[] =
            {
                AlphaComposite.Clear, AlphaComposite.Dst,
                AlphaComposite.DstAtop, AlphaComposite.DstIn,
                AlphaComposite.DstOut, AlphaComposite.DstOver,
                AlphaComposite.Src, AlphaComposite.SrcAtop,
                AlphaComposite.SrcIn, AlphaComposite.SrcOut,
                AlphaComposite.SrcOver, AlphaComposite.Xor
            };

            this.selectedAlphaComposite = alphaComposites[this.alphaCompositeList.getSelectedIndex()];
            this.repaint();
        }
    }
}

Translucent Alpha Masks

AlphaComposites can be used to create translucent masks. The example below shows a uniform translucent mask.

AlphaComposite_Translucent_Demo example (Run Applet)

import java.awt.*;
import java.awt.image.BufferedImage;
import javax.swing.*;

public class AlphaComposite_Translucent_Demo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel
    {
        private final Image image = new ImageIcon(getClass().getClassLoader().getResource("images/koala.jpg")).getImage();

        public View()
        {
            super();
        }

        @Override
        public void paintComponent(Graphics g)
        {
            super.paintComponent(g);

            final BufferedImage alphaCompositeBufferedImg = new BufferedImage(getWidth(), getHeight(), BufferedImage.TYPE_INT_ARGB);
            final Graphics2D alphaCompositeG = alphaCompositeBufferedImg.createGraphics();

            // The gradient is controlled soley by the alpha value
            // It does not matter what the RGB values are          
            alphaCompositeG.setPaint(new Color(255, 255, 255, 50));

            alphaCompositeG.fillRect(0, 0, getWidth(), getHeight());
            alphaCompositeG.setComposite(AlphaComposite.SrcIn);
            alphaCompositeG.drawImage(this.image, 0, 0, getWidth(), getHeight(), this);

            g.drawImage(alphaCompositeBufferedImg, 0, 0, getWidth(), getHeight(), this);
        }
    }
}

Alpha Spotlight

AlphaComposites can be used to create transparent masks. The example below shows a transparent mask.

AlphaComposite_Spotlight_Demo example (Run Applet)

import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import javax.swing.*;

public class AlphaComposite_Spotlight_Demo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel implements MouseMotionListener
    {
        private final Image image = new ImageIcon(getClass().getClassLoader().getResource("images/koala.jpg")).getImage();
        private int x;
        private int y;

        public View()
        {
            this.addMouseMotionListener(this);
        }

        @Override
        protected void paintComponent(Graphics g)
        {
            super.paintComponent(g);
            final Graphics2D g2D = (Graphics2D) g;

            // create faded background
            final BufferedImage fadedBackgroundImg = new BufferedImage(getWidth(),
                                                                       getHeight(),
                                                                       BufferedImage.TYPE_INT_ARGB);
            final Graphics2D fadedBackgroundG = fadedBackgroundImg.createGraphics();

            // create the translucent background image
            fadedBackgroundG.setPaint(new Color(255, 255, 255, 50));
            fadedBackgroundG.fillRect(0, 0, getWidth(), getHeight());
            fadedBackgroundG.setComposite(AlphaComposite.SrcIn);
            fadedBackgroundG.drawImage(this.image, 0, 0, getWidth(), getHeight(), this);

            // create magnifier
            final BufferedImage spotlightImg = new BufferedImage(getWidth(),
                                                                 getHeight(),
                                                                 BufferedImage.TYPE_INT_ARGB);
            final Graphics2D spotlightG = spotlightImg.createGraphics();

            final int radius = 50;         // adjust this figure to make the spotlight bigger

            spotlightG.fillOval(this.x - radius, this.y - radius, radius * 2, radius * 2);
            spotlightG.setComposite(AlphaComposite.SrcIn);
            spotlightG.drawImage(this.image, 0, 0, getWidth(), getHeight(), this);

            g2D.drawImage(fadedBackgroundImg, 0, 0, getWidth(), getHeight(), this);
            g2D.drawImage(spotlightImg, 0, 0, getWidth(), getHeight(), this);
            g2D.setColor(Color.gray);
            g2D.drawOval(this.x - radius, this.y - radius, radius * 2, radius * 2);
        }

        @Override
        public void mouseMoved(MouseEvent e)
        {
            this.x = e.getX();
            this.y = e.getY();
            this.repaint();
        }

        @Override
        public void mouseDragged(MouseEvent e)
        {
        }
    }
}

Magnify

The example below shows a transparent mask being used as a magnifier.

AlphaComposite_Magnify_Demo example (Run Applet)

import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import javax.swing.*;

public class AlphaComposite_Magnify_Demo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel implements MouseMotionListener
    {
        private final Image image = new ImageIcon(getClass().getClassLoader().getResource("images/people.jpg")).getImage();
        private int x;
        private int y;

        public View()
        {
            addMouseMotionListener(this);
        }

        @Override
        protected void paintComponent(Graphics g)
        {
            super.paintComponent(g);
            final Graphics2D g2D = (Graphics2D) g;

            // create magnifier
            final BufferedImage magnifierImg = new BufferedImage(getWidth(),
                                                                 getHeight(),
                                                                 BufferedImage.TYPE_INT_ARGB);
            final Graphics2D magnifierG = magnifierImg.createGraphics();

            final int radius = 50;  // radius of the magnifier in pixels
            final int scale = 5;   // scaling factor. 1 means no scaling is performed

            magnifierG.fillOval(this.x - radius, this.y - radius, (radius * 2), (radius * 2));
            magnifierG.setComposite(AlphaComposite.SrcIn);
            magnifierG.drawImage(this.image, -(scale - 1) * this.x, -(scale - 1) * this.y, getWidth() * scale, getHeight() * scale, this);

            g2D.drawImage(this.image, 0, 0, getWidth(), getHeight(), this);
            g2D.drawImage(magnifierImg, 0, 0, getWidth(), getHeight(), this);

            g2D.setColor(Color.black);
            g2D.drawOval(this.x - radius, this.y - radius, radius * 2, radius * 2);
        }

        @Override
        public void mouseMoved(MouseEvent e)
        {
            this.x = e.getX();
            this.y = e.getY();
            this.repaint();
        }

        @Override
        public void mouseDragged(MouseEvent e)
        {
        }
    }
}

Image Mask

Transparent masks do not have to be shapes. The example below shows a transparent mask that is made from an image.

AlphaComposite_Image_Demo example (Run Applet)

import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import javax.swing.*;

public class AlphaComposite_Image_Demo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel implements MouseMotionListener
    {
        private final Image image = new ImageIcon(getClass().getClassLoader().getResource("images/koala.jpg")).getImage();
        private final Image spotlightImage = new ImageIcon(getClass().getClassLoader().getResource("images/koala_clipart.png")).getImage();
        private int x;
        private int y;

        public View()
        {
            addMouseMotionListener(this);
        }

        @Override
        protected void paintComponent(Graphics g)
        {
            super.paintComponent(g);
            final Graphics2D g2D = (Graphics2D) g;

            // create faded background
            final BufferedImage fadedBackgroundImg = new BufferedImage(getWidth(),
                                                                       getHeight(),
                                                                       BufferedImage.TYPE_INT_ARGB);
            final Graphics2D fadedBackgroundG = fadedBackgroundImg.createGraphics();

            // set the translucency of the fadedBackground
            final int alpha = 30; // adjust this figure in rance of 0 to 255 to change translucency

            fadedBackgroundG.setPaint(new Color(0, 0, 0, alpha));
            fadedBackgroundG.fillRect(0, 0, getWidth(), getHeight());
            fadedBackgroundG.setComposite(AlphaComposite.SrcIn);
            fadedBackgroundG.drawImage(this.image, 0, 0, getWidth(), getHeight(), this);

            // create magnifier
            final BufferedImage spotlightImg = new BufferedImage(getWidth(),
                                                                 getHeight(),
                                                                 BufferedImage.TYPE_INT_ARGB);
            final Graphics2D spotlightG = spotlightImg.createGraphics();

            spotlightG.drawImage(this.spotlightImage, this.x - 50, this.y - 50, 100, 100, this);
            spotlightG.setComposite(AlphaComposite.SrcIn);
            spotlightG.drawImage(this.image, 0, 0, getWidth(), getHeight(), this);

            g2D.drawImage(fadedBackgroundImg, 0, 0, getWidth(), getHeight(), this);
            g2D.drawImage(spotlightImg, 0, 0, getWidth(), getHeight(), this);
        }

        @Override
        public void mouseMoved(MouseEvent e)
        {
            this.x = e.getX();
            this.y = e.getY();
            this.repaint();
        }

        @Override
        public void mouseDragged(MouseEvent e)
        {
        }
    }
}

Text Mask

The example below shows a transparent mask that is made from text.

AlphaComposite_Text_Demo example (Run Applet)

import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import javax.swing.*;

public class AlphaComposite_Text_Demo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel implements MouseMotionListener
    {
        private final Image image = new ImageIcon(getClass().getClassLoader().getResource("images/koala.jpg")).getImage();
        private int x;
        private int y;

        public View()
        {
            addMouseMotionListener(this);
        }

        @Override
        protected void paintComponent(Graphics g)
        {
            super.paintComponent(g);
            final Graphics2D g2D = (Graphics2D) g;

            // create faded background
            final BufferedImage fadedBackgroundImg = new BufferedImage(getWidth(),
                                                                       getHeight(),
                                                                       BufferedImage.TYPE_INT_ARGB);
            final Graphics2D fadedBackgroundG = fadedBackgroundImg.createGraphics();

            // set the translucency of the fadedBackground
            final int alpha = 30; // adjust this figure in rance of 0 to 255 to change translucency

            fadedBackgroundG.setPaint(new Color(0, 0, 0, alpha));
            fadedBackgroundG.fillRect(0, 0, getWidth(), getHeight());
            fadedBackgroundG.setComposite(AlphaComposite.SrcIn);
            fadedBackgroundG.drawImage(this.image, 0, 0, getWidth(), getHeight(), this);

            // create magnifier
            final BufferedImage spotlightImg = new BufferedImage(getWidth(),
                                                                 getHeight(),
                                                                 BufferedImage.TYPE_INT_ARGB);
            final Graphics2D spotlightG = spotlightImg.createGraphics();

            spotlightG.setFont(new Font("Times Roman", Font.BOLD, 100));
            spotlightG.drawString("Hello", this.x - 115, this.y + 40);
            spotlightG.setComposite(AlphaComposite.SrcIn);
            spotlightG.drawImage(this.image, 0, 0, getWidth(), getHeight(), this);

            g2D.drawImage(fadedBackgroundImg, 0, 0, getWidth(), getHeight(), this);
            g2D.drawImage(spotlightImg, 0, 0, getWidth(), getHeight(), this);
        }

        @Override
        public void mouseMoved(MouseEvent e)
        {
            this.x = e.getX();
            this.y = e.getY();
            this.repaint();
        }

        @Override
        public void mouseDragged(MouseEvent e)
        {
        }
    }
}

Alpha DropShadow

AlphaComposite.dst can be used to create a flat drop shadow, as shown in the example below.

AlphaComposite_DropShadow_Demo example (Run Applet)

import java.awt.*;
import java.awt.image.BufferedImage;
import javax.swing.*;

public class AlphaComposite_DropShadow_Demo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel
    {
        private final Image image = new ImageIcon(getClass().getClassLoader().getResource("images/world_cup_trophy.gif")).getImage();
        private final int shadowOffset = 10;
        private final Color shadowColour = Color.black;

        public View()
        {
            super();
        }

        @Override
        public void paintComponent(Graphics g)
        {
            super.paintComponent(g);

            final BufferedImage dropShadowBufferedImg = new BufferedImage(getWidth(), getHeight(), BufferedImage.TYPE_INT_ARGB);
            final Graphics2D dropShadowG = dropShadowBufferedImg.createGraphics();

            // make the drop shadow
            dropShadowG.setColor(Color.yellow);
            dropShadowG.drawImage(this.image, 0, 0, getWidth(), getHeight(), this);
            dropShadowG.setComposite(AlphaComposite.SrcIn);
            dropShadowG.setColor(this.shadowColour);
            dropShadowG.fillRect(0, 0, getWidth(), getHeight());

            // draw the drop shadow and then draw the image over it
            g.drawImage(dropShadowBufferedImg, this.shadowOffset, this.shadowOffset, getWidth() - this.shadowOffset, getHeight() - this.shadowOffset, this);
            g.drawImage(this.image, 0, 0, getWidth() - this.shadowOffset, getHeight() - this.shadowOffset, this);
        }
    }
}

Text Drop Shadow

AlphaComposites can be used to create drop shadows. The example below shows a text drop shadow.

AlphaComposite_Text_DropShadow_Demo example (Run Applet)

import java.awt.*;
import java.awt.image.BufferedImage;
import javax.swing.*;

public class AlphaComposite_Text_DropShadow_Demo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel
    {
        public View()
        {
            super();
        }

        @Override
        public void paintComponent(Graphics g)
        {
            super.paintComponent(g);

            final BufferedImage dropShadowBufferedImg = new BufferedImage(getWidth(), getHeight(), BufferedImage.TYPE_INT_ARGB);
            final Graphics2D dropShadowG = dropShadowBufferedImg.createGraphics();

            final String message = "Hello";
            final int x = 50;   // x and y position of text
            final int y = 150;
            final int shadowOffset = 10; // offset of drop shadow

            // make the drop shadow
            dropShadowG.setColor(Color.yellow);
            dropShadowG.setFont(new Font("Times Roman", Font.BOLD, 100));
            dropShadowG.drawString(message, x + shadowOffset, y + shadowOffset);
            dropShadowG.setComposite(AlphaComposite.SrcIn);

            // set the drop shadow colour
            final Color shadowColour = Color.lightGray;

            dropShadowG.setColor(shadowColour);
            dropShadowG.fillRect(0, 0, getWidth(), getHeight());

            // draw the drop shadow and then draw the image over it
            g.drawImage(dropShadowBufferedImg, 0, 0, getWidth(), getHeight(), this);
            g.setFont(new Font("Times Roman", Font.BOLD, 100));
            g.drawString(message, x, y);
        }
    }
}

Coloured Text Drop Shadow

Drop shadows can be made to be any colour. The example below shows a drop shadow that is based on the colour of the text.

AlphaComposite_Coloured_DropShadow_Demo example (Run Applet)

import java.awt.*;
import java.awt.image.BufferedImage;
import javax.swing.*;

public class AlphaComposite_Coloured_DropShadow_Demo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel
    {
        public View()
        {
            super();
        }

        @Override
        public void paintComponent(Graphics g)
        {
            super.paintComponent(g);

            g.setColor(Color.red);
            final BufferedImage dropShadowBufferedImg = new BufferedImage(getWidth(), getHeight(), BufferedImage.TYPE_INT_ARGB);
            final Graphics2D dropShadowG = dropShadowBufferedImg.createGraphics();

            final String message = "Hello";
            final int x = 50;   // x and y position of text
            final int y = 150;
            final int shadowOffset = 10;   // offset of drop shadow
            final int alpha = 80;          // translucency of dropshadow, in range 0..255

            // make the drop shadow
            dropShadowG.setColor(Color.yellow);
            dropShadowG.setFont(new Font("Times Roman", Font.BOLD, 100));
            dropShadowG.drawString(message, x + shadowOffset, y + shadowOffset);
            dropShadowG.setComposite(AlphaComposite.SrcIn);

            // set the drop shadow colour to have a translucency of strength of alpha, between 0 and 255
            dropShadowG.setColor(new Color(g.getColor().getRed(), g.getColor().getGreen(), g.getColor().getBlue(), alpha));

            dropShadowG.fillRect(0, 0, getWidth(), getHeight());

            // draw the drop shadow and then draw the image over it
            g.drawImage(dropShadowBufferedImg, 0, 0, getWidth(), getHeight(), this);
            g.setFont(new Font("Times Roman", Font.BOLD, 100));
            g.drawString(message, x, y);
        }
    }
}

Alpha Stepped DropShadow

AlphaComposite.dst can be used to create a flat drop shadow, as shown in the example below.

AlphaComposite_SteppedDropShadow_Demo example (Run Applet)

import java.awt.*;
import java.awt.image.BufferedImage;
import javax.swing.*;

public class AlphaComposite_SteppedDropShadow_Demo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel
    {
        private final Image image = new ImageIcon(getClass().getClassLoader().getResource("images/world_cup_trophy.gif")).getImage();
        private final int shadowOffset = 10;

        public View()
        {
            super();
        }

        @Override
        public void paintComponent(Graphics g)
        {
            super.paintComponent(g);

            final BufferedImage dropShadowBufferedImg = new BufferedImage(getWidth(), getHeight(), BufferedImage.TYPE_INT_ARGB);
            final Graphics2D dropShadowG = dropShadowBufferedImg.createGraphics();

            // Make the drop shadow by drawing 'this.shadowOffset' drop shadow layers on top of each other.
            // The first drop shadow layer is almost white and extends the furthest.
            // Each progressive drop shadow layer is darker and extends less distance than the previous drop shadow
            // Each progressive drop shadow layer is drawn on top of the previous drop shadow layer
            dropShadowG.setColor(Color.yellow);
            dropShadowG.drawImage(this.image, 0, 0, getWidth(), getHeight(), this);
            dropShadowG.setComposite(AlphaComposite.SrcIn);
            for (int i = this.shadowOffset; i > 0; i--)
            {
                // The darkness of the current drop shadow layer is dependent on 'i'.
                // Smaller values of 'i' give darker drop shadows
                dropShadowG.setColor(new Color(255 / this.shadowOffset * i, 255 / this.shadowOffset * i, 255 / this.shadowOffset * i));
                dropShadowG.fillRect(0, 0, getWidth(), getHeight());

                // draw the curent drop shadow layer on top of any previous drop shadows
                g.drawImage(dropShadowBufferedImg, i, i, getWidth() - this.shadowOffset, getHeight() - this.shadowOffset, this);
            }

            // Draw the image over the drop shadow
            g.drawImage(this.image, 0, 0, getWidth() - this.shadowOffset, getHeight() - this.shadowOffset, this);
        }
    }
}

Gradient Alpha Masks

Any Gradient can be used as an alpha mask. In the example below, a linear gradient is used to fade the transparancy of the image.

AlphaComposite_Gradient_Demo example (Run Applet)

import java.awt.*;
import java.awt.image.BufferedImage;
import javax.swing.*;

public class AlphaComposite_Gradient_Demo extends JApplet
{
    @Override
    public void init()
    {
        this.setContentPane(new View());
    }

    public class View extends JPanel
    {
        private final Image image = new ImageIcon(getClass().getClassLoader().getResource("images/koala.jpg")).getImage();

        public View()
        {
            super();
        }

        @Override
        public void paintComponent(Graphics g)
        {
            super.paintComponent(g);

            final BufferedImage alphaCompositeBufferedImg = new BufferedImage(getWidth(), getHeight(), BufferedImage.TYPE_INT_ARGB);
            final Graphics2D alphaCompositeG = alphaCompositeBufferedImg.createGraphics();

            // The gradient is controlled soley by the alpha value
            // It does not matter what the RGB values are
            GradientPaint gradient = new GradientPaint(0, 0, new Color(255, 255, 255, 255), 0, getHeight(), new Color(255, 255, 255, 0));

            alphaCompositeG.setPaint(gradient);
            alphaCompositeG.fillRect(0, 0, getWidth(), getHeight());
            alphaCompositeG.setComposite(AlphaComposite.SrcIn);
            alphaCompositeG.drawImage(this.image, 0, 0, getWidth(), getHeight(), this);

            g.drawImage(alphaCompositeBufferedImg, 0, 0, getWidth(), getHeight(), this);
        }
    }
}

Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.