In other words, it sounds with the left corner as origin, i want the mouse to be the origin of zoom.
Please help so i can continue on the rest.

can you explain this map function. also if you can add some comments to your code. Then I might be able to help you.

I recreated the problem with a image since that's easier to understand and debug.
I think i can fix the problem with the code above now aswell.

1. PImage img;
   
   float zoomLevel = 1;
   
   void setup() {
     img = loadImage("test.png");
   
     size(img.width, img.height);
   }
   
   
   void draw() {
   
     if(keyPressed) {
       if (key == '-' || key == '_') {
         if (zoomLevel > 1) {
           zoomLevel -= 0.04;
           println(zoomLevel);
         }
       }
       else if (key == '+' || key == '=') {
         zoomLevel += 0.04;
         println(zoomLevel);
       }
     }
   
     background(255);
    
     // new width and height
     float imgWidth = img.width*zoomLevel;
     float imgHeight = img.height*zoomLevel;
    
     // how much can't be shown?
     float cutOffWidth = imgWidth-width;
     float cutOffHeight = imgHeight-height;
    
     float xOffset = map(mouseX, 0, width, 0, -cutOffWidth);
     float yOffset = map(mouseY, 0, height, 0, -cutOffHeight);
   
     image(img, xOffset, yOffset, imgWidth, imgHeight);
   }
   
   

I'd be very interested in including such a feature in PeasyCam if you get it figured out by moving the camera, not by moving the image.

I still can't get it to work.

no one?

You could create an image and then use the method above.

1. ArrayList<City> citys = new ArrayList<City>();
2. PImage img;
3. float zoomLevel = 1;
4. float minX = MAX_FLOAT;
5. float maxX = MIN_FLOAT;
6. float minY = MAX_FLOAT;
7. float maxY = MIN_FLOAT;
8. int plotX1, plotY1, plotX2, plotY2;
9. int plotWidth, plotHeight;
10. void setup() {
11.   size(600, 600);
12.   smooth();
13.   plotX1 = 50;
14.   plotX2 = width-50;
15.   plotY1 = 50;
16.   plotY2 = height-plotY1;
17.   plotWidth = plotX2-plotX1;
18.   plotHeight = plotY2-plotY1;
19.   citys.add(new City(53.87472, -119.1225));
20.   citys.add(new City(55.45, -119.9));
21.   citys.add(new City(55.209446, -119.42917));
22.   citys.add(new City(53.543564, -113.490456));
23.   citys.add(new City(49.261227, -123.11393));
24.   citys.add(new City(49.88795, -119.49601));
25.   citys.add(new City(38.581573, -121.4944));
26.   citys.add(new City(38.617126, -121.328285));
27.   citys.add(new City(34.278587, -118.50211));
28.   for (City c : citys) {
29.     if (c.lat > maxY) maxY = c.lat;
30.     if (c.lat < minY) minY = c.lat;
31.     if (c.lon > maxX) maxX = c.lon;
32.     if (c.lon < minX) minX = c.lon;
33.   }
34.   img = createImage(600, 600, RGB);
35.   img.loadPixels();
36.   background(255);
37.   setCityXY();
38.   noStroke();
39.   for (City c : citys) {
40.     if (c.lat == -1) continue;
41.     fill(c.mouseOver() ? color(255, 0, 0) : color(0));
42.     ellipse(c.x, c.y, 4, 4);
43.   }
44.   loadPixels();
45.   img.pixels = pixels;
46.   img.updatePixels();
47. }
48. // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
49. void draw() {
50.   if(keyPressed) {
51.     if (key == '-' || key == '_') {
52.       if (zoomLevel > 1) {
53.         zoomLevel -= 0.04;
54.         println(zoomLevel);
55.       }
56.     }
57.     else if (key == '+' || key == '=') {
58.       zoomLevel += 0.04;
59.       println(zoomLevel);
60.     }
61.   }
62.   background(255);
63.  
64.   // new width and height
65.   float imgWidth = img.width*zoomLevel;
66.   float imgHeight = img.height*zoomLevel;
67.  
68.   // how much can't be shown?
69.   float cutOffWidth = imgWidth-width;
70.   float cutOffHeight = imgHeight-height;
71.  
72.   float xOffset = map(mouseX, 0, width, 0, -cutOffWidth);
73.   float yOffset = map(mouseY, 0, height, 0, -cutOffHeight);
74.   image(img, xOffset, yOffset, imgWidth, imgHeight);
75. }
76. void setCityXY() {
77.   for (City c : citys) {
78.     if (c.lat == -1) continue;
79.     // new width and height
80.     float newWidth = plotWidth*zoomLevel;
81.     float newHeight = plotHeight*zoomLevel;
82.     // how much can't be shown?
83.     float cutOffWidth = newWidth-plotWidth;
84.     float cutOffHeight = newHeight-plotHeight;
85.     //
86.     float xOffset = map(mouseX, 0, width, 0, -cutOffWidth);
87.     float yOffset = map(mouseY, 0, height, 0, -cutOffHeight);
88.     float x = map(c.lon, minX, maxX, plotX1, plotX2);
89.     float y = map(c.lat, maxY, minY, plotY1, plotY2);
90.     x -= xOffset;
91.     y -= yOffset;
92.     c.x = x;
93.     c.y = y;
94.   }
95. }
96. // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
97. class City {
98.   float lat;
99.   float lon;
100.   float x;
101.   float y;
102.   City(float lat, float lon) {
103.     this.lat = lat;
104.     this.lon = lon;
105.   }
106.   public boolean mouseOver() {
107.     if (dist(mouseX, mouseY, x, y) < 10 ) return true;
108.     return false;
109.   }
110. }
111. // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

