I would keep a easeX and easeY variables that you set when the mouse gets released to be the speed of the easing in the x/y direction; then in draw, translate by easeX and easeY and also scale the numbers down by some factor (e.g. easeX *= .8) - this way, the easing will slow down each frame until it goes to zero.

Hi, thanks for your answer! I tried to implement your idea but I feel like I'm running into some basic problem or I'm not understanding your explanation. Maybe I don't understand the way Programming works. Can you help me figure out why this won't work the way I have it rewritten below?

1. void setup(){
       smooth();
       size(800, 500);
       float easeX = 0;
       float easeY = 0;
   }
   
   void draw(){
       background(0, 0, 0);
       smooth();
       strokeWeight(1);
       fill(0, 255, 255);
       stroke(255, 102, 0);
      
       translate(easeX, easeY);
          
       beginShape();
       vertex(200, 200);
       vertex(250, 250);
       vertex(200, 300);
       vertex(150, 250);
       endShape();
   }
   
   void mouseDragged(){
       easeX = mouseX-pmouseX;
       easeY = mouseX-pmouseX;
   }
   
   void mouseReleased(){
       easeX *= .8;
       easeY *= .8;
   }
   

Some errors:
- easeX/Y must be global, the variables declared in setup() "die" at the end of the method.
- in mouseDragged, you made a copy/paste error.
- you must not assign the difference but use it as an increment.
- mouseReleased is called only once in the dragging operation, so easeX/Y won't change much after...

Here is your sketch improving the above points, but it doesn't do what you want... (I suppose, since I don't recall having seen an easing effect in Google Maps. That's the limit of such "description".)

1. float easeX;
2. float easeY;
3. boolean bEasing;
4. float epsilon = 0.01;
5.  
6. void setup() {
7.   size(800, 500);
8.   smooth();
9. }
10.  
11. void draw() {
12.   background(0);
13.   strokeWeight(1);
14.   fill(0, 255, 255);
15.   stroke(255, 102, 0);
16.  
17.   if (bEasing) {
18.     easeX *= 0.8;
19.     easeY *= 0.8;
20.     if (easeX < epsilon || easeY < epsilon) {
21.       bEasing = false;
22.       easeX = 0;
23.       easeY = 0;
24.     }
25.   }
26.  
27.   translate(easeX, easeY);
28.  
29.   beginShape();
30.   vertex(200, 200);
31.   vertex(250, 250);
32.   vertex(200, 300);
33.   vertex(150, 250);
34.   endShape();
35. }
36.  
37. void mouseDragged() {
38.   easeX += mouseX - pmouseX;
39.   easeY += mouseY - pmouseY;
40. }
41.  
42. void mouseReleased() {
43.   bEasing = true;
44. }

You'll want to declare easeX and easeY outside of the setup() method; because of "scoping rules", those variables effectively disappear as soon as setup() finishes running.

