# Line the hard way

Hello!

I apologize in advance for my appalling math knowledge. How can I calculate coords of locations of regular distance in a straight line between two points? IE I have a source vector and a target vector, and I want an array of vectors of arbitrary spacing that represent a straight line between the two which will in turn be used as source points for new curves.

I hope that makes sense! Thanks in advance for anyone who is willing to help.

1 Like
``````PVector p1 = new PVector(15, 10);
PVector p2 = new PVector(80, 90);
PVector off = new PVector(0, 0);
PVector pos = new PVector(0, 0);
int many = 5;

void setup() {
size(200, 200);
}

void draw() {
background(200, 200, 0);
line(p1.x, p1.y, p2.x, p2.y);
off.x = mouseX;
off.y = mouseY;
for (int i = 0; i <= many; i++) {
pos.x = lerp( p1.x, p2.x, i/float(many) ) + off.x;
pos.y = lerp( p1.y, p2.y, i/float(many) ) + off.y;
circle(pos.x, pos.y, 5);
}
}

``````

â€¦ or use PVectorâ€™s own lerp https://processing.org/reference/PVector_lerp_.html

3 Likes

thanks, that would be

``````//    pos.x = lerp( p1.x, p2.x, i/float(many) ) + off.x;
//    pos.y = lerp( p1.y, p2.y, i/float(many) ) + off.y;
pos = PVector.lerp(p1, p2,i/float(many) );
``````

here even more

vectorisation
``````PVector p1 = new PVector(15, 10);
PVector p2 = new PVector(80, 90);
PVector off = new PVector(0, 0);
PVector pos = new PVector(0, 0);
int diam = 3, many = 5;

void setup() {
size(200, 200);
}

// let's make our own Vector primitives
void line(PVector p1, PVector p2){
line(p1.x, p1.y, p2.x, p2.y);
}

void circle(PVector p, float w) {
circle(p.x, p.y, w);
}

void draw() {
background(200, 200, 0);
line(p1,p2);
off.set(mouseX,mouseY);
for (int i = 0; i <= many; i++) {
pos = ( PVector.lerp( p1, p2, i/float(many) ) ).add(off);
circle(pos, diam);
}
}

``````
1 Like

Thatâ€™s perfect thank you!

1 Like

Hereâ€™s a question - I donâ€™t understand why in the following code the first and last vertices of the lines do not reach the points denoting the start and end points.

I print the coordinates and you I see that when the amt value in the lerp function is 0 or 1, it will return the location of the two input points to the lerp respectively.

I also tried an if statement to detect when j is 0 and hard code it to create a vertex at â€ś200.0 90.0â€ť and that did work.

So why isnâ€™t it creating the first vertex at 200.0 90.0, when the lerp amt is 0?

Hope that makes sense. Incidentally, the reason to not just use lines is that I plan to distort the shapes with noise and whatnot.

Thanks!

``````PVector a1 = new PVector(200, 90);
PVector a2 = new PVector(580, 20);
PVector b1 = new PVector(20, 600);
PVector b2 = new PVector(700, 700);
PVector posA = new PVector(0, 0);
PVector posB = new PVector(0, 0);
PVector linePoint = new PVector(0, 0);

float points = 5;
float subPoints = 50;
float c = 0;

void setup() {
size(800, 800);
stroke(0);
strokeWeight(2);
noFill();
noLoop();
}

void draw() {
background(255);

for (float i = 0; i <= points; i++) {

posA = PVector.lerp(a1, a2, i/points);
point(posA.x, posA.y);

posB = PVector.lerp(b1, b2, i/points);
point(posB.x, posB.y);

beginShape();

for (float j = 0; j <= subPoints; j++) {

linePoint = PVector.lerp(posA, posB, j/(subPoints));
println(linePoint.x, linePoint.y);
curveVertex(linePoint.x, linePoint.y);
}
endShape();
}
}

//void draw() {
//  background(255);

//  point(a1.x,a1.y);
//  point(b2.x, b2.y);
//  float s = map(sin(c),-1,1,0,1);
//    if(s==0 || s ==1){
//      background(255,0,0);
//    }
//  linePoint = PVector.lerp(a1, b2, s);

//  point(linePoint.x, linePoint.y);
//  c += 0.01;
//}
``````
1 Like

https://processing.org/reference/curveVertex_.html

The first and last points in a series of curveVertex() lines will be used to guide the beginning and end of a the curve.

meaning they are not drawn

so, you need two points more
try ( untested )

``````
beginShape();
curveVertex(posA.x, posA.y);
for (float j = 0; j <= subPoints; j++) {

linePoint = PVector.lerp(posA, posB, j/(subPoints));
println(linePoint.x, linePoint.y);
curveVertex(linePoint.x, linePoint.y);
}
curveVertex(posB.x, posB.y);
endShape();

``````
1 Like

Makes sense thanks for the help.