Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Creating an Animated Cardiograph line


forleafe
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 :)

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...