I'm really new to processing (and fairly new to coding, too!) and I'm trying to make a small prototype.

What I have is a big image (say, 4 time my viewport) and I need to drag it around in a smooth way. I have two behaviors I want:

1) if I drag, I move the map in the direction I'm dragging (like in PS or Illustrator when you drag around your artboard.

2) if I click on the viewport the map should center the point I've clicked in a smooth way.

Here is my code for now:

1. PImage mapSfondo;
2. float x=0;
3. float y=0;
4. float easing = 0.05;
5. void setup()
6. {
7.   size (320, 240);
8.   smooth();
9.   imageMode(CENTER);
10.   mapSfondo = loadImage("map.png");
11. }
12. 
    
13. void draw ()
14. {
15.     image (mapSfondo, x,y);
16. }
17. 
    
18. void mouseDragged ()
19. {
20.     x += (mouseX - x) * easing;
21.     y += (mouseY-y)*easing;
22. }

Now, dragging is almost good, but if I start to drag slowly I get a very strange behavior, where the map seems to be moving in the opposite direction for a while and then catch up in the right way.

Plus, I'm still not sure how to do the second behavior. Can someone help me? Thanks!