1

I am trying to display a map of a city using lat/long coordinates from a .csv file. These values have to be converted into x and y values in order to be displayed on the screen using Processing. My teacher gave me this code that does just this however for my coordinates the outputted map is rotated 90 degrees. 

// 1. normalize the value between the minimum and maximum latitude or longitude values (new value between 0 and 1)
// 2. blow up the value between 0 and 1 by muliplying by the width or height of the screen (reduced by the margin 2 * 20 pixel)
// 3. shift the position by 20 pixel for the margin
float xPosition = 20 + (width-40) * norm(l.longitude, minLongCoord, maxLongCoord);
float yPosition = 20 + (height-40) * norm(l.latitude, minLatCoord, maxLatCoord);

Does anyone know how to rotate the x and y positions 90 degrees and in turn the outputted map from coordinates?

EDIT: The problem with translate is that if i have a mouse clicked function see what shape the mouse is over, the click and what shape the mouse is over are not aligned.

OptOut
  • 85
  • 6

1 Answers1

0

You could just call the rotate() function. From the reference:

translate(width/2, height/2);
rotate(PI/3.0);
rect(-26, -26, 52, 52);

rotated square

Note that you also have to call the translate() function to set the point to be rotated around, then draw relative to that point.

If you don't want to use the rotate() function, then you're first going to have to figure out what point to rotate around, and then rotate around that point. Googling "rotate a point around another point" returns a bunch of results, including this Stack Overflow post: Rotating a point about another point (2D)

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
  • I have tried that but the problem is that the map consists of a bunch of smaller shapes. I'm using beginShape(). This means that each individual shape gets rotated and not the whole map – OptOut Sep 25 '16 at 16:24
  • @OptOut You can just rotate each shape around its center. Or you can use the second approach I mentioned. You can also call the [`PShape#rotate()`](https://processing.org/reference/PShape_rotate_.html) function. – Kevin Workman Sep 25 '16 at 16:26
  • @OptOut beginShape() just mean that all transformation after this instruction will be reset at endShape(), so you can put the rotation just before. – Alex Sep 25 '16 at 20:28
  • The problem is that i need to detect whether the mouse is over the shape and as such when i rotate it the click doesn't align with the right shape. I was hoping that there was a way to change the conversion to rotate it by 90 degrees. – OptOut Sep 26 '16 at 12:00
  • @OptOut And what's stopping you from doing that? You can also rotate the `mouseX` and `mouseY` variable either using one of the conversion functions in the reference, or the formula I linked you to. – Kevin Workman Sep 26 '16 at 12:22
  • @kevinworkman thank you so much. I used the C++ code and converted it into processing. Worked like a charm. – OptOut Sep 26 '16 at 13:26