...
You can find the magnitude (the length) using the Pythagorean theorem. In a car game, you might need to find this value show show the speed of an object on the HUD display.
c = (4, 5)
sqrt(4^2 + 5^2))
The PVector class in processing has a method that returns this value: mag();
Normalising
A normalised vector or a unit vector has had its magnitude set to one, with the direction left unchanged. A unit vector shows us a direction alone, without a magnitude. Sometimes we are only interested in direction, and removing magnitude can make many calculations much simpler.
...
Here we use vectors to create a force of attraction. The force's effect is accumulative, always adding to the velocity of our ellipse. But since the force is sometimes negative, depending on if the ellipse is above, below, left, or right of the mouse, the ellipse is subject to an oscillating effect.
| Code Block |
|---|
PVector pos = new PVector(200,200);
PVector velocity = new PVector(1,0);
void setup() {
size(600,600);
fill(255);
}
void draw() {
background(0);
PVector direction = new PVector(mouseX, mouseY);
direction.sub(pos); // by subtracting the pos from mouse coordinates, we end up with a vector between the two points
//
direction.normalize(); // now we have a vector with the length of 1, this tells us the direction we want to push out ellipse in
direction.mult(.1); // we shorten the vector (magnitude), this gives us our speed
velocity.add(direction); //we add the direction to our velocity, so the changes accumulate over time
pos.add(velocity); // pos + velocity give us our new position!
ellipse(pos.x, pos.y,30,30);
}; |
...
Here we use vectors to simulate the effect of bouncing. . When the ball hits the edges of the canvas, it's vector is inverted in the appropriate axis, sending it back to where it came from.
| Code Block |
|---|
PVector pos = new PVector(200,200);
PVector velocity = new PVector(1,0);
float damper = 0.99;
void setup() {
size(600,600);
fill(255);
}
void draw() {
background(0);
velocity.mult(damper); // always slow the ball down to simulate resistance
pos.add(velocity); // pos + velocity give us our new position!
// if the ball is above or below the screen, invert the y value of the velocity to send it back where it came from
if (pos.y<0 || pos.y>height) {
velocity.y = -velocity.y;
pos.add(velocity);
}
// if the ball is left or right of the screen, invert the x value
if (pos.x<0 || pos.x>width) {
velocity.x = -velocity.x;
pos.add(velocity);
}
ellipse(pos.x, pos.y,30,30);
if(mousePressed) {
// show us our "line of power"
stroke(255,0,0);
line(pos.x,pos.y, mouseX,mouseY);
noStroke();
}
};
void mouseReleased() {
// when the mouse is released we give a ball a big push
PVector direction = new PVector(mouseX, mouseY);
direction.sub(pos); // by subtracting the pos from mouse coordinates, we end up with a vectore between the two points
direction.mult(.2); // we shorten the magnitude to reduce the power of the push
velocity.set(direction); //now we have our new velocity
};
|
...
Exercise:
...
The physics of a car a very different to a planet or a bouncy ball, yet most of the parameters are the same.
...
Modify example 2 to include a gravity force. The circles should fall towards the bottom of the screen, where it will bounce up again.
(Harder) Further modify the example so that each mouse press adds a new circle, and releasing the mouse sets the new circles velocity.
(Very Hard) Further modify the example so that each ball bounces off any ball it collides with.