# Line help beginner completely new

**URL:** <https://discourse.processing.org/t/line-help-beginner-completely-new/15120>\
**Category:** Coding Questions\
**Created:** [November 1, 2019, 3:00pm UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120 "2019-11-01T15:00:43Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![FilDomInteractive](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fildominteractive/32/6678_2.png) [@FilDomInteractive](https://discourse.processing.org/u/FilDomInteractive)\
**Post date:** [November 1, 2019, 3:00pm UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120/1 "2019-11-01T15:00:43Z")

</div>

How to make a line that is at the same position as mouse but is longer than the distance. below ![img](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d35695ae4d2701a6461cf2cadda8f5d575326907.png)

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 1, 2019, 3:14pm UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120/2 "2019-11-01T15:14:37Z")

</div>

Maye this helps?

```auto
float x, y;

void setup () {
  size (400, 400);
  background (255);
  x = width/2;
  y = height/2;
}

void draw () {
  background (255);
  line (x, y, mouseX, mouseY);
}

```

---

<div class="post-metadata">

**Author:** ![FilDomInteractive](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fildominteractive/32/6678_2.png) [@FilDomInteractive](https://discourse.processing.org/u/FilDomInteractive)\
**Post date:** [November 1, 2019, 3:15pm UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120/3 "2019-11-01T15:15:50Z")

</div>

Sorry, but didn’t help. I need it to be farther than the mouse postion.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 1, 2019, 3:16pm UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120/4 "2019-11-01T15:16:42Z")

</div>

But from which starting point?

---

<div class="post-metadata">

**Author:** ![FilDomInteractive](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fildominteractive/32/6678_2.png) [@FilDomInteractive](https://discourse.processing.org/u/FilDomInteractive)\
**Post date:** [November 1, 2019, 3:18pm UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120/5 "2019-11-01T15:18:45Z")

</div>

I have an ellipse(x, y, 20, 20) and from the ellipse’s position I want it to start and I want not to end the line, like on the image, where is the line longer than the distance between mouse and ellipse.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 1, 2019, 3:20pm UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120/6 "2019-11-01T15:20:02Z")

</div>

Subtracting or adding from mouseX and mouseY with some value?

---

<div class="post-metadata">

**Author:** ![FilDomInteractive](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fildominteractive/32/6678_2.png) [@FilDomInteractive](https://discourse.processing.org/u/FilDomInteractive)\
**Post date:** [November 1, 2019, 3:20pm UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120/7 "2019-11-01T15:20:41Z")

</div>

And I want the line to be pointing at my cursor and not to end the line when it hits the mouse, but continue like on the image.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 1, 2019, 3:24pm UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120/8 "2019-11-01T15:24:07Z")

</div>

Hehe, for me sometimes to understand the question is harder than the code.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 1, 2019, 3:28pm UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120/9 "2019-11-01T15:28:00Z")

</div>