that's like a bad work around :(

Hi,

You might find some of code in here useful, particularly scaleAroundPoint and the mouseWheelMoved callback...

1. import java.awt.event.MouseWheelListener;
2. import java.awt.event.MouseWheelEvent;
3. ArrayList<City> cities;
4. WheelListener wheel;
5. float zoom = 1;
6. PVector scaleCentre;
7. void setup() {
8.   size(500, 500);
9.   wheel = new WheelListener();
10.   cities = new ArrayList<City>();
11.   for (int i = 0; i < 10; i++) {
12.     cities.add(new City(random(-250, 250), random(-250, 250), random(10, 30)));
13.   }
14.   scaleCentre = new PVector(width / 2, height / 2);
15. }
16. void draw() {
17.   background(0);
18.   translate(scaleCentre.x, scaleCentre.y);
19.   for (City c: cities) {
20.     c.draw();
21.   }
22. }
23. void mouseDragged() {
24.   float dx = mouseX - pmouseX;
25.   float dy = mouseY - pmouseY;
26.   scaleCentre.x += dx;
27.   scaleCentre.y += dy;
28. }
29. void mouseClicked() {
30.   float worldx = (mouseX - scaleCentre.x) / zoom;
31.   float worldy = (mouseY - scaleCentre.y) / zoom;
32.   println(worldx + ", " + worldy);
33.   for (City c: cities) {
34.     if (c.hitTest(worldx, worldy)) {
35.       c._highlight = true;
36.     } else {
37.       c._highlight = false;
38.     }
39.   }
40. }
41. void scaleAroundPoint(City c, float statx, float staty, float scl) {
42.   PVector transform = new PVector((statx - c._viewx) * scl, (staty - c._viewy) * scl);
43.   c._viewx = statx - transform.x;
44.   c._viewy = staty - transform.y;
45.   c._viewsz *= scl;
46. }
47. class City {
48.   float _x, _y, _sz;
49.   float _viewx, _viewy, _viewsz;
50.   boolean _highlight;
51.  
52.   City(float x, float y, float sz) {
53.     _x = x;
54.     _y = y;
55.     _viewx = x;
56.     _viewy = y;
57.     _viewsz = sz;
58.     _sz = sz;
59.   }
60.  
61.   boolean hitTest(float testx, float testy) {
62.     if ((testx > (_x - (_sz / 2))) && (testx < (_x + (_sz / 2))) && (testy > (_y - (_sz / 2))) && (testy < (_y + (_sz / 2)))) {
63.       return true;
64.     } else {
65.       return false;
66.     }
67.   }
68.  
69.   void draw() {
70.     if (_highlight) {
71.       fill(255, 0, 0);
72.     } else {
73.       fill(255);
74.     }
75.     rectMode(CENTER);
76.     rect(_viewx, _viewy, _viewsz, _viewsz);
77.   }
78. }
79. class WheelListener implements MouseWheelListener {
80.   WheelListener() {
81.     addMouseWheelListener(this);
82.   }
83.  
84.   void mouseWheelMoved(MouseWheelEvent e) {
85.     float scl;
86.     int rot;
87.    
88.     float worldx = (mouseX - (width / 2)) / zoom;
89.     float worldy = (mouseY - (height / 2)) / zoom;
90.    
91.     rot = e.getWheelRotation() ;
92.     if (rot > 0) {
93.       scl = 0.95;
94.     } else {
95.       scl = 1.05;
96.     }
97.    
98.     zoom *= scl;
99.    
100.     for (City c: cities) {
101.       scaleAroundPoint(c, mouseX - scaleCentre.x, mouseY - scaleCentre.y, scl);
102.     }
103.   }
104. }

