Is it possible to connect a large number of lines or erase to a specific point?

Hi there. This is not a problem, but a question.

I’m creating an app that uses a map to show a line that shows what people have passed through. Draw multiple people (about 100 people) on one side.

You can set the time by moving the slider and connect the line from 0 seconds to the set time.

The data it holds is an array of {x, y}. It is arranged in tenths of a second increments. (For example, if the data is from “0 seconds to 30 minutes”, there is an array of 18,000 per person in length.)

I tried to connect the lineTo() of new PIXI.Graphics() several times to make this happen.

However, it is also possible to turn back time by moving the slider.

If you connect a line to a Graphics object with lineTo(), you can make more lines, but you can’t make them go back to an arbitrary line.

So I came up with a way to create a number of new PIXI.Graphics(), connect the object to the time, and display the objects up to the time set by the slider.

But this would require creating 18000 objects * 100 people of Graphics objects.

It’s easy to imagine that this will obviously have an impact on performance even before it’s implemented.

I can only think of a way to use Pixi this way. Will you help me?

I don’t know if it exists, but is it possible to give a name to, say, lineTo() and then remove it with that name?

Thank you.

pixi.js version: 5.2.1 Browser & Version: Latest chrome version OS & Version: Windows 10

[ivanpopelyshev]

I didnt have time to review it yet. Maybe I wont before next week 😦

[KagiJPN]

@ivanpopelyshev I did as I was told, debugging and doing my best. What we have found is that the value of “points” has changed.

Create a graphicsData object in “graphics.geometry.graphicsData.push()”

    for (var i = 0; i < 100; i++) {
        let graphics = new PIXI.Graphics();
        graphics.lineStyle(4, getRandomColor());
        viewport.addChild(graphics);

        graphicsArr.push({
            graphics: graphics,
            location: getRondomLocations()
        })

        //graphics.moveTo(graphicsArr[i].location[0].x, graphicsArr[i].location[0].y)
        graphics.geometry.graphicsData.push(new PIXI.GraphicsData(new PIXI.Polygon(),new PIXI.LineStyle(),new PIXI.LineStyle()))
    }

Manipulate the “graphicsData[0].points” and “graphicsData[0].shape” points and call “invalidate()”.

        for (var j = 0; j < 30; j++) {
            if (now > oldNow) {
                for (let i = 0; i < now - oldNow; i++) {
                    //graphicsArr[j].graphics.moveTo(graphicsArr[j].location[now - 1 - i].x, graphicsArr[j].location[now - 1 - i].y)
                    //graphicsArr[j].graphics.lineTo(graphicsArr[j].location[now - i].x, graphicsArr[j].location[now - i].y)
                    graphicsArr[j].graphics.geometry.graphicsData[0].points.push(graphicsArr[j].location[now - i].x)
                    graphicsArr[j].graphics.geometry.graphicsData[0].points.push(graphicsArr[j].location[now - i].y)
                    graphicsArr[j].graphics.geometry.graphicsData[0].shape.points.push(graphicsArr[j].location[now - i].x)
                    graphicsArr[j].graphics.geometry.graphicsData[0].shape.points.push(graphicsArr[j].location[now - i].y)
                }
                graphicsArr[j].graphics.geometry.invalidate();
                console.log(graphicsArr[j].graphics.geometry.graphicsData)
            } else if (now < oldNow) {
                for (let i = 0; i < oldNow - now; i++) {
                    graphicsArr[j].graphics.geometry.graphicsData[0].points.pop()
                    graphicsArr[j].graphics.geometry.graphicsData[0].points.pop()
                    graphicsArr[j].graphics.geometry.graphicsData[0].shape.points.pop()
                    graphicsArr[j].graphics.geometry.graphicsData[0].shape.points.pop()
                }
                graphicsArr[j].graphics.geometry.invalidate();
                console.log(graphicsArr[j].graphics.geometry.graphicsData)
            }
        }

I tried to implement it like this, but it doesn’t work.

Any little bit of help would be greatly appreciated.

https://jsfiddle.net/takeshi1234/yjstLrw8/2/

Thank you.