Connecting a line that passes though 2 points

Processing Coding Questions
1

Hi I found this code posted on here and it worked for me to draw a line that passes from 2 points that I wanted. However I want the line to start and stop at certain points not continue all the way to the top and bottom. I can’t figure out which points I need to change in order to this this.

x1 //first circle's x
y1 //first circle's y
x2 //second circle's x
y2 //second circle's y
//draw a line from top to bottom if the line is vertical, prevents division by 0
if x1 == x2
  line(x1, 0, x1, height)
  return
m = (y2 - y1) / (x2 - x1) // rise / run, gives us the line slope
b = y1 - m * x1 // solves offset by assuming it's 0 and accounting for the error at X=x1
line(0, b, width, m * width + b) //draw a line starting at (0, f(0)) and ending at (width, f(width)) for the line equation
2

Extending a line - #2 by Chrisir this is the question i got the code from

3

I’m afraid we’ll need a bit more context…

If you already know the 2 points (A and B) of your segment, you simply need to call the line() function.

line(A.x, A.y, B.x, B.y);
4

I only know the start of the line and another point from it not the end point and i want it to pass through both points and ends at a certain x position(which i don’t know the y of)

1 Like
5

Hi @chaotic.rabbit,

You can first define the line from the two known points. Thereafter, the choices for endpoints for the actual drawn line segment are constrained by the line that was defined.

From the two points that define the line, get a slope (m) and a y-intercept (b). Then choose two x values that will be part of the endpoints of the drawn line. From those two x values, compute two y values. Then draw the line, using the coordinates of the endpoints.

The following p5.js code can serve as an example:

function setup() {
  createCanvas(200, 200);
  noLoop();
}

function draw() {
  background(255, 255, 0);
  strokeWeight(4);
  // choose 2 points to define the line
  let pt_1 = [24, 48];
  let pt_2 = [64, 58];
  // get slope and y-intercept (m and b)
  let m_and_b = get_m_and_b(pt_1[0], pt_1[1], pt_2[0], pt_2[1]);
  let m = m_and_b[0];
  let b = m_and_b[1];
  // choose an x value for left end of line to draw
  let left_x = 20;
  // choose an x value for right end of line to draw
  let right_x = 180;
  // calculate the y values for the end points
  let first_y = get_y(m, left_x, b);
  let second_y = get_y(m, right_x, b);
  // draw the line
  line(left_x, first_y, right_x, second_y);
}

function get_m_and_b(x1, y1, x2, y2) {
  // get slope and y-intercept from 2 points
  if (x1 == x2) {
    return [false, false]; // slope is infinite
  }
  let m = (y1 - y2) / (x1 - x2);
  let b = y1 - m * x1;
  return [m, b];
}

function get_y(m, x, b) {
  // get y from slope, x, and y-intercept
  return m * x + b;
}

Image:

line

EDITED on December 1, 2021 to revise a comment within the code

6

Hello,

Some code I was dabbling with:

// Linear Extrapolation
// v1.0.0
// GLV 2021-12-01

//float m = 0.5;
float x1, y1;
float x2, y2;

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

void draw()
  {
  background(0);
  x1 = 100;
  y1 = 100;
  
  x2 = 300;
  y2 = 300;
  
  stroke(0);
  
  float ly = y2 - y1;
  float lx = x2 - x1;
  
  //float m = ly/lx;
  
  float f1 = map(mouseX-width/2, 0, width, 0, 11);
  float f2 = int(f1)/10.0; // Increments of .1
  
  float f3 = map(mouseY-height/2, 0, height, 0, 11);
  float f4 = int(f3)/10.0; // Increments of .1

  println(f2, f4);  
  
  stroke(255, 255, 0);
  strokeWeight(5);
  line(x1 + lx*f2, y1 + ly*f2, x2 + lx*f4, y2 + ly*f4);   
  }

:)

1 Like
7

I did manage to draw the line. My problem is that I need it to stop when it hits another line so I’m not sure which values i need to change in my code to make the line stop earlier instead of going on till the end of the page.

8

line
line1152×648 2.97 KB

so the end point needs to be the yellow dot, and at the moment it’s still going on past it.

9

Have you checked this article?

This section may apply:

EDIT (December 3, 2021):

Also see this discussion: Extending a line.

10

Still can’t figure out why when I change the x position of the line, the line stops passing through the 2 points that I need it to pass through instead of just going through them and breaking when it reaches the x point that I’ve coded. For some reason it just changes the gradient instead of keeping the same gradient and cutting the line short. I’m sure it just needs a small alteration somewhere but i can’t figure out where.

11

When you choose an x value for the end point, are you also choosing a y value based on that x value? It is necessary to do that, otherwise the slope of the line may change. This function will return a y value, based on the slope, x, and y-intercept:

function get_y(m, x, b) {
  // get y from slope, x, and y-intercept
  return m * x + b;
}

The x and y values also need to be on the other line.

12

What you might want to implement is a linear interpolation inbetween vectors. If you then control the parameter of that interpolation, you easy can draw over the interpolation points or stay inbetween those points.

For the yellow dot-thing, it is thinkable that the dot is coming just by an interpolation and then the branching line is drawn.

If you follow the videos about linear interpolation by Daniel Shiffman, you‘ll make a progress here.