Help on a new project for creating a real-time data drive graph. I am thinking I need GSAP motionpathplugin and PIXIJS but not sure

[xtianus]

Hi I am NOOB here so please don't bite too hard . Lot's of development experience not so much GSAP, WEBGL, PIXI experience. 

So, i've decided to jump in and believe that GSAP is the recipe I need based on the all of the research i've done. 

 

Some cool pens I've seen that relate to my need are these. One codepen is showing up on the bottom so sorry couldn't get them one after the other. 

 

See the Pen ExPMgQq by osublake (@osublake) on CodePen

 

 

Now, with that said I don't believe I can achieve what I need with straight SVG or even canvas as there will be too many plot points incoming. I think PIXI runner may help to solve the incoming data stream. As well, PIXI uses webGL and I think that combined with a port-view / canvas with GSAP will get me to the right place. 

 

The requirement need is to plot an X,Y graph of incoming data over a period of time. about 100 - 500(worry about that later) per second of streaming data points. 

 

My idea, is that I will use GSAP pixi plugin to create the animation (questions about this later). The plugin, in my mind, will allow for GSAP type "creation" and PIXI will provide the webGL type of rendering. Along with the montionPathPlugin that will allow me to adhere to an incoming path stream of vector points to animate onto the canvas more easily than not. So in short, GSAP create PIXI push to screen using webGL = performant real-time graph. 

 

For now that would get me up and going. So I have some questions. 

 

1. Am I thinking of this correctly? Does the GSAP pixi plugin allow for animation that is more GSAP with the idea that pixi is more the renderer agent? Or is it the opposite GSAP only helps pixi but pixi is more of the animation. 

1a. Here is why I ask and this is an important thing for me to understand. Pixi probably is not great for doing a graph animation PERHAPS. When I look at that code pen that are SVG renders they are so silky and smooth. I want that. But can I do that with not using SVG but rather Pixi because if it's the rendered than it has to be rendering something. if I draw a grap that the line goes up like a D3 animation of data plots and is smooth, clear and appealing that is the effect I want. I don't think and perhaps I am very wrong, that I want a sprite that is doing the animation as opposed to the SVG straight vector graphic. 

I hope I am making sense with question 1. 

 

2. Based on question 1. Does my recipe seem plausible and what is the actual rendering that I will be going after in terms of the thing that the user sees. I am thinking it is absolutely not SVG so what is it exactly that I am trying to build? Either a sprite or a line stroke from PIXI? If my 2 options are either a stroke line or a sprite I am thinking the sprite will be better? But is it? How can I get the line not to be jagged, clean and clear like the code pens of the SVG? The line stroke seems like perhaps that is not a great idea. Imagine if someone took a digital pen and the were doing up and down strokes with an Apple/Surface pen versus in 1992 doing it with a mouse and a bitmap editor. See/imagine the difference there. 

 

3. Maybe I am overthinking this. Perhaps 100 data points per second isn't all that bad and SVG wouldn't be an issue. 500 has to be too much to be performant. Pixi has this culling thing where you can only concern yourself of what is visible on the canvas. Perhaps there could be this concept here. 

 

4. If I am not thinking of something or should explore something else please let me know. 

 

Your help is appreciate and I look forward to being a a greensock expert some day. 

 

See the Pen dypvKvR by chrisgannon (@chrisgannon) on CodePen

[Rodrigo]

Hi,

 

I don't think there is a simple way to answer your questions because they're not super simple. If you want to draw lines indeed using either Canvas or WebGL will be far more performant than SVG. How much? Who knows you'll have to test, maybe SVG will be able to handle simple straight lines drawings and you might not need canvas/WebGL, so the answer for that is: test, test and test.

 

Indeed you're right that PIXI is not meant for drawing and complex animations, is meant for rendering that's where it shines. GSAP is for animating and tweening that's where it shines. You mix them and you get the best of both worlds without any question. The PIXI Plugin will allow you to access in a simple and clean way, properties of PIXI elements but it won't help you with drawing lines, you can use GSAP to tween values and onUpdate callback or GSAP ticker to update the graphics on PIXI, the good thing is that in PIXI you  don't have to clear the entire canvas just the particular graphic as shown in this example:

