Vectors: Direction & Force
The arrows that make games move!
Move your mouse to control the vector!
The arrows that make games move!
Move your mouse to control the vector!
A vector is an arrow with two properties: direction (where it points) and magnitude (how long it is). Unlike regular numbers, vectors describe movement in space! Drag the arrow tip to change the vector.
Scalar: Just a number (speed = 50 mph)
Vector: Number + direction (velocity = 50 mph NORTH)
Position, velocity, acceleration, forces - all vectors! They tell the game engine WHERE and HOW FAST.
A position vector points from the origin (0,0) to an object's location. Click anywhere on the canvas to place objects and see their position vectors!
In games, the origin is usually top-left (0,0) or center of the world. Every object's position is a vector from that point. When you say a player is at (100, 50), that's a position vector!
Velocity is a vector that describes how position changes over time. The direction shows WHERE you're going, the magnitude shows HOW FAST. Adjust the velocity to control the ball!
When multiple forces act on an object, we add their vectors to get the result. This is how games combine gravity + jump + wind into one movement! Drag the arrow tips to adjust vectors A and B.
Place B's tail at A's tip. The result goes from A's tail to B's tip. That's vector addition!
Player velocity + gravity + wind + knockback = final movement. All added together!
A normalized vector (or unit vector) has magnitude = 1. It keeps the direction but removes the length. This is essential for controlling speed independently of direction!
Magnitude: 5.0
Magnitude: 1.0
If you want an enemy to chase the player at constant speed, normalize the direction vector then multiply by speed. Otherwise diagonal movement would be faster than horizontal!
Scaling a vector multiplies its magnitude while keeping direction. This is how games control speed - normalize first, then multiply by desired speed!
Scale velocity by 2x = double speed! Scale by 0.5x = slow motion.
Scale by -1 = same speed, opposite direction. Used for bouncing!
The dot product tells you how much two vectors point in the same direction. Positive = same direction, Zero = perpendicular, Negative = opposite. Drag the arrows to explore!
Is enemy in front of player? Dot product of facing direction and direction-to-enemy. Positive = visible!
3D lighting uses dot product between light direction and surface normal. Determines brightness!
Watch vectors in action! This simple platformer shows gravity, jump, and movement vectors combining every frame. Use arrow keys or WASD to move, Space to jump!
Click canvas first, then: Arrow keys/WASD = move, Space = jump
Put your vector knowledge to the test! Drag to aim and set power, then launch the ball to hit the target. Gravity affects the trajectory - think about the vectors!
The ball follows a parabolic path because gravity (constant downward vector) is added to velocity every frame. The horizontal velocity stays constant while vertical velocity increases!
You've mastered the arrows that power every game! From position to velocity, from adding forces to normalizing directions - vectors are everywhere in game physics.
Direction + Magnitude, the building blocks of movement
Where things are and how they move
Combining forces like gravity + jump + movement
Unit vectors for consistent speed in any direction
Control speed by multiplying vectors
Check if vectors point the same direction
Put your new knowledge into practice!