The wonderful world of Vectors

Chat about anything not covered in these forums, but keep it civil!

Post » Thu Jul 08, 2010 8:32 am

Construct doesn't have any implimentation of Vectors...yet.... but anyways I thought I might write a quick article about them and how they can be useful for doing maths.

Basically, a vector is like a position on your screen. It has an x component, and a y component. Similarily, it also usually has the ability to retrieve additional information, such as the length of the vector, and the angle of the vector. A vector can be graphically represented as an arrow like this:



So...lets look at an example where vector maths could be useful..

Suppose we are making a sling shot....



Lets think of some rules. Firstly...at rest, the player is in the middle.



Secondly, we limit how far the user can drag the player by a radius. Lets call it 'drag_radius'



So at this point...how would we do it using X and Y values?

We would probably declare some variable:

[code:32j3851s]
middleX = 100
middleY = 50

dragRadius = 50

playerX = mouseX
playerY = mouseY

if distance between playerX, playerY, middleX, middeY is greater than dragRadius
angle = angle(middleX, middleY)
playerX = middleX + cos(angle) * dragRadius
playerY = middleY + sin(angle) * dragRadius
[/code:32j3851s]

So already, the code is getting a bit messy. You have sin and cos, and angle and distance formulars around the place.

Now, lets have a look at how we would do it using vectors.

[code:32j3851s]
middleXY = {100,50}
dragRadius = 50
offsetXY = mouseXY - middleXY

if differenceXY.length is greater than dragRadius
differenceXY.length = dragRadius

playerXY = offsetXY + middleXY
[/code:32j3851s]

Okay, so we've done things a bit differently with the vectors. OffsetXY is a vector representing the offset of the player from the middle. If the length of offset is larger than dragRadius, we force the length to change to dragRadius



So in this picture, the black arrow represents what offsetXY is, and the blue one represents what it becomes when we change its length to drag radius

Okay now lets get a bit more complicated.

Suppose we want to make it so the angle that the player fires towards is inbetween the two elastic bands...how would we go about doing that?



Well, we need to declare some more variables, such as the position of the left and right pins that hold the elastic band.

[code:32j3851s]
leftPinX = 0
leftPinY = 50
rightPinX = 200
rightPinY = 50
middleX = 100
middleY = 50

playerX = ...
playerY = ...

playerToLeftPinAngle = angle(playerX, playerY, leftPinX, leftPinY)
playerToRightPinAngle = angle(playerX, playerY, rightPinX, rightPinY)

-- The only way to find the average between two angles to to convert them into component form, add them together, then find the angle

playerToLeftPinX = cos(playerToLeftPinAngle)
playerToLeftPinY = sin(playerToLeftPinAngle)

playerToRightPinX = cos(playerToRightPinAngle)
playerToRightPinY = sin(playerToRightPinAngle)

playerShootAngle = angle(0,0, playerToLeftPinX + playerToRightPinX, playerToLeftPinY + playerToRightPinY)
[/code:32j3851s]

Now lets have a look at how this could be done using vectors

[code:32j3851s]
leftPinXY = {0, 50}
middleXY = {100,50}
rightPinXY = {200, 50}
playerXY = {..., ...}

playerToLeftPin = leftPinXY - playerXY
playerToRightPin = rightPinXY - playerXY

playerToLeftPin.length = 1
playerToRightPin.length = 1

playerShoot = playerToLeftPin + playerToRightPin
playerShootAngle = playerShoot.angle
[/code:32j3851s]

So basically...in terms of vectors...we have something like this picture:


So playerToLeftPin and playerToRightPin are the black vectors, and the one we want to find is the red one.

By adding them together we can find the red one:


So yeah, thats pretty much what vectors can do. I personally love vectors because they are easy to visualise as arrows so its kind of a more 'arty' approach to thinking of positions and speeds etc.
B
4
S
2
G
5
Posts: 641
Reputation: 3,011

Post » Thu Jul 08, 2010 9:58 am

