[Sugar-devel] performance issues with Easeljs

[Walter Bender]

On Wed, Jun 22, 2016 at 5:01 PM, Gonzalo Odiard <godiard at gmail.com> wrote:

> The only tip I can imagine is use the cache in the different DisplayObjects
> to avoid redraw when not needed. In your case, probably group by toolbars,
> blocks, canvas and so, and not redraw all, but the group updated.
>
> Did you found this article?
>
> https://blog.toggl.com/2013/05/6-performance-tips-for-html-canvas-and-createjs/
>
>

Yes. I read that article.

Right now I am experimenting with using a separate Shape for each line. I
tried caching each of those shapes after the rendering is complete but it
didn't seem to help. Digging deeper.

>
>
> On Wed, Jun 22, 2016 at 5:52 PM, Walter Bender <walter.bender at gmail.com>
> wrote:
>
>>
>> On Wed, Jun 22, 2016 at 4:51 PM, Gonzalo Odiard <godiard at gmail.com>
>> wrote:
>>
>>> Hi Walter,
>>> Is this a problem with a modern browser, or using it on Android?
>>>
>>
>> Browser (Chrome is where I am testing)
>>
>>>
>>> Gonzalo
>>>
>>> On Wed, Jun 22, 2016 at 5:28 PM, Walter Bender <walter.bender at gmail.com>
>>> wrote:
>>>
>>>> I've been using Easeljs for Turtle Blocks JS and have for the most part
>>>> been ignoring the performance issues. It works really well for separating
>>>> the blocks, buttons, etc. from the actual graphics drawn by the Turtle. But
>>>> I am at the point where the turtle graphics performance is not adequate.
>>>>
>>>> The problem is, each time I draw, the accumulated rendering gets
>>>> redrawn, so over time, the turtle crawls along. Further, even when I first
>>>> start drawing, the performance is more than 100% slower than drawing
>>>> directly to the canvas.
>>>>
>>>> I'm doing what I think it recommended practice by Easeljs:
>>>>
>>>> turtleCanvas = new createjs.Shape();
>>>> stage.addChild(turtleCanvas);
>>>>
>>>> various calls of the sort:
>>>>
>>>> turtleCanvas.graphics.moveTo
>>>> turtleCanvas.grpahics.lineTo
>>>>
>>>> I've trted using cache to cache the shape, but that seems to be even
>>>> slower.
>>>>
>>>> Just writing to the canvas context is much faster, but I don't know how
>>>> to combine the two worlds.
>>>>
>>>> Any suggestions?
>>>>
>>>> The code in question is in turtle.js in
>>>> github.com/walterbender/turtleblocksjs/js
>>>>
>>>> -walter
>>>>
>>>> --
>>>> Walter Bender
>>>> Sugar Labs
>>>> http://www.sugarlabs.org
>>>> <http://www.sugarlabs.org>
>>>>
>>>> _______________________________________________
>>>> Sugar-devel mailing list
>>>> Sugar-devel at lists.sugarlabs.org
>>>> http://lists.sugarlabs.org/listinfo/sugar-devel
>>>>
>>>>
>>>
>>>
>>> --
>>> [image: photo]
>>> *Gonzalo Odiard*
>>> Lider de proyecto
>>> tel.: 4210-7748 | www.trinom.io    Av Calchaqui 4936· 2do Piso. Quilmes
>>> <http://www.facebook.com/trinomiosrl>
>>> <https://www.linkedin.com/company/trinom-io>
>>>
>>>
>>
>>
>> --
>> Walter Bender
>> Sugar Labs
>> http://www.sugarlabs.org
>> <http://www.sugarlabs.org>
>>
>
>
>
> --
> [image: photo]
> *Gonzalo Odiard*
> Lider de proyecto
> tel.: 4210-7748 | www.trinom.io    Av Calchaqui 4936· 2do Piso. Quilmes
> <http://www.facebook.com/trinomiosrl>
> <https://www.linkedin.com/company/trinom-io>
>
>


-- 
Walter Bender
Sugar Labs
http://www.sugarlabs.org
<http://www.sugarlabs.org>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.sugarlabs.org/archive/sugar-devel/attachments/20160622/e11f0988/attachment.html>