Canvas masking causes RangeError: Maximum call stack size exceeded

[gobigfoot]

Animate CC creates a new mask_graphics for every frame that a mask is tweened.

This creates a massive chain of method calls and a massive amount of bloat to the file size.

Below illustrates an ultra simple 10 frame tween on a mask. If this mask is extended out to 1000 frames it will crash IE. At 3000 frames it will crash Chrome. There has to be a better method of generating these masks.

A simple tween

    // Layer 1

    this.shape = new cjs.Shape();

    this.shape.graphics.f("rgba(0,0,255,0.659)").s().p("Aj5D6IAAnzIHzAAIAAHzg");

    this.shape.setTransform(25, 25);

    this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

becomes

// Layer 1 (mask)

var mask = new cjs.Shape();

mask._off = true;

var mask_graphics_0 = new cjs.Graphics().p("ATiLGIAAn0IH0AAIAAH0g");

var mask_graphics_1 = new cjs.Graphics().p("AQeMVIAAq0ILLAAIAAK0g");

var mask_graphics_2 = new cjs.Graphics().p("ANZNkIAAtzIOiAAIAANzg");

var mask_graphics_3 = new cjs.Graphics().p("AKVO0IAAw1IR5AAIAAQ1g");

var mask_graphics_4 = new cjs.Graphics().p("AHRQDIAAz1IVQAAIAAT1g");

var mask_graphics_5 = new cjs.Graphics().p("AEMRSIAA21IYnAAIAAW1g");

var mask_graphics_6 = new cjs.Graphics().p("ABIShIAA51Ib+AAIAAZ1g");

var mask_graphics_7 = new cjs.Graphics().p("Ah7TwIAA81IfUAAIAAc1g");

var mask_graphics_8 = new cjs.Graphics().p("AlEU8IAA/3MAirAAAIAAf3g");

this.timeline.addTween(cjs.Tween.get(mask)

.to({graphics:mask_graphics_0,x:175,y:71}).wait(1)

.to({graphics:mask_graphics_1,x:176.9,y:78.9}).wait(1)

.to({graphics:mask_graphics_2,x:178.7,y:86.8}).wait(1)

.to({graphics:mask_graphics_3,x:180.6,y:94.8}).wait(1)

.to({graphics:mask_graphics_4,x:182.5,y:102.7}).wait(1)

.to({graphics:mask_graphics_5,x:184.3,y:110.6}).wait(1)

.to({graphics:mask_graphics_6,x:186.2,y:118.5}).wait(1)

.to({graphics:mask_graphics_7,x:188.1,y:126.4}).wait(1)

.to({graphics:mask_graphics_8,x:189.5,y:134}).wait(1));

[Preran]

I have no experience with code, but I just googled for this error message and found a link that could probably provide you with insights

javascript - "RangeError: Maximum call stack size exceeded" Why? - Stack Overflow

[Offsign]

You may have misunderstood the OP - the example code posted is auto generated by the tool, not something OP wrote. The code generated by the tool causes the error.

[Preran]

Am terribly sorry about that. This isn't my area of expertise. I was trying to see if I can help. I am hoping that the experts here have a solution. Thank you for correcting me.

[ClayUUID]

Interesting. I managed to get a tween up to about 5000 frames in IE11 before it died with an "Out of stack space" error. Perhaps scene complexity is a factor.

But really now... what practical use would anyone ever have for a 1000+ frame mask tween?

[gobigfoot]

This particular animation is being used as part of a larger simulation where based on a value passed in the clip would go to a specific frame. These animation were originally created in flash and are being converted to canvas. Not all of our artists are code savvy developers.

Scene complexity isn't really an issue. I've duplicated the issue with a single image on screen and a square unmasking that image. I'm running a top end mac pro with 32Gb Ram.

Animate is basically generating a keyframe for every frame instead of tweening when masks are used. Animate then creates a timeline with 1000 keyframes by chaining / piping which creates a deep callstack. The 'problem' can be 'fixed' by breaking the tween into smaller sections and placing them on their own layers.I could also choose to use createjs to attach a mask and control it with code.

I'm not here looking for a work around.  I'm attempting to draw attention to a problem with Animate's output.

[Preran]

You can report your observations to the team directly using Feature Request/Bug Report Form for their investigation.

Thanks,

Preran

[gobigfoot]

Submitted bug report

[Lyla123]

Does someone have an answer for that yet? I have a similar problem. My animation generated about 1000 frame tween, and it crashs on Chrome with 'Maximum call stack size exceeded' error, but in Firefox works properly.

[gobigfoot]

No solution and no response to my bug report. I broke my tween down into multiple segments where each masked section exists on a separate layer.

[markp8938076]

I hit this error when using large tweens because the Javascript code puts each tween change on the same line.  I had a longer animation (2 min) with 4000 frames and an object moving throughout.  The JS code had a line that was over 120,000 characters long.  In simple terms Chrome (and other browsers) can't handle that much code on the same line.  If you break up your tweens like you suggested the code also breaks them up into different lines.  The Adobe team can easily fix this problem by checking how many frames a tween has then simply used multiple lines in the Javascript code.

[ClayUUID]

Are you perhaps under the impression that posting the exact same question in two threads will solve your problem twice as fast?

[markp8938076]

Nope, I don't need Adobe to fix the problem.  If someone else runs into the error they might only find/read 1 of the 2 posts, I thought I would post in both just in case.