Color blending per pixel

Question

I'm trying to understand graphics. Now I'm stuck at color blending. I have tried to use some basic algorithms that would merge colors in rgb. Now I'd like to merge them like in real life ie Yellow + Blue = green. I have a method like this.

package com.boxonix.light.utils;

public class Utils {

   public static int rgbToHex(int r, int g, int b) {
      return (1048576 * r) + (255 * g) + b;
   }

   public static int blendPixels(int r, int g, int b, double alpha, int bgPixel){   
      return 0;
   }

   public static int getRed(int color) {
      int red = Math.floorDiv(color, 1048576);
      return red;
   }

   public static int getGreen(int color) {
      int green = Math.floorDiv(color % 65536, 256);
      return green;
   }

   public static int getBlue(int color) {
      int blue = Math.floorDiv(color % 1048576, 256);
      return blue;
   }
}

r,g,b are colors represent the pixel that is coming over the background pixel (bgPix) alpha is transparency(0.0 - 1.0). I can convert bgPix to r1, g1, b1. Now I need to blend them, Help! :D

Answer 1

It sounds like you are trying to alpha blend a foreground color on top of some background color. Happily, it's as simple as:

alpha * foregroundColor + (1 - alpha) * backgroundColor

The idea is that only part of the color comes from the foreground color, and the rest ( 1 - alpha ) comes from the background. You can see this intuitively if you think about it: if alpha is 0, then all the color comes from the background; if alpha is 1, all of it comes from the foreground.

Example code using your method definitions above:

public static int blendPixels(int r, int g, int b, double alpha, int bgPixel) {   
   int blendedRed = (int)Math.round(alpha * r + (1.0 - alpha) * getRed(bgPixel));
   int blendedGreen = (int)Math.round(alpha * g + (1.0 - alpha) * getGreen(bgPixel));
   int blendedBlue = (int)Math.round(alpha * b + (1.0 - alpha) * getBlue(bgPixel));
   return rgbToHex(blendedRed, blendedGreen, blendedBlue);
}

Hope that helps!

Answer 2

Not actually an answer, but here is a quick implementation of color blending per pixel according to the formula

alpha * foregroundColor + (1 - alpha) * backgroundColor

which seems wrong - look at the screenshot - and feel free to use the code for testing purposes.

Screenshot:

Code:

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JSlider;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.util.Locale;
import java.util.Random;

public class Program {
    static JFrame mainFrame;
    static JPanel view;
    static JLabel fgLabel;
    static JSlider fgTrack;
    static JLabel alphaLabel;
    static JSlider alphaTrack;
    static JLabel bgLabel;
    static JSlider bgTrack;

    static int fg;
    static float alpha;
    static int blend;
    static int bg;

    public static void main(String[] args) {
        //setup application
        mainFrame = new JFrame() {{
            setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            setContentPane(new JPanel() {{
                setLayout(new BorderLayout());
                setSize(640, 480);
                setPreferredSize(getSize());
                add(new JPanel() {{
                    setLayout(new FlowLayout());
                    add(fgLabel = new JLabel());
                    add(fgTrack = new JSlider(0, 100) {{
                        setOrientation(JSlider.VERTICAL);
                        setMajorTickSpacing(25);
                        setMinorTickSpacing(5);
                        setPaintTrack(true);
                        setPaintTicks(true);
                        addChangeListener(e -> {
                            fg = Color.getHSBColor(getValue() / 100f, 1f, 1f).getRGB();
                            fgLabel.setText("fg=" + rgbToString(fg));
                            view.repaint();
                        });
                    }});
                    add(alphaLabel = new JLabel());
                    add(alphaTrack = new JSlider(0, 100) {{
                        setOrientation(JSlider.VERTICAL);
                        setMajorTickSpacing(25);
                        setMinorTickSpacing(5);
                        setPaintTrack(true);
                        setPaintTicks(true);
                        addChangeListener(e -> {
                            alpha = getValue() / 100f;
                            blend = blendPixels(fg, alpha, bg);
                            alphaLabel.setText("<html>alpha=" + alpha+"<br>blend=" + rgbToString(blend));
                            view.repaint();
                        });
                    }});
                    add(bgLabel = new JLabel());
                    add(bgTrack = new JSlider(0, 100) {{
                        setOrientation(JSlider.VERTICAL);
                        setMajorTickSpacing(25);
                        setMinorTickSpacing(5);
                        setPaintTrack(true);
                        setPaintTicks(true);
                        addChangeListener(e -> {
                            bg = Color.getHSBColor(getValue() / 100f, 1f, 1f).getRGB();
                            bgLabel.setText("bg=" + rgbToString(bg));
                            view.repaint();
                        });
                    }});
                }}, BorderLayout.NORTH);
                add(view = new JPanel() {
                    @Override
                    public void paintComponent(Graphics g) {
                        super.paintComponent(g);

                        Graphics2D g2 = (Graphics2D) g;
                        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

                        //"transparent" background
                        final int m = 8;
                        for (int r = 0, x = 0; x < getWidth(); r++, x += m) {
                            for (int c = 0, y = 0; y < getHeight(); c++, y += m) {
                                g2.setColor((r + c) % 2 == 0 ? Color.WHITE : Color.LIGHT_GRAY);
                                g2.fillRect(x, y, m, m);
                            }
                        }

                        //circles
                        final int d = Math.min(getWidth() / 2, getHeight());
                        g2.setColor(new Color(bg));
                        g2.fillOval(d, 0, d, d);
                        g2.setColor(new Color(blend));
                        g2.fillOval(d / 2, 0, d, d);
                        g2.setColor(new Color(fg));
                        g2.fillOval(0, 0, d, d);
                    }
                }, BorderLayout.CENTER);
            }});
        }};

        //randomize values
        Random rng = new Random();
        fgTrack.setValue(rng.nextInt(100));
        alphaTrack.setValue(rng.nextInt(100));
        bgTrack.setValue(rng.nextInt(100));

        //display
        mainFrame.pack();
        mainFrame.setLocationRelativeTo(null);
        mainFrame.setVisible(true);
    }

    public static String rgbToString(int rgb) {
        return Integer.toHexString(rgb).toUpperCase(Locale.ROOT);
    }

    public static int rgbToHex(int r, int g, int b) {
        return (1 << 16) * r
                + (1 << 8) * g
                + (1 << 0) * b;
    }

    public static int blendPixels(int fgPixel, float alpha, int bgPixel) {
        return rgbToHex(
                blendPixelComponent(getRed(fgPixel), alpha, getRed(bgPixel)),
                blendPixelComponent(getGreen(fgPixel), alpha, getGreen(bgPixel)),
                blendPixelComponent(getBlue(fgPixel), alpha, getBlue(bgPixel))
        );
    }

    public static int blendPixelComponent(int fgComp, float alpha, int bgComp) {
        final float beta = 1 - alpha;
        return Math.round(alpha * fgComp + beta * bgComp);
    }

    public static int getRed(int color) {
        return (color >> 16) & 0xFF;
    }

    public static int getGreen(int color) {
        return (color >> 8) & 0xFF;
    }

    public static int getBlue(int color) {
        return (color >> 0) & 0xFF;
    }
}