Some expressions might be nice for this.
Im thinkin v(x1,y1,x2,y2,a,l)?
Edit:
Oh wait you'd need a third x,y right?
Image Image
B
161
S
48
G
90
Posts: 7,348
Reputation: 66,751

Post » Thu Jul 08, 2010 3:52 pm

Well you can use arrays in construct as {1,2} etc.

So perhaps you have a private variable in your sprite called 'speed' and u set it to {1,2}... but then you want to set the length of that variable...

All I can think of is something like:

Set value 'speed' to vector.setLength('speed',10)

.. so like...have:

vector.setX
vector.setY
vector.setLength
vector.setAngle

and

vector.x
vector.y
vector.length
vector.angle

and then some operational functions

vector.add( v1, v2)
vector.multiply(v1, v2)
vector.subtract(v1, v2)
vector.divide(v1, v2)
vector.dot(v1, v2)
vector.lerp(v1, v2, r)
vector.distance(v1, v2)

and some creational functions
vector.left()
vector.right()
vector.up()
vector.down()
vector.one()
vector.zero()

and overloading the default expression i could make:

vector(1,2)

create the actual vector

Shall I quickly program this and see how it goes?
B
4
S
2
G
5
Posts: 641
Reputation: 3,011

Post » Thu Jul 08, 2010 4:58 pm

Man Vector graphics in Construct would be sweet - my buddy draws his images in Illustrator for Construct, I love the vector 'look' though when we import in the images we can't scale them very well.
B
39
S
12
G
8
Posts: 580
Reputation: 7,108

Post » Thu Jul 08, 2010 6:14 pm

[quote="CrudeMik":5owsq0a0]Man Vector graphics in Construct would be sweet - my buddy draws his images in Illustrator for Construct, I love the vector 'look' though when we import in the images we can't scale them very well.[/quote:5owsq0a0]

this is vector math, not the same thing as GFX :P
B
52
S
7
G
6
Posts: 1,945
Reputation: 7,610

Post » Thu Jul 08, 2010 6:19 pm

Vectors are immensely useful, especially in planned-but-not-realized space-opera-ish game. ;)
B
62
S
21
G
12
Posts: 1,910
Reputation: 13,155

Post » Thu Jul 08, 2010 6:52 pm

[quote="QuaziGNRLnose":16rgzlqp][quote="CrudeMik":16rgzlqp]Man Vector graphics in Construct would be sweet - my buddy draws his images in Illustrator for Construct, I love the vector 'look' though when we import in the images we can't scale them very well.[/quote:16rgzlqp]

this is vector math, not the same thing as GFX :P[/quote:16rgzlqp]

Nice try tho

[quote="David":16rgzlqp]Shall I quickly program this and see how it goes?[/quote:16rgzlqp]

Something tells me you've already done it. :P

Btw what does vector.dot mean?
Image Image
B
161
S
48
G
90
Posts: 7,348
Reputation: 66,751

Post » Thu Jul 08, 2010 6:58 pm

Vector product, I guess?
B
62
S
21
G
12
Posts: 1,910
Reputation: 13,155

Post » Thu Jul 08, 2010 7:35 pm

dot product.

Oh ignore 'cross' theres no such thing for 2d vectors.

I made a plugin immediately after the post...only to realise you cant store arrays in private variables without a crash...bloody developers should fix that bug!

...


oh wait...I'm a developer...F**K
B
4
S
2
G
5
Posts: 641
Reputation: 3,011

Post » Fri Jul 09, 2010 12:39 am

[quote="David":pna90mpe]...only to realise you cant store arrays in private variables without a crash...bloody developers should fix that bug![/quote:pna90mpe]
Now there's a bug that WILL get fixed!

:wink: :lol: :lol:
B
2
S
2
G
3
Posts: 406
Reputation: 2,062

Next

Return to Open Topic

Who is online

Users browsing this forum: BeastGLKII12 and 1 guest