Line the hard way

Processing Coding Questions
1

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
2

you could combine
https://processing.org/reference/PVector.html
https://processing.org/reference/lerp_.html

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);
  }
}
3

… or use PVector’s own lerp :slight_smile: https://processing.org/reference/PVector_lerp_.html

3 Likes
4

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) );
    pos = pos.add(off);

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
5

That’s perfect thank you!

1 Like
6

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
7

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
8

Makes sense thanks for the help.