Actually, we quickly hit the limits of this approach. One is that you don't test if mouse is over the shape, so you can drag it while being outside of it... Another is that mouseDragged() isn't called when pmouseX == mouseX, so in a variant I tried, the shape moved even when the mouse was still.
I made (or improved, that's not my usual style of code) a similar sketch in the past, I just past it as is as I lack time right now, perhaps you can learn from it. The easing method can be changed, of course.

1. float bx;
2. float by;
3. int bs = 20;
4. boolean locked = false;
5. float bdifx = 0.0;
6. float bdify = 0.0;
7.  
8. float speedX, speedY;
9. float accelX, accelY;
10. boolean bMoving;
11.  
12. void setup()
13. {
14.   size(1200, 700);
15.   bx = width/2.0;
16.   by = height/2.0;
17.   rectMode(RADIUS);
18. }
19.  
20. void draw()
21. {
22.   background(0);
23.  
24.   // Test if the cursor is over the box
25.   if(isMouseOverBox()) {
26.     stroke(153);
27.     fill(153);
28.   } else {
29.     stroke(200);
30.     fill(200);
31.   }
32.  
33.   // Draw the box
34.   rect(bx, by, bs, bs);
35.   if (bMoving)
36.   {
37.     bx += speedX;
38.     by += speedY;
39.     if (!isBoxInArea()) {
40.       bx -= speedX; by -= speedY;
41.       if (!isBoxInArea()) {
42.         // Put back in playground
43.         bx = width/2.0;
44.         by = height/2.0;
45.       }
46.       bMoving = false;
47.       return;
48.     }
49.     float psx = speedX, psy = speedY;
50.     speedX -= accelX;
51.     speedY -= accelY;
52.     // Keep moving until one speed is inverted
53.     bMoving = sign(psx) == sign(speedX) && sign(psy) == sign(speedY);
54.   }
55. }
56.  
57. void mouseMoved() {
58. }
59.  
60. void mousePressed() {
61.   if(isMouseOverBox()) {
62.     locked = true;
63.     fill(255);
64.   } else {
65.     locked = false;
66.   }
67.   bdifx = mouseX-bx;
68.   bdify = mouseY-by;
69. }
70.  
71. void mouseDragged() {
72.   if(locked) {
73.     bx = mouseX-bdifx;
74.     by = mouseY-bdify;
75.   }
76. }
77.  
78. void mouseReleased() {
79.   locked = false;
80.   speedX = (mouseX - pmouseX) * 2;
81.   speedY = (mouseY - pmouseY) * 2;
82.   accelX = speedX / 10;
83.   accelY = speedY / 10;
84.   bMoving = true;
85. }
86.  
87. boolean isMouseOverBox() {
88.   return mouseX > bx-bs && mouseX < bx+bs &&
89.       mouseY > by-bs && mouseY < by+bs;
90. }
91.  
92. boolean isBoxInArea() {
93.   return bx > bs && by > bs && bx < width - bs && by < height - bs;
94. }
95.  
96. int sign(float v) {
97.   if (v < 0) return -1;
98.   if (v > 0) return 1;
99.   return 0;
100. }

Thanks for the help from both of you. It appears that I will have to use some other way besides translate to get the effect I'm after. It's a problem since translate resets at the beginning of the Draw() loop, and trying to ease translate in the mouseDragged() function just adds all the calls to translate and moves everything in a single shift. I was hoping to avoid defining boundaries for shapes and easing them that way because eventually I would like to shift many different complicated, curved, custom shapes together in the same movement.

I thought shifting many unique shapes together might be easily accomplished using translate. The piece of code (below) from my first post works fine for moving the map around, if you imagine the blue diamond to be the top of a building on the map, but easing the translate doesn't seem possible? Maybe I should try something different? I'd like to try to integrate this with a website eventually.

1. void mouseDragged(){
       translate(mouseX-pmouseX, mouseY-pmouseY)
   }

Is there another way to do it? Maybe draw shapes on a large square the size of the map and ease the square around instead of trying to ease translate? Or perhaps load vector shapes? Maybe I should break the map into small squares and dynamically draw shapes that way and ease small squares around? Should I try something else to get at the effect I want, like using some visual javascript library? Thanks again for the help. It's great to be able to bounce ideas off of someone else.

It's definitely doable, I'd just rather have you figure it out for yourself :)

I never thought of it that way. Thanks for spelling it out for me.. I've been thinking about this for months and only posted here because I was out of ideas.

1. float ballX, ballY, velX, velY = 0;
   
   void setup(){
       smooth();
       size(800, 500);
   }
   
   void draw(){
       background(0, 0, 0);
       smooth();
       strokeWeight(1);
       fill(0, 255, 255);
       stroke(255, 102, 0);
      
       translate(ballX, ballY);
      
       beginShape();
       vertex(200, 200);
       vertex(250, 250);
       vertex(200, 300);
       vertex(150, 250);
       endShape();
      
       ballX += velX; //move ball in X direction
       ballY += velY; //move ball in Y
       velX *= .8f;
       velY *= .8f; //apply friction
   }
   
   void mouseDragged() {
       ballX += mouseX - pmouseX; //drag ball in the X direction
       ballY += mouseY - pmouseY; //drag ball in the Y direction
   }
   
   void mouseReleased() {
       velX = mouseX - pmouseX;
       velY = mouseY - pmouseY;
   }
   

