Paper.js: Path.simplify should be handled as a "background" task

Created on 11 Aug 2016  路  2Comments  路  Source: paperjs/paper.js

We're using paper.js as the drawing layer for a collaborative whiteboard tool in our product. On most machines (typically those with a lot of RAM), using the simplify method after free hand drawing is very fast. On some machines (usually 8GB or less of RAM), Chrome hangs while simplify is processing. In some cases, we've seen it cause Chrome to hang indefinitely. It definitely seemed to get worse earlier this year (perhaps some kind of Chrome changes?), and on some machines, it improves after the first call to simplify.

We have a rather complex Angular app, which we're confident is contributing to the issue. Trying to add more drawing while the first simplify is taking a few seconds to process also exacerbates the issue. The end result is that we might have to move away from using simplify - which would be a shame, because the result is fantastic, and smooth doesn't do nearly as good of a job.

Ideally, there'd be a way to run simplify async, where it doesn't block all other javascript processing (where it continues to break its processing every few segments), but takes a callback or returns a promise that would be called upon completion. We can deal with simplify taking a few seconds, but not with it blocking all other javascript execution.

Is this something that could be retrofitted into the current implementation?

Most helpful comment

This was exactly what I needed! I adapted that example into my code, and instead of often getting simplify unpredictably taking 500-2000ms to simplify even the simplest hand-drawn paths (with 10-50 segments), the processing time is down to 5-30ms for simple paths. Even drawing a really large one of about 2000 segments still only took 215ms. I'll have the people who were reproducing freezing issues try this tomorrow, but I'm pretty sure we'll have very good results.

I think the biggest gain there was that the Worker script didn't need anything BUT paper, so Angular/etc is all out of the picture. Very nice technique. I'd highly recommend updating the paper.js reference documentation to suggest this. Thank you!

All 2 comments

Since the beginning of 2016 Paper.js can be used in a Web Worker, so this is probably the best way to run simplify() asynchronously.

Here is an example on how to use Paper.js with Web Worker:
https://github.com/paperjs/paper.js/blob/d52a6f31074858ae6978ee872b5296b4241eb781/examples/Worker/Main.html

This was exactly what I needed! I adapted that example into my code, and instead of often getting simplify unpredictably taking 500-2000ms to simplify even the simplest hand-drawn paths (with 10-50 segments), the processing time is down to 5-30ms for simple paths. Even drawing a really large one of about 2000 segments still only took 215ms. I'll have the people who were reproducing freezing issues try this tomorrow, but I'm pretty sure we'll have very good results.

I think the biggest gain there was that the Worker script didn't need anything BUT paper, so Angular/etc is all out of the picture. Very nice technique. I'd highly recommend updating the paper.js reference documentation to suggest this. Thank you!

Was this page helpful?
0 / 5 - 0 ratings