Creating an Animated Cardiograph line

[forleafe]

I'm looking to create an effect like this:

https://codepen.io/allusis/pen/bJyud

With CSS and HTML5, it looks like he was able to somehow able to animate the change in opacity of his vector line. I'm not really sure how I would achieve this same effect with PixiJS. Any suggestions?

[ivan.popelyshev]

First, you can generate giant texture of that thing and store it somewhere.

If you pass it to PIXI.Texture, you can manipulate its frame. However, i see that you need alpha, right?

You might want to make a rope out of it:  http://pixijs.io/examples/#/demos/mouse-trail.js , that approach doesnt require cardiograph texture, only a gradient texture.

[forleafe]

The rope code might be a bit above me. I'm having trouble wrapping my head around it. I think that's mainly because there's a lot of stuff in there that doesn't have much to do with what I need.

The giant texture idea sounds okay. To make things clear, you're basically saying take the cardiograph line and turn the whole thing into a sprite? Then I can manipulate it's frame with this?

http://pixijs.download/release/docs/PIXI.Texture.html#frame

How do I call that? sprite.frame.set(x,y) ? 

and then couldn't I control it's transparency with an alpha mask or something?

[ivan.popelyshev]

Well, you can make different alpha by using multiple sprites that use different textures that all are same part as a texture. 

Something like that:

sprite.texture.frame.x = 10;
sprite.texture.frame.width = 100;
sprite.texture._updateUvs(); //or updateUVs, i dont remember

> The rope code might be a bit above me. I'm having trouble wrapping my head around it. I think that's mainly because there's a lot of stuff in there that doesn't have much to do with what I need.

Ok, one more variant for you: its possible to make a rope from a plugin https://github.com/gameofbombs/pixi-heaven , and control its alpha and other colors: https://gameofbombs.github.io/examples-heaven/#/mesh/rope-colored.js

const points - rope.points;
for (let i = 0; i < points.length; i++) {
   points[i].color.alpha = 0.5 + Math.sin(i / points.length + time);//some math
}

In any case you have to study code of pixi. Just choose somethign and dig in