improving the class Coordinates

I want to shift and rotate images moving the mouse around and to change the scale of images with the mouse wheel, similarly as in good old google earth. Thus I have written the new improved class Coordinates, which you can find in the next post. Note that it requires the improved class Vector.

There are two ways to create a Coordinates object. With

someCoordinates=new Coordinates(mag);

you create coordinates for an image or graphics related to the screen image. Similarly as for the classOutputBuffer each screen pixel corresponds to “mag”-times as much pixels in “someCoordinates”. To create coordinates for the screen we put mag=1 and thus write

screenCoordinates=new Coordinates(1);

If you have already have a PImage object you create fitting coordinates with

pictureCoordinates=new Coordinates(picture);

where “picture” is the PImage object.

You can set the scale with the “setUnitLength(…)” method. For interactively changing the scale, picture angle and place we have the “multiplyScale(…)”, “addAngle(…)”, “shiftOutputOrigin(…)” and “shiftInputOrigin(…)” methods. Their use is shown in the sample program below.

Coordinate objects can create fitting PImage and PGraphics objects with the “createPImage()” and “createPGraphics” methods. Before drawing we have to use the “beginGraphics(…)” methods to set up the coordinate transformations. To set the stroke width independently of the scale we need to use the “trueStrokeWeight(…)” methods.

To work with pixels instead of drawing we need the “getVector(…)” and “getPixel(…)” methods. They get the pixel indices from image coordinates and inversely. Again, the inversion of the y-axis is accounted for as well as translations, rotations and scale changes of the coordinate system. I have worked hard to get all this together in a consistent way. If you still find errors, let me know.

Note added the 23rd january 2014: I needed a method to copy the transformations from one Coordinate object to another. Thus I wrote “void copyTransformations(…)”. Typically we would have to use


to be able to get the same image in a higher resolution output file as on the computer screen.

This sample program below shows some possibilities. Dragging around with the left mouse button depressed you move the image, with the right button you rotate it and rotating the wheel zooms in or out.

PImage thisImage;
PGraphics graphics;
Coordinates screenCoordinates;

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

void draw(){
  line(-100, 0, 100, 0);
  line(0, -100, 0, 100);

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) screenCoordinates.shiftOutputOrigin(new Vector(mouseX-lastMouseX,-(mouseY-lastMouseY)));
    if(mouseButton==RIGHT) screenCoordinates.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) screenCoordinates.multiplyScale(factor);
  else screenCoordinates.multiplyScale(1/factor);
This entry was posted in programming and tagged , . Bookmark the permalink.

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s