> [@FilDomInteractive](#):
>
> And I want the line to be pointing at my cursor

What do you mean by this. Normally the ponter points. Not the line.

---

<div class="post-metadata">

**Author:** ![FilDomInteractive](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fildominteractive/32/6678_2.png) [@FilDomInteractive](https://discourse.processing.org/u/FilDomInteractive)\
**Post date:** [November 1, 2019, 3:29pm UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120/10 "2019-11-01T15:29:41Z")

</div>

I mean like it will be where my cursor is, look at the image.

Also, I want the line to not end but has infinite distance. Like it will never end, I don’t want it to be long from the ellipse to my Cursor but farther than my cusror

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 1, 2019, 3:32pm UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120/11 "2019-11-01T15:32:38Z")

</div>

But I already replied just add a value to MouseX and MouseY.

---

<div class="post-metadata">

**Author:** ![FilDomInteractive](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fildominteractive/32/6678_2.png) [@FilDomInteractive](https://discourse.processing.org/u/FilDomInteractive)\
**Post date:** [November 1, 2019, 3:36pm UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120/12 "2019-11-01T15:36:23Z")

</div>

Doesn’t work.

But if you can’t understand what I am asking for, there is a video where they have the neverending line. I’m gonna link it here \> [https://youtu.be/v1kqMxsvElM?t=265](https://youtu.be/v1kqMxsvElM?t=265)

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [November 1, 2019, 3:48pm UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120/13 "2019-11-01T15:48:19Z")

</div>

This should do what you want.

```auto
int px, py; // ellipse position
float len;
void setup(){
  size(640, 480);
  cursor(CROSS);
  len = max(width, height);
  px = 255;
  py = 199;
}

void draw(){
  background(255, 240, 200);
  drawLine(px, py, mouseX, mouseY);
  fill(0);
  noStroke();
  ellipse(px, py, 10, 10);
}

// Draw a line from [fx, fy] to pass through [tx, ty]
// to the display edge
void drawLine(float fx, float fy, float tX, float tY){
  float ang = atan2(tY - fy, tX - fx);
  float x = fx + cos(ang) * len;
  float y = fy + sin(ang) * len;
  stroke(255,0,0);
  strokeWeight(3);
  line(fx, fy, x, y);
}

```

---

<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:** [November 5, 2019, 6:04pm UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120/14 "2019-11-05T18:04:27Z")

</div>

Just to restate for future searches: OP wanted to:

- draw a line from an origin THROUGH the mouse and PAST the edge of the display.

@quark’s solution mostly works, so long as px/py isn’t in a corner – like (10,10). Then it fails on the diagonal. For a line that is longer than the box, use:

```auto
len = sqrt(width*width + height*height)+1;

```

If you want to measure a line segment to _exactly_ the edge of a bounding box that contains its endpoint – for example, if there is a rectangle in the middle of your screen, and you want to crop the line exactly – then you can use line-line collision detection to find its other endpoint.

> **[Collision Detection](http://www.jeffreythompson.org/collision-detection/line-rect.php)**
>
> An online book about collision detection using Processing.

```auto
// LINE/LINE
PVector lineLine(float x1, float y1, float x2, float y2, float x3, float y3, float x4, float y4) {

  // calculate the direction of the lines
  float uA = ((x4-x3)*(y1-y3) - (y4-y3)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));
  float uB = ((x2-x1)*(y1-y3) - (y2-y1)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));

  // if uA and uB are between 0-1, lines are colliding
  if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) {
    float ix = x1 + (uA * (x2-x1));
    float iy = y1 + (uA * (y2-y1));
    return new PVector(ix, iy);
  }
  return null;
}

```

---

<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:** [November 5, 2019, 7:39pm UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120/15 "2019-11-05T19:39:29Z")

</div>

continued here:

> [@Collision rect - ellipse : Multiple questions - More info in Body](https://discourse.processing.org/t/collision-rect-ellipse-multiple-questions-more-info-in-body/15155):
>
> How can I make that when the laser hits the rectangle that randomly spawns, the laser will just stop? Like it will not go any further but will stop? How can I make collision so my player (ellipse) will be not able to go through the rectangle from question 1? Thank you! The Code for both questions \> float px, py; float len; int value = 0; float rx, ry; float wx = 30, wy = 70; void setup(){ size(800, 600); cursor(CROSS); len = max(width + 12121, height + 12121); px = 255; py = …

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [November 6, 2019, 9:05am UTC](https://discourse.processing.org/t/line-help-beginner-completely-new/15120/16 "2019-11-06T09:05:45Z")

</div>

> [@jeremydouglass](#):
>
> @quark’s solution mostly works, so long as px/py isn’t in a corner – like (10,10). Then it fails on the diagonal. For a line that is longer than the box, use:
> 
> ```auto
> len = sqrt(width*width + height*height)+1;
> 
> ```

Thanks for pointing that out I had not checked the corner position, obviously `len` is too small but calculating the diagonal of the screen is more than necessary simply change line to

` len = 1.5 * max(width, height);`

this will work for _any_ size display. 🙂

(this can be proved using basic algebra)