2.5d in 2d canvas with camera rotation

Question

I'm trying to learn 2.5d using plain vanilla Javascript in a 2d canvas but don't know where to start

I've recently came across Winterwood which is written in PICO-8 and basically achieves what I want. I could study the available code but the variables are compressed (due to PICO-8's token limitation) and it uses a function tline that's exclusive in PICO-8.

Here's an example of what I want to achieve: Say there's 2 sprites postioned at (50, 40) and (20, 70), and a camera angled at 35deg (the camera can be rotated freely from 0 - 360 degrees). How can I find the position relative to the camera these sprites will have if I apply the camera angle to them? Note that I can't use context.rotate since the sprites are 'billboarded' meaning they always face the camera.

Thanks.

Answer 1

You need to calculate relative angle and distance from center. Use pythagorean theorem for distance. Study trigonometry and learn about triangles and angles, sine and cosine. Add camera angle to you calculated angle and place at same distance from center.