Vectors in p5.js

Note: this page has been created with the use of AI. Please take caution, and note that the content of this page does not necessarily reflect the opinion of Cratecode.

Vectors are the unsung heroes of the graphical world, enabling a wide range of interactions and animations. In the realm of p5.js, vectors simplify the process of working with positions, velocities, and accelerations in 2D and 3D space. Strap in, mathematicians and artists, because we're about to dive into the wonderful world of vectors.

What is a Vector?

A vector is a mathematical object that represents a quantity with both magnitude (length) and direction. In p5.js, vectors are typically used to represent points in 2D or 3D space, such as the position of an object on the screen. Vectors can also represent other quantities, like velocity and acceleration.

Imagine a vector as an arrow pointing from one point to another, with the length of the arrow indicating the magnitude and the direction it's pointing representing the direction of the vector.

Creating Vectors in p5.js

In p5.js, you can create vectors using the createVector() function. This function accepts two or three arguments for the x, y, and (optionally) z components of the vector.

let myVector = createVector(3, 4);

This creates a 2D vector with x = 3 and y = 4.

Vector Operations

Vectors can be added, subtracted, multiplied, and divided, just like numbers. p5.js provides several functions for vector operations, such as:

• add(): Add two vectors together
• sub(): Subtract one vector from another
• mult(): Multiply a vector by a scalar (a single number)
• div(): Divide a vector by a scalar

Here's an example of adding two vectors together:

let vectorA = createVector(3, 4);
let vectorB = createVector(1, 2);

vectorA.add(vectorB); // vectorA is now (4, 6)

Using Vectors in p5.js

Vectors are incredibly useful when working with moving objects, as they can store position, velocity, and acceleration information. For example, let's create a simple bouncing ball animation using vectors:

let position;
let velocity;

function setup() {
  createCanvas(400, 400);
  position = createVector(width / 2, height / 2);
  velocity = createVector(2, 3);
}

function draw() {
  background(0);

  position.add(velocity);

  if (position.x > width || position.x < 0) {
    velocity.x *= -1;
  }
  if (position.y > height || position.y < 0) {
    velocity.y *= -1;
  }

  ellipse(position.x, position.y, 20, 20);
}

In this example, we use two vectors: one for the ball's position and another for its velocity. By adding the velocity vector to the position vector each frame, the ball appears to move. When the ball hits the edge of the canvas, we reverse the appropriate component of the velocity vector, causing the ball to bounce.

Conclusion

Vectors are an essential tool for working with 2D and 3D graphics in p5.js. They simplify the management of positions, velocities, and accelerations, making it easier to create complex animations and interactions. Now that you have a solid understanding of vectors in p5.js, explore their potential and bring your creative ideas to life!

FAQ

let myVector = createVector(3, 4);

let vector1 = createVector(3, 4);
let vector2 = createVector(1, 2);
let sum = vector1.add(vector2);

let position = createVector(50, 50);
let velocity = createVector(1, 2);
function draw() {
    background(255);
    position.add(velocity);
    ellipse(position.x, position.y, 20, 20);
}

let point1 = createVector(10, 20);
let point2 = createVector(30, 40);
let distance = dist(point1.x, point1.y, point2.x, point2.y);