# Extending a line

**URL:** <https://discourse.processing.org/t/extending-a-line/9880>\
**Category:** Coding Questions\
**Created:** [April 2, 2019, 4:30pm UTC](https://discourse.processing.org/t/extending-a-line/9880 "2019-04-02T16:30:14Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![kristofbolyai](https://avatars.discourse-cdn.com/v4/letter/k/b4bc9f/32.png) [@kristofbolyai](https://discourse.processing.org/u/kristofbolyai)\
**Post date:** [April 2, 2019, 4:30pm UTC](https://discourse.processing.org/t/extending-a-line/9880/1 "2019-04-02T16:30:14Z")

</div>

I have a line between two circles and I want to go them to go across the whole screen, but I only have the circle center position  
This is what I have:

[[Album] Imgur ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/18cb60483f666484e1b1a3d4a07b8f060cdf5b33.jpeg "Imgur") ](https://imgur.com/a/hJQ4mAv)
  
I want it to look like this:  
 ![2png](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c4e3c97f930c66ef6d5be1a4cacf887c6fa4d1be.png) .

PS: sorry for my paint skills.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 2, 2019, 4:35pm UTC](https://discourse.processing.org/t/extending-a-line/9880/2 "2019-04-02T16:35:40Z")

</div>

for a start:

> [@Making an aiming line?](https://discourse.processing.org/t/making-an-aiming-line/9514/4):
>
> // I will try and figure out that lerp() function again float ballX, ballY; float angle = random(0, TWO\_PI); float ballSpeedX = 3, ballSpeedY = 3; boolean wallHit = false; //---------------------------------------------------------------------------------------------------------- void setup() { size(600, 400); ballX = width/4; ballY = height/4; } void draw() { background(150); drawBall(); moveBall(); } //------------------------------------------------------------------------…

---

<div class="post-metadata">

**Author:** ![TechEpic](https://avatars.discourse-cdn.com/v4/letter/t/a87d85/32.png) [@TechEpic](https://discourse.processing.org/u/TechEpic)\
**Post date:** [April 3, 2019, 2:35am UTC](https://discourse.processing.org/t/extending-a-line/9880/3 "2019-04-03T02:35:29Z")

</div>

Pseudo-code:

```auto
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

```

Desmos graph demonstrating the math: [https://www.desmos.com/calculator/sskgv8ousv](https://www.desmos.com/calculator/sskgv8ousv)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 3, 2019, 3:39pm UTC](https://discourse.processing.org/t/extending-a-line/9880/4 "2019-04-03T15:39:42Z")

</div>

sorry, just to show other option,  
[https://processing.org/reference/PVector.html](https://processing.org/reference/PVector.html)

```auto

PVector c1 = new PVector(80, 200, 25); // fake z used for circle radius later
PVector c2 = new PVector(180, 50, 50);

void setup() {
  size(500, 500);
  noFill();
}

void draw() {
  background(200, 200, 0);
                                    // translate(width/2, height/2);
                                    // axis();
  circle(c1.x, c1.y, c1.z); // c1_draw();
  circle(c2.x, c2.y, c2.z); // c2_draw();
                                    // c1_c2_line();
  translate(c1.x, c1.y); // set c1 as center
  rotate(c2.copy().sub(c1).heading()); // rotate so c2 is on x axis
  line(-width,0,width,0); // line on the new x axis
}

// _____________________________________________________ unused options
void axis() {
  push();
  stroke(200, 0, 0);
  line(-width/2, 0, width/2, 0);
  stroke(0, 0, 200);
  line(0, -height/2, 0, height/2);
  stroke(255);
  strokeWeight(0.5);
  rect(-100, -100, 200, 200);
  text("100*100", 100-25, 100+6);
  pop();
}

void c1_draw() {
  push();
  stroke(0, 200, 200);
  translate(c1.x, c1.y);
  point(0, 0);
  circle(0, 0, c1.z);
  text("c1", 3, 4);
  pop();
}

void c2_draw() {
  push();
  stroke(0, 200, 200);
  translate(c2.x, c2.y);
  point(0, 0);
  circle(0, 0, c2.z);
  text("c2", 3, 4);
  pop();
}

void c1_c2_line() {
  push();
  translate(c1.x, c1.y);
// PVector c2new = new PVector();
// c2new = c2.copy();
// c2new = c2new.sub(c1);
// line(0,0,c2new.x,c2new.y); // line c1 c2
// circle(c2new.x,c2new.y,5); // check c2 same place
// rotate(c2new.heading()); // allign c2 on new x axis
  rotate(c2.copy().sub(c1).heading());
  line(-width,0,width,0);
  pop();
}

```

 ![SNAG-0052](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/751db129224375fa3092417901b72a6d47d06f45.jpeg)

SAME SAME / BUT DIFFERENT  
[https://editor.p5js.org/kll/sketches/Leeb2NSBv](https://editor.p5js.org/kll/sketches/Leeb2NSBv)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 4, 2019, 10:36am UTC](https://discourse.processing.org/t/extending-a-line/9880/5 "2019-04-04T10:36:57Z")

</div>

@kll  
question: why can you use push and circle and I cannot?

I am on p3.4, did they change these commands?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 4, 2019, 12:17pm UTC](https://discourse.processing.org/t/extending-a-line/9880/6 "2019-04-04T12:17:53Z")

</div>

!!!\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ processing 3.5.3 JAVA mode  
[https://processing.org/reference/circle\_.html](https://processing.org/reference/circle_.html)  
[https://processing.org/reference/push\_.html](https://processing.org/reference/push_.html)

!!!\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ p5.js  
[https://p5js.org/reference/#/p5/circle](https://p5js.org/reference/#/p5/circle)  
[https://p5js.org/reference/#/p5/push](https://p5js.org/reference/#/p5/push)

but not ask me, i always complain about the spooky behavior of my [p5js.org](http://p5js.org) account

looks like you could not add that commands to a old sketch but you could make a new one with it??  
and a sketch remembers in what revision its made??

* * *

download that sketch and open the library as text?  
p5.min.js  
/\*! p5.js v0.7.3 January 20, 2019 \*/

and download a sketch from dec 2018  
/\*! p5.js v0.7.2 September 02, 2018 \*/

* * *

now for the  
processing IDE / p5.js mode  
that depends on the moment you install that mode,  
but you can update the lib file manually later

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 4, 2019, 4:34pm UTC](https://discourse.processing.org/t/extending-a-line/9880/7 "2019-04-04T16:34:32Z")

</div>

I only use java mode

You can see the version of the processing ide : menu help | about

In the black window left upper corner

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 6, 2019, 4:22pm UTC](https://discourse.processing.org/t/extending-a-line/9880/8 "2019-04-06T16:22:38Z")

</div>

> [@kristofbolyai](#):
>
> I have a line between two circles and I want to go them to go across the whole screen, but I only have the circle center position

If you have two points, you can use them with the equation for a line

> **[DoodleMath US](https://doodlelearning.com/us/math-app)**
>
> Try DoodleMath's personalized math app for kids. Increase confidence & get math practice with cool math games, math practice problems & more.

…to solve another point. In this case you line is:

> (x1, y1) → (x2, y2)

and you want it to be:

> (0, y3) → (width, y4)

This guarantees that the line fills the entire screen (and perhaps much if it exits from the top or bottom).

So, with the equation of the line, you need to solve for x=0, and for x=width.

Processing also has some tools built-in to do this. One is to rotate, then draw a straight line, as @kll demonstrates. Another is to change the magnitude of the line vector between the two points – a simple way would be to increase it so that the line draws one way off the screen, then draw a second line in the opposite direction.

These geometric tools are built into the PVector class for points.

> **[PVector / Reference](https://processing.org/reference/PVector.html)**
>
> A class to describe a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. The datatype, however, st…

---

<div class="post-metadata">

**Author:** ![chaotic.rabbit](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chaotic.rabbit/32/14034_2.png) [@chaotic.rabbit](https://discourse.processing.org/u/chaotic.rabbit)\
**Post date:** [December 3, 2021, 9:53am UTC](https://discourse.processing.org/t/extending-a-line/9880/9 "2021-12-03T09:53:24Z")

</div>

Hi, thankyou for this code. It was much helpful for me to connect a line between 2 points. I have a problem however because I want the line to start and stop at a particular x position instead of extending along the whole screen. What do I need to change to do this? Many thanks!

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [December 3, 2021, 12:15pm UTC](https://discourse.processing.org/t/extending-a-line/9880/10 "2021-12-03T12:15:25Z")

</div>

Try this p5.js example:

```auto
function setup() {
  createCanvas(200, 200);
  rectMode(CENTER);
  noLoop();
}

function draw() {
  background(255, 255, 0);
  strokeWeight(4);
  // draw the lines
  let li = line_intersection(0, 0, width, height, 0, height, width, 0);;
  line(0, 0, width, height);
  line(0, height, li[0], li[1]);
}

function line_intersection(x1, y1, x2, y2, x3, y3, x4, y4) {
  let t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / ((x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4));
  return [x1 + t * (x2 - x1), y1 + t * (y2 - x1)];
}

```

Image:

![lines](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3696d6e48c89e94fa33c0790a6844e376006af9f.png)

The `line_intersection` function is based on information from this reference:

> **[Line–line intersection | Given two points on each line segment](https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection#Given_two_points_on_each_line_segment)**
>
> Note that the intersection point above is for the infinitely long lines defined by the points, rather than the line segments between the points, and can produce an intersection point not contained in either of the two line segments. In order to find the position of the intersection in respect to the line segments, we can define lines 
>   
>     
>       
>         
> L
>           
> 1
>           
>         
>       
>     
> {\\displaystyle L\_{1}}
>   
> and 
>   
>     
>       
>         
> L
> ...