# Make line shape fade away after x seconds

**URL:** <https://discourse.processing.org/t/make-line-shape-fade-away-after-x-seconds/22233>\
**Category:** Coding Questions\
**Created:** [June 29, 2020, 2:58am UTC](https://discourse.processing.org/t/make-line-shape-fade-away-after-x-seconds/22233 "2020-06-29T02:58:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![arala22](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arala22/32/9781_2.png) [@arala22](https://discourse.processing.org/u/arala22)\
**Post date:** [June 29, 2020, 2:58am UTC](https://discourse.processing.org/t/make-line-shape-fade-away-after-x-seconds/22233/1 "2020-06-29T02:58:43Z")

</div>

whats the best way to fade a line out?

I have this here: [https://codepen.io/itsMeAra/pen/e6ebe0dec2d370f50217809c547052e7](https://codepen.io/itsMeAra/pen/e6ebe0dec2d370f50217809c547052e7)

Trying to figure out how to make the line fade away after .5 seconds to make sort of a trailing effect instead of having the line permanently drawn the way it is.

---

<div class="post-metadata">

**Author:** ![ARNAV\_A\_GUPTA](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arnav_a_gupta/32/9660_2.png) [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Post date:** [June 29, 2020, 7:14am UTC](https://discourse.processing.org/t/make-line-shape-fade-away-after-x-seconds/22233/2 "2020-06-29T07:14:31Z")

</div>

if the line is an image, you can use tint(), it works pretty easily in a for loop.

for reference  
[https://p5js.org/reference/#/p5/tint](https://p5js.org/reference/#/p5/tint)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [June 29, 2020, 7:48am UTC](https://discourse.processing.org/t/make-line-shape-fade-away-after-x-seconds/22233/3 "2020-06-29T07:48:55Z")

</div>

Hi,

Welcome to the community! 😉

In order to make that trailing effect, you need to save all the positions of the line segments in order to draw them based on if they are at the beginning or at the end of the line.

To save data, you are going to need an array. At each frame, you will add the current mouse position into that array. Then when the array size is exceeding a certain value (a length), you pop the first item.

Check this example :

```auto
let points = [];
let maxLineLength = 50;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // Add the current mouse position to the array
  points.push(createVector(mouseX, mouseY));
  
  // If the size of the line is too high
  if(points.length > maxLineLength){
    // Remove the first element from the list
    points.shift();
  }
  
  // Draw the line (a line between each points)
  for(let i=0; i<points.length - 1; i++){
    let p1 = points[i], p2 = points[i+1];
    // Interpolate the alpha value based on the position of the segment
    // To fade the line
    stroke(0, map(i, 0, points.length - 1, 0, 255));
    line(p1.x, p1.y, p2.x, p2.y);
  }
}

```

 ![line_fade](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ece2af9e6d730a234dafb5c8873161e759c93d1b.png)

---

<div class="post-metadata">

**Author:** ![arala22](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arala22/32/9781_2.png) [@arala22](https://discourse.processing.org/u/arala22)\
**Post date:** [June 30, 2020, 3:05pm UTC](https://discourse.processing.org/t/make-line-shape-fade-away-after-x-seconds/22233/4 "2020-06-30T15:05:03Z")

</div>

Ahhh, perfect. Thanks so much Joseph! Appreciate the help and detailed explanation.

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [June 30, 2020, 5:47pm UTC](https://discourse.processing.org/t/make-line-shape-fade-away-after-x-seconds/22233/5 "2020-06-30T17:47:43Z")

</div>

> [@ARNAV\_A\_GUPTA](#):
>
> you can use tint(), it works pretty easily in a for loop.

`tint()` becomes pretty expensive …

here is a great tut on the topic.

[![](https://img.youtube.com/vi/vqE8DMfOajk/hqdefault.jpg "9.7: Drawing Object Trails - p5.js Tutorial") ](https://www.youtube.com/watch?v=vqE8DMfOajk)