Alpha values of overlapping lines

Processing Coding Questions
1

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.

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
image736×392 23.5 KB

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.

1 Like
2

Hello @N0ld0r,

You can have a look there: Help me please how to remove little circle?

It should answer your question.

1 Like
3

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.

4

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

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
image828×352 20.4 KB

2 Likes
5

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 (can be scaled as desired)

:)

1 Like