Hey I'm a noob and this got me thinking...

What if you want the shape to then return "home" to its previous place when it does not meet other functions of code, what would the else "return home" look like (assuming you might have multiple shapes or a number of classes)?

Any insight would be most appreciated.
(c=

Thanks for the quick response.
a>I was thinking boolean to return to its starting point... b>kind of like in a game of solitaire when you try to place a card on the wrong pile.

>>>>"do you mean methods that return a boolean for whether the ball should go to "its previous place"?" "
yes thats exactly what I mean.  (c=

Yes it does, but first i'm trying to get a handle on making a class out of the ball...  I hope the return home boolean will be easier after that.

1. ball f;
2. void setup() {
3.   smooth();
4.   size(800, 500);
5.   f = new ball(50, 50, 60, 25);//location and size
6. }
7. void draw() {
8.   background(0, 0, 0);
9.   smooth();
10.   strokeWeight(1);
11.   fill(0, 255, 255);
12.   stroke(255, 102, 0);
13.   f.rollover(mouseX, mouseY);
14.   f.drag(mouseX, mouseY);
15.   f.display();
16. }
17. void mousePressed() {
18.   f.clicked(mouseX, mouseY);
19. }
20. void mouseReleased() {
21.   f.stopDragging();
22.   f.ease();
23. }

///////////////////////////////////////

1. class ball {
2.   boolean dragging = false; // Is the ball being dragged?
3.   boolean rollover = false; // Is the mouse over the ball?
4.   float BX, BY, BW, BH, velX, velY =0;
5.   float offsetX, offsetY;// mouseclick offset
6.   ball (float BALLX, float BALLY, float BALLW, float BALLH) {
7.     BX = BALLX;
8.     BY = BALLY;
9.     BW = BALLW;
10.     BH = BALLH;
11.     offsetX = 0;
12.     offsetY = 0;
13.   }
14.   void display () {
15.     stroke(255, 102, 0);
16.     if (dragging) fill (50);
17.     else if (rollover) fill (100);
18.     else fill (175, 200);
19.     rect(BX, BY, BW, BH);
20.   }
21.   // Is a point inside the rect (for click)?
22.   void clicked(int mx, int my) {
23.     if (mx > BX && mx < BX + BW && my > BY && my < BY + BH) {
24.       dragging = true;
25.       // If so, keep track of relative location of click to corner of rect
26.       offsetX = BX-mx;
27.       offsetY = BY-my;
28.     }
29.   }
30.   // Is a point inside the rect (for rollover)
31.   void rollover (int mx, int my) {
32.     if (mx > BX && mx < BX + BW && my > BY && my < BY + BH) {
33.       rollover = true;
34.     }
35.     else {
36.       rollover = false;
37.     }
38.   }
39.   // Drag the rect
40.   void drag(int mx, int my) {
41.     if (dragging) {
42.       BX = mx + offsetX;
43.       BY = my + offsetY;
44.       BX += velX; //move ball in X direction
45.       BY += velY; //move ball in Y
46.       velX *= .8f;
47.       velY *= .8f; //apply friction
48.     }
49.   }
50.   void ease() {
51.     velX = BX- pmouseX;
52.     velY = BY- pmouseY;
53.   }
54.   void stopDragging () {
55.     dragging = false;
56.   }
57. }

I'm trying to make the ball into a class so that I can do more with main.  Ball that drags to combine with other balls else returns home, highlights rollover, etc..

Sounds like you're confused. This is good! It's a necessary step to learning how to code. Another necessary step is to learn how to debug it yourself :)