Programming Visualization

More Experiments Around RGB Averaging

I decided to replicate the showing/hiding the dominant hues in images with showing/hiding around the average RGB values instead.

I created a class called RGBColor (just holds red, green, and blue values), similar to the one I created called HSBColor. I could have used the java.awt.Color class, but that insists on a range of 0-1 for the values, and I wanted to avoid conversions between that and the 0-255 that Processing uses by default. Or, better, allow me to set the colorMode to be in range 1-100, so that my tolerances were percentages – I found this made it easier to pick good values there.

Images Showing Colors Around “Average” RGB

Images Hiding Colors Around “Average” RGB

Source Code

package ui;

import model.RGBColor;
import color.ColorHelper;
import processing.core.PApplet;
import processing.core.PImage;

public class AverageRGBImageViewApplet extends PApplet {

	PImage img;
	static final int rgbTolerance = 50;  // Adjust this.

	public void setup() {
		img = loadImage(/* Your image file here */);
		colorMode(RGB, 100);

	public void draw() {
		image(img, 0, 0, 640, 480);

	private void processImage() {
		RGBColor color = ColorHelper.rgbColorFromImage(img, this);

		for (int i = 0; i < img.pixels.length; i++) {
			int pixel = img.pixels[i];
			RGBColor pxColor =
				new RGBColor(red(pixel), green(pixel), blue(pixel));
			// Adjust this conditional to show/hide around average rgb.
			if (!rgbInRange(color, pxColor, rgbTolerance)) {
				float brightness = brightness(pixel);
				img.pixels[i] = color(brightness);

	private boolean rgbInRange(RGBColor colorA, RGBColor colorB, int tolerance) {
		return Math.abs(colorA.r - colorB.r) < tolerance &&
			Math.abs(colorA.g - colorB.g) < tolerance &&
			Math.abs(colorA.b - colorB.b) < tolerance;

package color;

import processing.core.PApplet;
import processing.core.PImage;
import model.RGBColor;

public class ColorHelper {

	public static RGBColor rgbColorFromImage(PImage img, PApplet applet) {
		int numberOfPixels = img.pixels.length;
		float totalRed = 0f;
		float totalGreen = 0f;
		float totalBlue = 0f;

		for (int i = 0; i < numberOfPixels; i++) {
			int pixel = img.pixels[i];
			totalRed +=;
			totalGreen +=;
			totalBlue +=;

		// Calculate final rgb values.
		float r = totalRed / numberOfPixels;
		float g = totalGreen / numberOfPixels;
		float b = totalBlue / numberOfPixels;
		return new RGBColor(r, g, b);