The code shown below has the following features

• Left//rght click mouse to zoom in/out at the current mouse position
• Click and drag the mouse to pan left/right/up/down
• City colour changes to red when cursor is over it.

It is very common task to display the same data but in different ways. In this case we have city location data that we want to display on a 'map' which we can zoom/pan/select a city.

My solution takes a different approach to the code you posted so some explanation might be useful.

Get a map and pin it against the wall and then look at the centre of the map from about 60cm. You will see the details immediately in front of you but the edges will not be visible. Now move your head from side to side and you will see different parts of the map but at the same scale. To zoom out simply move your head away from the map, you can see more of the map but less detail i.e. at a lower scale. Moving your head towards the map means you see a smaller area but more detail i.e. higher scale.

So we have achieved panning and zooming with our map WITHOUT touching the map. We did it by transforming our view NOT by transforming the map data.

In your original code your City class had x,y attributes to hold the current screen position to display the City, these are calculated in the setCoityXY method depending on current zoom. This is equivalent to transforming the map data.

The code below has a new class called WorldViewData which is used to hold the data and provide suitable methods to transform world to/from display coordinates i.e. transforming the view.

In the draw method lines 48/49 setup the transofrmation required to draw the city locations using world coordinates. In the calss City draw method the only transformation is the translation to the lon/lat (real world) position of the city.

HTH

1. ArrayList<City> citys = new ArrayList<City>();
2. float minX = MAX_FLOAT;
3. float maxX = MIN_FLOAT;
4. float minY = MAX_FLOAT;
5. float maxY = MIN_FLOAT;
6. 
   
7. WorldViewData wvd = new WorldViewData();
8. float vpW, vpH; // display location
9. City mouseIsOver = null;
10. 
    
11. void setup() {
12.   size(600, 600);
13.   cursor(CROSS);
14.   // Define display size from top left corner
15.   vpW = 400;
16.   vpH = 250;
17. 
    
18.   citys.add(new City(53.87472, -119.1225));
19.   citys.add(new City(55.45, -119.9));
20.   citys.add(new City(55.209446, -119.42917));
21.   citys.add(new City(53.543564, -113.490456));
22.   citys.add(new City(49.261227, -123.11393));
23.   citys.add(new City(49.88795, -119.49601));
24.   citys.add(new City(38.581573, -121.4944));
25.   citys.add(new City(38.617126, -121.328285));
26.   citys.add(new City(34.278587, -118.50211));
27. 
    
28.   for (City c : citys) {
29.     if (c.lat > maxY) maxY = c.lat;
30.     if (c.lat < minY) minY = c.lat;
31.     if (c.lon > maxX) maxX = c.lon;
32.     if (c.lon < minX) minX = c.lon;
33.   }
34. 
    
35.   float zoomX = vpW / (maxX - minX);
36.   float zoomY = vpH / (maxY - minY);
37.   // Start with display big enough to see all cities.
38.   wvd.setXY(minX, minY);
39.   wvd.viewRatio = min(zoomX, zoomY);
40. }
41. 
    
42. // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
43. 
    
44. void draw() {
45.   background(255);
46.   // Draw the cities
47.   pushMatrix();
48.   translate(-wvd.orgX * wvd.viewRatio, -wvd.orgY * wvd.viewRatio);
49.   scale(wvd.viewRatio);
50.   for (City c : citys)
51.     c.draw();
52.   popMatrix();
53.   // Cities drawn make the area outside the city
54.   // display area blue. The blue area have anything
55.   // you like e.g. controls etc.
56.   pushStyle();
57.   noStroke();
58.   fill(0, 0, 192);
59.   rect(vpW, 0, width - vpW, height);
60.   rect(0, vpH, width, height - vpH);
61.   popStyle();
62. }
63. 
    
64. // See if we are over a city
65. void mouseMoved() {
66.   float wmX = wvd.pixel2worldX(mouseX);
67.   float wmY = wvd.pixel2worldY(mouseY);
68.   mouseIsOver = null;
69.   for (City c : citys) {
70.     if (dist(wmX, wmY, c.lon, c.lat) < 3.0 / wvd.viewRatio) {
71.       mouseIsOver = c;
72.     }
73.   }
74. }
75. 
    
