hello! introduction stuff CAMERAS ARE COOL

they work well with all sorts of 2d games ^{[1]}, and people already know how to implement a basic camera

you only need two global variables, two object variables, and an understanding of subtraction

see? I just made an example with like four blocks

### thing is

that’s only positioning

sure, zooming is not harder to implement, just multiply values and scale stuff but WHAT ABOUT ROTATION?

this is where things get tricky.

real quick have a fun poll

- With positioning
- With zooming
- With rotating
- None

this poll is anonymous by the way

# just make a circle

circles are easy to make, you take your basic cos() and sin() functions with an extra variable to determine where we are drawing

and when we run we get

…okay don’t forget to offset it that is a good step

trail art aside, we already know how to draw a basic circle ^{[2]}

only thing, how do we implement it with positions??

# offsetting

if we look at a line rotating, and mark points, we can see that bigger and bigger circles can resolve this

the same can apply for the y axis too

buuut now we have a problem

we can easily determine a radius for any point ON either axis

but things get tricky if it’s NOT

sure, we can use good ol’ pythagoream theorem to get the radius, but what about knowing WHERE to place it? ^{[3]}

^{[4]}

# circles and circles

what if I told you

we use cos() and sin()

TWICE

wow so revolutionary

what’s nice about this method is that both circles rotate, accounting for the X and Y position of the dot

^{[5]}

what is this math wise though?

(cos(r) * 2 + cos(r + 90) * 4, sin(r) * 2 + sin(r + 90) * 4)

ok lets break this down

we’re defining a point here,

cos(r) and sin(r) account for the first circle, while * 2 is the dot’s X position

+ cos(r + 90) and + sin(r + 90) account for the second circle, rotating by 90 degrees so it points upwards (also * 4 for the Y position of the dot)

adding both together, we get the final position

now we have:

(r is camera rotation, x and cx are the object X and camera X positions, y and cy are the object Y and camera Y positions)

(cos(r) * (x - cx) + cos(r + 90) * (y - cy),

sin(r) * (x - cx) + sin(r + 90) * (y - cy))

# zooming!!

obviously, rotations is enough for most games, but zooming is also great as well

it’s not hard to implement actually, just multiply the x - cx and y - cy part by the camera’s zoom

(z is the camera’s zoom)

(cos(r) * ((x - cx) * z) + cos(r + 90) * (y - cy),

sin(r) * ((x - cx * z)) + sin(r + 90) * (y - cy))

everything here was taught to me by myself! if there’s any corrections you would suggest or need further explanation on something please do tell me!

regular feedback is welcome too!