How to draw a path where the tail fades to transparent

Question

I am creating a simple Android app within which there are particles which move across the screen.

These particles are currently drawn with a paint which has a LinearGradient shader applied. This allows the particle to nicely fade to transparent along the path as in the following image.

https://i.stack.imgur.com/a4Zjg.jpg

The shader is as follows

trailPaint.shader = LinearGradient(
                trail[size - 1].x,
                trail[size - 1].y,
                trail[0].x,
                trail[0].y,
                trailPaint.color,
                Color.TRANSPARENT,
                Shader.TileMode.MIRROR
            )

canvas.drawPath(trailPath, trailPaint)

The issue here is that the bounds for the shader are based on the positions of the front and back most points in the path, so when the particle turns back on itself, the shader no longer covers the middle of the path. An example of this occuring can be seen here: https://i.imgur.com/obEShJ6.mp4

I have also tried painting each point on the path with increasingly transparent circles but these didn't give a continuous path which was similarly displeasing

https://i.stack.imgur.com/U8zZv.jpg

trailPaint.shader = LinearGradient(
                        point.x,
                        point.y,
                        trail[index + 1].x,
                        trail[index + 1].y,
                        ColorUtils.blendARGB(colour, Color.TRANSPARENT, (1 - (index.toFloat() / size))),
                        ColorUtils.blendARGB(colour, Color.TRANSPARENT, (1 - ((index.toFloat() + 1) / size))),
                        Shader.TileMode.CLAMP
                    )

                    canvas.drawCircle(point.x, point.y, trailPaint.strokeWidth / 2, trailPaint)

What other options do I have which will provide a result similar to the first picture, without the bouncing issue?

score 0 · Answer 1 · answered Feb 25 '21 at 15:00

In case anyone, like me, was struck with resolving this problem, I offer a solution. Thank you Alex for lighting the way. I took what you posted and treated the path as a sequence of straight lines and drew each with its own LinearGradient calculated according to its length and position out of total length. This worked because LinearGradient is, well, linear, and so it works for a straight line.

How to draw a path where the tail fades to transparent

1 Answers1