looking up colors

I wrote the code for the improved class Coordinates and for reading and writing images because I wanted to manipulate images with methods you won’t find in Photoshop and the like. But we still need a method to look up the color in an input image. You will find it in the class ColorLookup of the next posts.

You create a ColorLookup object with

inputColor=new ColorLookup(inputImage);

where inputImage is a PImage object. With the method colorInterpolation(…) we can read its colors.

Typically, a program goes through the pixel positions of an output image. With the corresponding Coordinate object we get the image vector of the pixel. We transform this vector to distort the image. Then the Coordinate object of the input image gives us the pixel vector that tells the ColorLookup object where to find the color for the output image pixel.

But some complications arise. First, the pixel vector might lie outside the input image. We have to correct this. Else, the program crashes because of an out of bounds error. We can simply limit the range of the coordinates, which is fast but may result in stripes and flat areas in the final image. Or we could impose mirror symmetry at the borders of the input image. This extends it throughout the plane and we then have no problem with boundaries. Note that this takes more computing time and intruduces strange mirror images. Second, the pixel vector has not integer numbers and thus does not refer exactly to a pixel. We can take the closest pixel by rounding the coordinates. This is fast but could cause block-like artefacts. Smoother images result from linear or cubic interpolation. The class ColorLookup has all these methods. I will discuss this more in detail in the next post.

The sample program below show how this works. Note that the mouse moves the input image. To get a reasonable behaviour upon shifting with the mouse we should set the unitlength of the screen coordinates equal to one.

PImage inputImage;
Coordinates screenCoordinates,inputCoordinates;
ColorLookup inputColor;

void setup(){
  screenCoordinates=new Coordinates(1);

void draw(){
    if(inputCoordinates==null) {
      inputCoordinates=new Coordinates(inputImage);  //create coordinates, only once
      inputColor=new ColorLookup(inputImage);        //  create object that looks up colors
    int i,j,jWidth;
    Vector v=new Vector(0,0);
    int start=millis();
    for (j=0;j<height;j++){
      for (i=0;i<width;i++){
     //   v.mult(v).mult(0.5/width);                               // makes v the square of v

    println("time "+(millis()-start));

int lastMouseX,lastMouseY;
boolean dragging=false;

void mouseReleased(){

void mouseDragged(){
  if(!dragging){                         // this eliminates sudden jumps at the start of dragging
  else {
    if(mouseButton==LEFT) inputCoordinates.shiftInputOrigin(new Vector(mouseX-lastMouseX,-(mouseY-lastMouseY)));
    if(mouseButton==RIGHT) inputCoordinates.addAngle(atan2((mouseY-height/2),mouseX-width/2)-atan2((lastMouseY-height/2),lastMouseX-width/2));

void mouseWheel(MouseEvent event){
  float factor=1.1;
  if (event.getAmount()>0) inputCoordinates.multiplyScale(factor);
  else inputCoordinates.multiplyScale(1/factor);

And this is a typical result:


This entry was posted in Extra, programming and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s