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.

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.

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. https://codepen.io/xtianus/pen/OJweLGG

Hmm, I thought about it some more. The only reason to use the D3 would be because it would create the right beezer curves i.e. smothing of the lines but not sure if I can do what I am talking about. First I need to get the pix and gsap part working first.

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

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. https://codepen.io/osublake/pen/ExPMgQq https://codepen.io/chrisgannon/pen/dypvKvR 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.

Hi, I would like to consult or hire for a short term contract for a particular use case I need with GSAP and I am thinking most likely PIXIJS because of it's webGL functionality. If you're really good please contact me and we can speak more about it.

This is awesome. Can I take D3 for example and create the SVG and convert that to a path for the motion plugin. Then can I pipe that into pixi for webgl performance.