# How do I get trailing lines not dots?

**URL:** <https://discourse.processing.org/t/how-do-i-get-trailing-lines-not-dots/36522>\
**Category:** Beginners\
**Created:** [April 22, 2022, 11:35am UTC](https://discourse.processing.org/t/how-do-i-get-trailing-lines-not-dots/36522 "2022-04-22T11:35:53Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![locky.mcdonald](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@locky.mcdonald](https://discourse.processing.org/u/locky.mcdonald)\
**Post date:** [April 22, 2022, 11:35am UTC](https://discourse.processing.org/t/how-do-i-get-trailing-lines-not-dots/36522/1 "2022-04-22T11:35:53Z")

</div>

`function setup() {  
createCanvas(800, 800);  
}

function draw() {  
background("#ffffff04");

```
if (mouseIsPressed) {
stroke(mouseX, 0, mouseY);
strokeWeight(10);
smooth();
point(mouseX-5, mouseY-5, pmouseX, pmouseY );
point(mouseX*-1+800, mouseY-5, pmouseX, pmouseY);
point(mouseX*-1+800, mouseY*-1+800);
point(mouseX-5, mouseY*-1+800);

```

}  
}  
Preformatted text`

 ![Screen Shot 2022-04-22 at 9.34.10 pm](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/b/2bc77a5d53f382ecacb0d1d86a4e775f65bcc713.png)

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [April 22, 2022, 11:47am UTC](https://discourse.processing.org/t/how-do-i-get-trailing-lines-not-dots/36522/2 "2022-04-22T11:47:24Z")

</div>

Like this? [examples | p5.js](https://p5js.org/examples/motion-non-orthogonal-reflection.html)

---

<div class="post-metadata">

**Author:** ![locky.mcdonald](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@locky.mcdonald](https://discourse.processing.org/u/locky.mcdonald)\
**Post date:** [April 22, 2022, 11:51am UTC](https://discourse.processing.org/t/how-do-i-get-trailing-lines-not-dots/36522/3 "2022-04-22T11:51:44Z")

</div>

Yess, that kind of trail.But still being able to draw the lines with when the mouse is pressed.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 22, 2022, 11:55am UTC](https://discourse.processing.org/t/how-do-i-get-trailing-lines-not-dots/36522/4 "2022-04-22T11:55:28Z")

</div>

Hello,

Example here:  
[https://p5js.org/examples/drawing-continuous-lines.html](https://p5js.org/examples/drawing-continuous-lines.html)

And lots more here:

> **[examples | p5.js](https://p5js.org/examples/)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

`:)`

---

<div class="post-metadata">

**Author:** ![locky.mcdonald](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@locky.mcdonald](https://discourse.processing.org/u/locky.mcdonald)\
**Post date:** [April 22, 2022, 12:01pm UTC](https://discourse.processing.org/t/how-do-i-get-trailing-lines-not-dots/36522/5 "2022-04-22T12:01:36Z")

</div>

hi, thank you!  
I understand how to draw continuous lines, Im trying to get four mirrored lines but I can only figure out how to do it with points.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 22, 2022, 12:03pm UTC](https://discourse.processing.org/t/how-do-i-get-trailing-lines-not-dots/36522/6 "2022-04-22T12:03:49Z")

</div>

> [@locky.mcdonald](#):
>
> Im trying to get four mirrored lines

There are examples in the forum.

Please use the search and do some exploration.

`:)`

---

<div class="post-metadata">

**Author:** ![locky.mcdonald](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@locky.mcdonald](https://discourse.processing.org/u/locky.mcdonald)\
**Post date:** [April 22, 2022, 12:04pm UTC](https://discourse.processing.org/t/how-do-i-get-trailing-lines-not-dots/36522/7 "2022-04-22T12:04:20Z")

</div>

oh ok sweet, thank you!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 22, 2022, 12:26pm UTC](https://discourse.processing.org/t/how-do-i-get-trailing-lines-not-dots/36522/8 "2022-04-22T12:26:31Z")

</div>

Hello,

I was able to do this with example I provided:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/1/8106a3717b545800047d11e04a9972c2a0877497.png)

Add another line:  
`line(mouseX, mouseY, pmouseX, pmouseY);`

And… make some modifications to it.  
Think of the the math involved for mirroring.

Add or subtract a number to the x and y coordinates and observe.

This may come in handy:

> **[reference | p5.js](https://p5js.org/reference/#/p5/width)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

`:)`

---

<div class="post-metadata">

**Author:** ![locky.mcdonald](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@locky.mcdonald](https://discourse.processing.org/u/locky.mcdonald)\
**Post date:** [April 22, 2022, 1:06pm UTC](https://discourse.processing.org/t/how-do-i-get-trailing-lines-not-dots/36522/9 "2022-04-22T13:06:52Z")

</div>

> [@glv](#):
>
> [reference | p5.js](https://p5js.org/reference/#/p5/width)

when I add numbers to the x an y values I get a straight line from the third point. Not four separate lines. Apologies I’m still learning about all of this.

 ![Screen Shot 2022-04-22 at 11.05.03 pm](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/b/3b64110181ad6e05f6630d36b13d47f71127aab4.png)

---

<div class="post-metadata">

**Author:** ![locky.mcdonald](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@locky.mcdonald](https://discourse.processing.org/u/locky.mcdonald)\
**Post date:** [April 22, 2022, 1:18pm UTC](https://discourse.processing.org/t/how-do-i-get-trailing-lines-not-dots/36522/10 "2022-04-22T13:18:29Z")

</div>

the reference is talking about the createCanvas? I don’t understand how that can break the fill in between the two lines?

---

<div class="post-metadata">

**Author:** ![locky.mcdonald](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@locky.mcdonald](https://discourse.processing.org/u/locky.mcdonald)\
**Post date:** [April 22, 2022, 1:23pm UTC](https://discourse.processing.org/t/how-do-i-get-trailing-lines-not-dots/36522/11 "2022-04-22T13:23:24Z")

</div>

https://editor.p5js.org/selmansamet/full/MwRrHp1IZ

similar to this but with lines that’s fade and not points

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [April 22, 2022, 5:09pm UTC](https://discourse.processing.org/t/how-do-i-get-trailing-lines-not-dots/36522/12 "2022-04-22T17:09:58Z")

</div>

I think you can achive this using linear interpolation. processing has it by default, its lerp()