# Alpha values of overlapping lines

**URL:** <https://discourse.processing.org/t/alpha-values-of-overlapping-lines/22794>\
**Category:** Coding Questions\
**Created:** [July 23, 2020, 11:59am UTC](https://discourse.processing.org/t/alpha-values-of-overlapping-lines/22794 "2020-07-23T11:59:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![N0ld0r](https://avatars.discourse-cdn.com/v4/letter/n/b77776/32.png) [@N0ld0r](https://discourse.processing.org/u/N0ld0r)\
**Post date:** [July 23, 2020, 11:59am UTC](https://discourse.processing.org/t/alpha-values-of-overlapping-lines/22794/1 "2020-07-23T11:59:23Z")

</div>

Good day

I am creating a small asteroids clone just to have some fun. I recently added missiles into my game which work well except for a small issue I’m having with the alpha of the stroke(R,G,B,Alpha) function and line(x1,y1,x2,y2) functions. The trail is supposed to fade the farther it is from its source, in this case the missile.

The trail is created by drawing connected lines using a history of the missile’s location. The end points of these lines overlap which causes the alpha values to add as far as I can tell, creating an effect where the trail changes between bright where the lines overlap and dim where the lines don’t overlap. I am trying to get rid of the bright spots, to have the trail be one fading colour.

I included the code from my trail() function which draws the trail and updates the values of the history array.

```auto
void trail()
  {   
    for(int i = historyLength-1; i > 0; i--) // updates the history values
    {
      historyX[i] = historyX[i-1];
      historyY[i] = historyY[i-1];
    }
    historyX[0] = location.x-direction.x; // addscurrent position to history array
    historyY[0] = location.y-direction.y;
    
    for(int i = 0; i < historyLength-1; i++)
    {
      if(abs(historyX[i] - historyX[i+1]) > 10 || abs(historyY[i] - historyY[i+1]) > 10)
      { // doesn't draw line if source moves from one side of screen through to another
        continue;
      }      
      strokeWeight = map(i,0,historyLength,size,0); // calculates the trail width
      strokeWeight(strokeWeight); // sets the trail width
      alpha = map(i,0,historyLength,100,10); // calculates the alpha value
      if(player == 1){stroke(0,200,255,alpha);}
      if(player == 2){stroke(255,85,0,alpha);}
      line(historyX[i],historyY[i],historyX[i+1],historyY[i+1]); // draws a line connecting adjacent history locations
    }
  }

```

I also included a screen grab of the problem I am having to help with clarity.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cb5684e8bfc7aeb8a79aa63832ac5c0d30b4bbb4.png)

I have tried searching for a way to solve the issue of the added alphas but I have been unable to find anything that could help me solve this problem. If anyone knows of a way to fix this or someplace I can look for a solution I would greatly appreciate it.

Thank you.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [July 23, 2020, 12:04pm UTC](https://discourse.processing.org/t/alpha-values-of-overlapping-lines/22794/2 "2020-07-23T12:04:16Z")

</div>

Hello @N0ld0r,

You can have a look there: [Help me please how to remove little circle?](https://discourse.processing.org/t/help-me-please-how-to-remove-little-circle/22564/20)

It should answer your question.

---

<div class="post-metadata">

**Author:** ![N0ld0r](https://avatars.discourse-cdn.com/v4/letter/n/b77776/32.png) [@N0ld0r](https://discourse.processing.org/u/N0ld0r)\
**Post date:** [July 23, 2020, 12:45pm UTC](https://discourse.processing.org/t/alpha-values-of-overlapping-lines/22794/3 "2020-07-23T12:45:28Z")

</div>

Thank you @jb4x for the quick response. The PGraphics made the program run insanely slow and I dont really understand your code so I was unable to use your code to solve my problem.

---

<div class="post-metadata">

**Author:** ![N0ld0r](https://avatars.discourse-cdn.com/v4/letter/n/b77776/32.png) [@N0ld0r](https://discourse.processing.org/u/N0ld0r)\
**Post date:** [July 23, 2020, 12:47pm UTC](https://discourse.processing.org/t/alpha-values-of-overlapping-lines/22794/4 "2020-07-23T12:47:00Z")

</div>

I was able to solve the problem by making the alpha value fixed and instead darkening the color by adjusting the R,G,B values using the “i” value of the for loop which works just as well

```auto
void trail()
  {   
    for(int i = historyLength-1; i > 0; i--)
    {
      historyX[i] = historyX[i-1];
      historyY[i] = historyY[i-1];
    }
    historyX[0] = location.x-direction.x*10;
    historyY[0] = location.y-direction.y*10;
    
    for(int i = 0; i < historyLength-1; i++)
    {
      if(abs(historyX[i] - historyX[i+1]) > 10 || abs(historyY[i] - historyY[i+1]) > 10)
      {
        continue;
      }      
      strokeWeight = map(i,0,historyLength,size,0);
      strokeWeight(strokeWeight);     
      //alpha = map(i,0,historyLength,100,0); 
      alpha = 255;
      if(player == 1){stroke(0,(200-(2.9*i)),(255-(2.9*i)),alpha);}
      if(player == 2){stroke(255-(2.9*i),85-(i),0,alpha);}
      line(historyX[i],historyY[i],historyX[i+1],historyY[i+1]); 
    }
  }

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/27fd28cee3d28353f2716fecbdfdf510c1959e10.png)

---

<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:** [July 23, 2020, 3:25pm UTC](https://discourse.processing.org/t/alpha-values-of-overlapping-lines/22794/5 "2020-07-23T15:25:21Z")

</div>

> [@N0ld0r](#):
>
> I was able to solve the problem by making the alpha value fixed and instead darkening the color by adjusting the R,G,B values using the “i” value of the for loop which works just as well

Cool stuff!

I have so many versions of tails, fading in, fading out that I have tried over the years and use what best suits me and the project.

This may be of interest:  
[Serial plotter over bluetooth - #18 by glv](https://discourse.processing.org/t/serial-plotter-over-bluetooth/22378/18) (can be scaled as desired)

`:)`