CODEWITHSUNDEEP
javascriptcanvaspaperjs
Aron
Aron

Reputation: 9248

Why does my paperjs app take so much CPU power and slow down?

I have this Sketch. You can pilot the ship by using up to accelerate and left and right to rotate the ships orientation. (Although it doesn't always work on Sketch due to the inability to blur from the editor and so keypress events don't register in the canvas window)

Each frame it adds the point at the ship's current centroid to the full ship track. This all works fine and dandy. Problems set in after about 2 minutes or so - depending on your computer - of flying. Gradually the whole thing starts slowing down and the frame rate drops to visible levels. Initially I thought this is because each point needs to be stored in RAM and there are too many of them, but the tab's memory doesn't seem to go up noticeably. CPU usage does seem to rapidly rise to ~20% and generally stays there. Does anyone have an explanation or fix for this?

Upvotes: 2

Views: 596

Answers (1)

jusopi
jusopi

Reputation: 6813

Ok I did a little reading up on this. Your continuously adding to your ship.path in your frame tick callback. Try limiting the maximum size of your path like so: 

var MAX_SEGMENTS = 1000

ship.path.add(centroid(ship.shipPath));

function onFrame(event) {
    if (ship.path.length > MAX_SEGMENTS)
    {
        var d = ship.path.length - MAX_SEGMENTS
        ship.path.removeSegments(0, d)
    }

updated sketch

Upvotes: 2

Related Questions