Ben Simms

Comparing Two Images And Finding The Differences In Java

After a passing comment about comparing two images by “eyeballing”, I wondered if I could create a little application to do the task in an automated fashion, in Java of course.

I had used the PImage class before and I knew it was capable of reading the values of every pixel in a given image so that was my first stop.

I decided to use the weather icons from the BBC website as they share the same dimensions (very important) and some common pixels values.

The reason the dimensions were so important is that I actually re-draw the image intercepting the differences, and if the dimensions of both images did not match exactly then the script would fail (minor detail for this purpose :) )

1  3

 

The Plan

So, below you can see what I came up with, I’ll quickly walk through it (if only so I have it tracked somewhere)

  • I start by providing the location of the two images, these images could also be local.
  • Then I created an instant of Pimage for both images.
  • I set the size of the frame to the first image width, if the frame size does not match the image then it breaks the redraw process.
  • After this I created a loop and got each RED, GREEN and BLUE value of each pixel from the current location of both images.
  • If the values collected did not match, then I convert them to red so that they were highlighted

This was the outcome of comparing both the above images

The Result

Screen Shot 2014-08-05 at 17.44.48

 

You can clearly see the difference in red, pretty cool!

Give it a whirl yourself by copying the below code into Processing and hitting ‘Run’.

 

[codesyntax lang=”php”]

String imageOneUrl = "http://static.bbci.co.uk/weather/0.5.284/images/icons/individual_56_icons/en_on_light_bg/3.gif";
String imageTwoUrl = "http://static.bbci.co.uk/weather/0.5.284/images/icons/individual_56_icons/en_on_light_bg/1.gif";

PImage imageOne;
PImage imageTwo;
int pixelYPosition;
int pixelXPosition;

public void setup() {
  imageOne = loadImage(imageOneUrl, "png");
  imageTwo = loadImage(imageTwoUrl, "png");
  size(imageOne.width, imageOne.height);
}

public void draw() {
  loadPixels();
  imageOne.loadPixels();
  imageTwo.loadPixels();

  for (pixelYPosition = 0; pixelYPosition < imageOne.height; pixelYPosition++) {
    for (pixelXPosition = 0; pixelXPosition < imageOne.width; pixelXPosition++) {

      int loc = pixelXPosition + pixelYPosition * imageOne.width;
      int loc1 = pixelXPosition + pixelYPosition * imageTwo.width;

      float r = red(imageOne.pixels[loc]);
      float g = green(imageOne.pixels[loc]);
      float b = blue(imageOne.pixels[loc]);

      float r1 = red(imageTwo.pixels[loc1]);
      float r2 = red(imageTwo.pixels[loc1]);
      float r3 = red(imageTwo.pixels[loc1]);

      if (!(r == r1) && (!(g == r2) && (!(b == r3)))) {
        r = 255;
        g = 0;
        b = 0;
      }

      pixels[loc] = color(r, g, b);
    }
  }
  updatePixels();
}

[/codesyntax]

 

Categories: Uncategorized

Retro Alien Font » « Creating a static tv effect

3 Comments

  1. Hello, Can you send me the code for that Image comparison post of yours? Complete code ? ,
    regards :)

  2. Hi.. I am getting an “java.lang.ArrayIndexOutOfBoundsException: 88200” exception and a blank window. what must be wrong? Can you please help me?

  3. Can you please share full source code

Leave a Reply

Your email address will not be published.

*

Copyright © 2017 Ben Simms

Theme by Anders NorenUp ↑