Wsrtjtyk

I'm trying to learn some more about Vectors in a 2D space and how to use them in Gamedevelopment.

I have created a small project for visualising a 'projection' of Vector A onto Vector B in C# using the Monogame framework.

This is all working fine, but now I want to move my origin (which is currently in the top-left) to a custom position. So i can for example draw my lines in the middle of the screen.

I want to do this without any help from the library first to understand what is happening.

But I cant figure out how to do this and if this is actually best practice in Vector spaces or that I should just 'draw' my lines with an offset..

My understanding of Math symbols and functions is not great, so if you provide me with a mathematically answers please explain the symbols aswell.

EDIT:

I created another project for visualising if a point is within a certain angle, but this time i tried to draw everything with an offset (right) next to the original vectors (left).

As you can see it looks fine if i draw it with an offset, but i can't imagine this method being used in Games.. Mainly because everything has a weird offset (duh..) with respect to my mouse, so you would need to implement your own cursor (which games do, but still...)

EDIT2:

Let's make my problem a little bit clearer..
If you look at my second example. Imagine the origin on the right to be an Agent (NPC or Player or whatever) and the segment BC (and BC2) to be it's vision field.
If i want to calculate what is within it's vision, i can do that the same way how i did the example but this 'origin' point would be at (0,0) (top-left) and that is behind the Agent.

I'm probably missing something obvious and thinking way too hard about this..

So i finally found out how this works..

Appearently you work with different spaces or frames instead of moving the origin (also called reference).

A space can live inside another space, but let's keep it simple for now with 2 spaces.

First space is your 'main' space (most of the time called world in Gamedevelopment)

Second space is your 'view' space (or camera)

(i use world and view throughout this answer)

I was doing all my Vector calculations inside my world space. So when drawing these vectors to the screen, they are drawn at the positions with respect to the world's reference (which is the top-left of the screen).

To draw my vectors somewhere else i need to translate them.

Translation is moving vectors along the axis.

This action of 'changing' the position/scale/rotation of a vector is called Transformation.

We can see transformations in a vector space simply as a change from one space to another.
quote

This translation is done by a Translation Matrix (more info in the quote link).

So with the knowledge of these spaces and transformation i fixed my program.

All my vectors are initialized the same way as before, but when i draw my vectors to the screen i translate them according to a pre-defined translation matrix. I call this matrix my viewMatrix because it translates vectors from the world space to the view space.

But there is one thing that needs fixing.

The vector pointA is not defined in the world space, but in the view space.
So that means that when my mouse is on position (20,20), that this position is different from the position (20,20) in my world sapce.

To fix this i need to translate my pointA vector with the invert of the translation matrix. This will convert the vector into a vector inside the world space.

So that's about it..
It took me 2 days to figure this out..

Here is a fixed version of the second example.

Left: my world space

Right: my view space

Notice how my mouse is now properly aligned in my view space instead of in my world space

Here are some resources i collected along the way:
Article - World, View and Projection Transformation Matrices
The True Power of the Matrix (Transformations in Graphics) - Computerphile
RB Whitaker - Basic Matrices
Making a Game Engine: Transformations