Below is my (failed ) attempt at creating a simple 2D line graph that should update in real time. Over time (X-axis), the line should change as the Y values change. From the examples I found, this seems simple enough, but Iām lost on how to send updated Y values into the path array. Currently, the line is generated at the beginning of the scene instead of generating slowly over time
On mobile so cannot update PG. Doing y += 0.5 is not going to update the multiple y values in a vector in an array. Especially as these values once set are numbers not variables. You need to update both the path array and the line per frame render. To update line use the instance parameter Create Parametric Shapes - Babylon.js Documentation
So, the line is created from the points stored in the āmyPointsā array. If thatās correct, I understand that part. I can see how these points are initially generated to create the line when the scene starts.
If you donāt mind, going step by step would help me understand this better. If I wanted to start with no line, then generate a straight line over time, would I start with something like this? https://www.babylonjs-playground.com/#165IV6#3156
https://www.babylonjs-playground.com/#1EBCJY#3 Maybe helpful.
Line 57ā¦ inside the renderLoop (scene.registerBeforeRender)ā¦ we are making ANOTHER linesMesh every frameā¦ but notice that the 5th parameter in line 57ā¦ is the name of the original linesMesh (from line 37).
Lines 53/54 move boxes (position values) a little bit each frame, then line 56 calls a āupdate()ā function at line 40ā¦ which wipes and re-installs new path values, and then line 57ā¦ RE-DRAWS the linesMesh.
NOTE: The old path need not be āwipedā (line 41). You can instead adjust the old valuesā¦ without wiping.
Over and overā¦ the same linesMesh being drawnā¦ but lines 53-54ā¦ keep āvaryingā the Z-axis of the vector3-type box positions. Then update() keeps installing those new box positions into pathā¦ and then redraw again.
Math.cos() is a sine wave generatorā¦ and we are feeding that sine wave into box 1 and 2 z-positions, and then we update (erase and rewrite) the path array, and then draw yet againā¦ fast.
In a way, this playground is a continuously-updating line graph, yes? Continuously-updated linesMesh == success for you, right?
Study it carefullyā¦ do experimentsā¦ make changes, re-run, soon you will have success. You cannot damage that playground exampleā¦ make edits, do re-runs, make fresh savesā¦ show us URLās to your savesā¦ if you have questions.
I think you can turn this playground into a real-time live-updating line graphā¦ within a few hours. Good luck. (talkie, arenāt I?)
Thanks for the new example and detailed explanations. This example is actually easier to follow than the others, and I think I can convert it into a real-time graph based on what you and @JohnK are advising