https://pixijs.io/examples/#/graphics/dynamic.js

 

This also boils down to those 100-500 data points per second are 500 different graphics or a finite rather manageable amount of graphics. Less graphics could mean that SVG might be able to handle this regardless of the number of updates, more graphics could mean that WebGL is the best option.

 

This is a very deep topic since we should consider a very large amount of options and variables so a straight forward direct answer is unlikely. My recommendation would be to explore the SVG route first and then see how that goes. If you have issues, then you'll have to port that to PIXI and draw the lines/curves using a method for that. Of course if you're unsure about it you can start right away with WebGL and secure performance right off the bat without any worries.

 

Good luck with your project. If you have GSAP related questions let us know and we'll gladly guide you through the process and remember to include a minimal demo.
Happy Tweening!

[xtianus]

Thanks Victor I appreciate your answer. From what you said I have one last question before I begin my plot of destruction. I'll post demos along with my work.

 

If I try to go the PIXI route to render. Can I achieve an output like the code pens. My graphics are just as simple as those lines. No starts or shimmer so more like the blue example of just lines coming into a graph on an X,Y axis. Of course, they'll be flying in but no more complicated than that. Perhaps I was thinking I would put a dot on the end. Is that achievable with using the GSAP plugin for pixi?

 

My confusion is knowing if pixi can render nice lines that aren't just jagged points going up and down. Or with the plugin is it GSAP that is doing it by directing Pixi

[xtianus]

I've included a codepen. It's a demo of a rendered webGL graph that is built with PIXI.JS . I used the GSAP pixiPlugin but I am not sure what use it is doing for me there. However, perhaps it could. 

 

Explanation of the codepen. What it does is illustrate how bad drawing lines are and how they can be improved with smoothing. explicitly the new pixi smoothing plugin. The only thing I don't, per se, like about it is that it renders point to point. you can't be too aggressive with the fps or it will make you literally dizzy. I don't know what about the smoothing does that but on snapshots you kind kind of tell why especially while the line is thinner at 2 or 1.  

 

The D3 example shows how the line is drawn. So what I am wondering is if I can render drawing with the pixi canvas draw via webGL via GSAP. I don't think so but thought I'd ask. 

 

The other thing I don't think I didn't do very well is the quadraticCurveTo. It's OK I think but I kind of wish it would leave the amplitudes alone and only curve our the in between. If I could do that I'd think i'd be happy. Perhaps add a tension perimeter. I'll work on that next. 

 

For now any suggestions appreciated. 

 

See the Pen OJweLGG by xtianus (@xtianus) on CodePen

[Cassie]

Why can't it be SVG?

If you're just animating in a graph line that runs between some points (sorry if I misunderstand) this sounds ideal for drawSVG.

Are you continuously calculating and. updating values in such a way that the SVG would have to constantly re-render or do you have all the values necessary at the beginning?

[xtianus]

hi @Cassie It is not something calculating so you're right that it's just points. However, It's a lot of point per second. 128 - 512. So running that over time would seem not good for the environment. To me, that would really bog down on a streaming data service that is slamming in data at that rate. For 10 minutes that might be too much data. Maybe i'm wrong. I could be wrong because the only data that is neccessary is what's on the screen. So even if it where for an hour the view is what's important so the passing data can "cull" off per se. But what that does to the system of the data that is there I don't know. This is new for me. 

[Cassie]

Ok so the points/data is changing every second. Then pixi might be best. Fair enough!

[xtianus]

We spoke to the engineers and you brought up a good point. We probably shouldn't be sending data so frequently in a stream over a network even through a websocket. So perhaps, 1 second intervals with chunks of data might make more sense. This should also alleviate the network but still not technically a solve on the data volume over time issue. I will keep posting my work to let you know what I came up with.