How to Draw a Line Between Pvectors in Processing

There's plenty of solutions for this project. One of the easiest is to use Processing's PVector class.

The PVector class can be used for two or three dimensional vectors. A vector is an entity that has both magnitude and direction. The PVector class, however, stores the components of the vector (x,y for 2D, and x,y,z for 3D). The magnitude and direction are calculated from the components and can be accessed via the methods mag() and heading().

A two dimensional vector in Processing is defined through x and y components:

          PVector v = new PVector(xComponent, yComponent);                  

With some mathematical formulae, you can determine magnitude and direction using the x- and y-components. But we don't need to determine these.

Below, I've attached completed solution code. Most of it should make sense to you. But it's worth understanding what is going on with PVector.

A nested for loop within void draw() contains x and y variables that represent the coordinates of each grid vertex.

We first define PVector v as a vector given by an x-component of mouseX - x, or the difference between the x-positions of the mouse and each grid point. Similarly, the y-component given by mouseY - y has the same difference.

Creating a variable PVector u initialized from v.setMag(15) holds a PVector that has the same direction as v, but with a length of just 15.

Now to draw the lines. Vectors represent an offset, not a position (in this case), so drawing a line from a grid point to an offset of a grid point is key.

Hence line(x, y, x + u.x, y + u.y), where u.x and u.y are the x- and y-components of the vector u.

---

          void setup() {   size(600, 600); // Set the size of the canvas to 600x600. }  void draw() {   background(255);   stroke(200); // Set the stroke color to black    int distVertLine = width / 10; // This variable defines the distance between each subsequent vertical line.   for(int i = 0; i < width; i += distVertLine) {     line(i, 0, i, height); // Draw a line at x=i starting at the top of the canvas (y=0) and going to the bottom (y=height)   }    int distHorizLine = height / 10; // This variable defines the distance between each subsequent vertical line.   for(int i = 0; i < width; i += distHorizLine) {     line(0, i, width, i); // Draw a line at y=i starting at the left of the canvas (x=0) and going to the right (x=width)   }    stroke(0); // Set the stroke to black.    // Use a nested for loop to iterate through all grid vertices.   for(int x = 0; x <= width; x += width/10) {     for(int y = 0; y <= height; y += height/10) {       PVector v = new PVector(mouseX - x, mouseY - y); // Define a vector that points in the direction of the mouse from each grid point.       PVector u = v.setMag(15); // Make the vector have a length of 15 units.        line(x, y, x + u.x, y + u.y); // Draw a line from the grid vertex to the terminal point given by the vector.     }   } }                  

How to Draw a Line Between Pvectors in Processing

Source: https://stackoverflow.com/questions/58630871/how-to-draw-lines-pointing-to-mouse-in-processing

Share this post