76. // Change zoom level
77. void mouseClicked() {
78.   if (mouseX < vpW && mouseY < vpH) {
79.     if (mouseButton == LEFT || mouseButton == RIGHT) {
80.       // Calculate current mouse position position
81.       float wmX = wvd.pixel2worldX(mouseX);
82.       float wmY = wvd.pixel2worldY(mouseY);
83.       float sf = (mouseButton == LEFT) ? 1.1 : 0.9;
84.       wvd.viewRatio *= sf;
85.       wvd.viewRatio = constrain(wvd.viewRatio, 0.05, 200.0);
86.       wvd.orgX = wmX - mouseX / wvd.viewRatio;
87.       wvd.orgY = wmY - mouseY / wvd.viewRatio;
88.     }
89.   }
90. }
91. 
    
92. // Panning
93. void mouseDragged() {
94.   if (mouseX < vpW && mouseY < vpH) {
95.     wvd.orgX -= (mouseX - pmouseX) / wvd.viewRatio;
96.     wvd.orgY -= (mouseY - pmouseY) / wvd.viewRatio;
97.   }
98. }
99. 
    
100. // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
101. 
     
102. class City {
103.   float lat;
104.   float lon;
105. 
     
106.   City(float lat, float lon) {
107.     this.lat = lat;
108.     this.lon = lon;
109.   }
110. 
     
111.   void draw() {
112.     pushMatrix();
113.     translate(lon, lat);
114.     imageMode(CENTER);
115.     stroke(0);
116.     strokeWeight(0.1);
117.     if (mouseIsOver == this)
118.       fill(255, 128, 128);
119.     else
120.       fill(128, 255, 128);
121.     ellipse(0, 0, 1.0, 1.0);
122.     popMatrix();
123.   }
124. }
125. 
     
126. // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
127. 
     
128. class WorldViewData {
129.   // Made public to speed up get access
130.   public float orgX = 0.0f;
131.   public float orgY = 0.0f;
132.   // viewRatio = number of pixels that represents a distance
133.   // of 1.0 in real world coordinates - bigger the value the
134.   // greater the magnification
135.   public float viewRatio = 1.0f;
136. 
     
137.   public WorldViewData() {
138.     orgX = 0.0f;
139.     orgY = 0.0f;
140.     viewRatio = 1.0f;
141.   }
142. 
     
143.   /**
144.    * Resize the world due to changes in magnification
145.    * so that the image is centred on the screen
146.    * @param f    new viewRatio
147.    * @param pw    width of view area in pixels
148.    * @param ph    height of view area in pixels
149.    */
150.   public void resizeWorld(float zf, int pw, int ph) {
151.     float newX, newY;
152.     float w = pw;
153.     float h = ph;
154.     // Calculate new origin so as to centre the image
155.     newX = orgX + w/(2.0f*viewRatio) - w/(2.0f*zf);
156.     newY = orgY + h/(2.0f*viewRatio) - h/(2.0f*zf);
157.     orgX = newX;
158.     orgY = newY;
159.     viewRatio = zf;
160.   }
161. 
     
162.   // Calculate the world X position corresponding to
163.   // pixel position
164.   public float pixel2worldX(float px) {
165.     return orgX + px / viewRatio;
166.   }
167. 
     
168.   // Calculate the world Y position corresponding to
169.   // pixel position
170.   public float pixel2worldY(float py) {
171.     return orgY + py / viewRatio;
172.   }
173. 
     
174.   // Calculate the display X position corresponding to
175.   // world position
176.   public float world2pixelX(float wx) {
177.     return viewRatio / (wx - orgX);
178.   }
179. 
     
180.   // Calculate the display Y position corresponding to
181.   // world position
182.   public float world2pixelY(float wy) {
183.     return viewRatio / (wy - orgY);
184.   }
185. 
     
186.   /**
187.    * Set origin of top left to x, y
188.    * @param x
189.    * @param y
190.    * @return true if the origin has changed else return false
191.    */
192.   public boolean setXY(float x, float y) {
193.     if (orgX != x || orgY != y) {
194.       orgX = x;
195.       orgY = y;
196.       return true;
197.     }
198.     else
199.       return false;
200.   }
201. }

cool thanks,

 // Made public to speed up get access

why is that faster?

by default the world is upside down for some reason.

What would be the correct place in your code to flip that?

1.   City(float lat, float lon) {
2.     this.lat = -lat;
3.     this.lon = lon;
4.   }

Also i implemented it in my eclipse sketch and this method is way slower to the not correct zoom i had before.

Now i get around 7fps and before 22fps :(

by default the world is upside down for some reason.

What would be the correct place in your code to flip that?

1.   City(float lat, float lon) {
2.     this.lat = -lat;
3.     this.lon = lon;
4.   }

Also i implemented it in my eclipse sketch and this method is way slower to the not correct zoom i had before.

Now i get around 7fps and before 22fps :(