title: How to render points on a 2D horizontal (Oxy) plane into points on a 2D vertical (phone) plane?
body: <p>I'm trying to convert (longitude/latitude) locations to rectangles on a phone screen. But for now let's pretend they're normal points on Oxy plane.</p>
  <p>Assume the camera is standing at point <code>(X,Y)</code>, corresponing to the center of the phone screen. It's pointing in direction <code>(vx,vy)</code>, it has 60 degree cone of vision (30 degree clockwise and 30 degree counter-clockwise). The camera direction can rotate freely, so <code>vx, vy in [-1 -&gt; 1]</code>.</p>
  <p>There's a list of <code>N</code> point <code>(x[], y[])</code>, each represents a location.</p>
  <p>At each step, all points that are inside the cone of vision is selected, call them <code>(px[], py[])</code>. This step is <a href="https://stackoverflow.com/questions/1167022/2d-geometry-how-to-check-if-a-point-is-inside-an-angle#:%7E:text=The%20dot%20product%20between%20two,question%20is%20inside%20the%20cone.">simple</a>. Next, I need to draw <code>(px[], py[])</code> on the phone screen. The biggest problem is when the camera + two points are collinear. I have zero idea of how to handle this. Edit: both points must be shown on screen, so maybe adding some random offset?</p>
  <p>Given the camera position, camera looking direction, and a point <code>px[i], py[i]</code>, what's its pixel coordinate on the screen? If there's not enough information, then whatever method that can handle the collinear situation is okay.</p>
  <p>Edit:</p>
  <p><a href="https://i.stack.imgur.com/YIXXb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YIXXb.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/CSqo1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CSqo1.png" alt="enter image description here" /></a></p>
  <p>Image 1 shows an example. Given the points + camera position/direction, points 1,2,3,4 are in vision. Then, they are shown on the screen as in image 2.</p>
  <p>Possible solution for 2D (no illusion of 3D on the screen):</p>
  <ol>
  <li><p>Horizontal position: use the angle from the camera's direction to determine whether its on the left/right side of the screen. Normalize the angles using the biggest angle. The normalized angle (0-&gt;1) is used to determine how far to the left/right that point is, where <code>normAngle = 0</code> means it's at the middle of the screen, and <code>normAngle = 1</code> means it's  at the leftest/rightest pixel of the screen.</p>
  </li>
  <li><p>Vertical position: Same as above but use normalized distance from camera instead of angle from camera direction.</p>
  </li>
  </ol>
  <p>Is there a better way?</p>