Improving Performance by reusing graphics objects

Hi I am using Pixi.js to visualise pathfinding algorithms. Link: https://pf-algo-viz.org/ Now this involves drawing lot of similar graphics objects(circle, rectangle, etc) at same position(with different colours). Currently, I am generating a new graphics objects against each node. To optimise this, I am thinking of reusing the graphics objects at same position and only changing its attributes. This would ensure that fewer graphics objects are created. But the problem is as per current implementation, each node has graphics container which in turn has children(rectangles, circles, lines, etc) If I reuse the graphics object in another node’s graphics container, it would first remove it from the previous container(since pixi objects can only stay at one place - looked into source code).

I am confused whether to use different container for different nodes or just add everything in stage and update attributes(colours, borders) of graphic objects(rectangle, circle) there since then, I won’t be using addChild and only updating attributes of existing object. This would decrease maintainability of the code. But I think this would significantly improve performance. I have following questions:

1. Would calling of removeChild whenever addChild is called would slow the performance?
2. I read that it is better to use containers to have separate context. Should I continue keeping separate containers for each node or just draw everything on one main canvas? I want to avoid this as this would cause serious refactoring of project.
3. Are there other ways in which I can improve the performance like reusing texture or anything else?

I would really appreciate suggestions for improving performance.

P.S. This is an open-source project. Please feel free to look into it.

[krnbatta]

P.S. Obligatory comment after this was asked for 100 times. If you want complete explanation with all the code of possible ways - sponsor a book. If you want just simple API - sponsor the plugin.

I really liked PIXI.js and you guys support. I don’t understand graphics much but still trying to wrap my head around. I am donating to PIXI. This is the first time I have ever donated to any open source project 😃

[ivanpopelyshev]

We are working on ability to make any regular shapes (circles, stars, e.t.c.) like sprites, with same performance. You can assign a bounty on that task , like it was done with https://github.com/pixijs/pixijs/issues/7511

1. children is array. You know how splice works? Then you can estimate it.
2. to have separate… what? what do you mean context? Containers exists to apply their transforms to children and to add/remove elements at the same time.
3. Many. Choosing particular optimization means you already know where your bottleneck is and how new algorithm works. so, whats your bottleneck?