search

jmoenig / Snap

a visual programming language inspired by Scratch
http://snap.berkeley.edu
GNU Affero General Public License v3.0
1.51k stars 745 forks source link

paint.js takes too much CPU usage #1095

Open gengshenghong opened 8 years ago

gengshenghong commented 8 years ago

Did anybody find that using the Paint Editor, try to paint lines with mouse move, the CPU usage is very high? It may make it very slow to draw if the computer is not powerful enough.

Check on internet and find below demo of how to draw with html5 canvas and it does not have this issue. http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

Try to profile SNAP in browser and it seems most of the CPU is used by idle and getImageData. I guess this is something related to the "world" stepping? It may refresh the whole world during paint editor running? Is it to avoid that? stop world stepping during drawing? Let me know if you have any idea to share. snap_profile

Thanks, Shenghong

gengshenghong commented 8 years ago

Is there any one with any comment? I appreciate.

Thanks, Shenghong

brianharvey commented 8 years ago

We aren't finding this a particular problem. Yes, a lot is always going on when Snap! is running. But being responsive all the time, even when you're in the paint editor, is how it's designed.

gengshenghong commented 8 years ago

@brianharvey Yes, but this will be a big problem when using snap on low-performance target, like Raspberry Pi (it is very slow and has bad experience, when you draw a line, the delay may be several seconds). Let me know if you have a workaround to slower the CPU usage. I do not need other stuff to be responsive when using paint editor (which should make sense for users). :)

Thanks, Shenghong

jmoenig commented 8 years ago

@gengshenghong fair point about low-performance computers. I've been checking out performance on a pretty low-powered Windows 10 stick PC that Brian has given me, and I'm pretty satisfied with Snap's performance on it. Firefox generally performes best on this low-powered device, followed by Chrome. Edge is usable but not much fun. The paint editor works fine under Firefox and Chrome, but isn't any fun in Edge on that device. So, a quick and surprisingly effective remedy is to set the PaintCanvas' noticesTransparentClick flag to true instead of the default false. This simple optimization for strictly rectangular morphs causes mouse-movements to only check for bounding box collision in that morph, and doesn't query the morph's bitmap data to check for non-alpha pixel-collision. I was surprised how much this simple little tweak improved the usability of the paint editor in Edge on a slow PC. That said I hardly noticed any difference in other browsers. Apparently there's something costly about accessing pixels in Edge.

I will push this tweak shortly, then I'd be interested if it also improves thing for you.

Again thanks for your profiling here!

jmoenig commented 8 years ago

I've just pushed the optimization in 91095af36fa6d54195a20735a6faf178e8e84e7a Now putting it online...

gengshenghong commented 8 years ago

@jmoenig Thank you very much for your analysis and optimization. I did the profile on windows PC with Chrome in fact. With the optimization, the overall CPU usage does not change but I do see the profile changes and most of time are spend in paint editor code itself, which is what I expected!

I'll do some testing on my Raspberry Pi later (sorry, it is not on my hand now) and feedback you the result soon. Hope the drawing can follow my mouse move on Raspberry Pi as more CPU will be available for drawing task with your optimization from my understanding.

Thanks, Shenghong

gengshenghong commented 8 years ago

@jmoenig I've tested on Raspberry and the "performance" does not improve obviously (but I think this optimization should save some CPU from profiling results). The CPU usage is very high on Raspberry and there is still some delay for the drawing. Other canvas-based drawing apps does not have this issue (example: http://www.imac.hu/), it is strange. I'll need to do some comparison and see how it can be optimized.

Thanks, Shenghong