Animation for Clear Dead Frames button

[Oofky]

Description

This PR introduces animations when Clear Dead Frames is pressed.

The rationale for this is: Previously, when Clear Dead Frames is pressed, live frames and objects simply snap to their new positions. This can cause confusion for students because if frames look the same, then students may be confused which frames moved where. These animations give students an idea of the frames and objects moved when dead frames are cleared.

Note that while in general, animations in the CSE machine only play when control and stash is switched on, this animation plays even when control and stash is switched off. This animation will play every time Clear Dead Frames is pressed.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Code quality improvements

How to test

function foo() {
    function f(x) {
        let r = [1, "apple", () => 2];
        function g() {
            const y = list(1, () => 2);
            let k = [];
            return () => y[0];
        }
        return g;
    }
    return f;
}
foo()(4)();
foo()("a")()();

Notice that when Clear Dead Frames is pressed, an animation plays.

cleardeadframesanim.mp4

Checklist

• I have tested this code
• I have updated the documentation

[gemini-code-assist]

Code Review

This pull request implements the "Clear Dead Frames" animation for the CSE Machine, which shifts frames, text, and function objects to close gaps when dead frames are removed. Key additions include the ClearDeadFramesAnimation component, a utility to compute coordinate changes between states, and an AnimatedFnObject for function visualizations. Review feedback identified a race condition in the animation execution logic, a bug in the cleanup of function covers, a potential out-of-bounds access in the coordinate calculation utility, and the presence of debug console logs.

[gemini-code-assist]

Code Review

This pull request introduces a new animation for the 'Clear Dead Frames' action in the CSE Machine, which visually shifts remaining frames to fill gaps. It includes a new ClearDeadFramesAnimation component, utility functions to calculate coordinate changes, and updates to the animation system to support hiding specific elements during transitions. Feedback focuses on architectural concerns regarding the monkey-patching of Layout.draw, the potential for UI crashes due to hard errors in layout calculations, and the use of unstable React keys. Additionally, a regression was noted where removing a KonvaGroup breaks image export functionality, and a known text misalignment issue remains to be addressed.

[Oofky]

[This issue has been resolved already.]

After some testing, I am finding that some function objects and array units sometimes look very thick/white when animated. Through console.log, I identified that they are being animated multiple times because the objects have been added to their respective arrays (fnAnimations and frameAnimations) multiple times. This is unintended and looks ugly.

My laptop does not capture this very well on video, but it looks something like this (look at the function object in the middle):

cdfa_repeated.mp4

The code I used is:

function scale_stream(c, stream) {
    return stream_map(x => c * x, stream);
}

const C = pair(1, () => scale_stream(2, C));
eval_stream(C,5);

[martin-henz]

After some testing, I am finding that some function objects and array units sometimes look very thick/white when animated. Through console.log, I identified that they are being animated multiple times because the objects have been added to their respective arrays (fnAnimations and frameAnimations) multiple times. This is unintended and looks ugly.

My laptop does not capture this very well on video, but it looks something like this (look at the function object in the middle):

cdfa_repeated.mp4
The code I used is:

function scale_stream(c, stream) {
    return stream_map(x => c * x, stream);
}

const C = pair(1, () => scale_stream(2, C));
eval_stream(C,5);

Yes, this seems to be some kind of optical illusion. If the eyeballs get drawn rapidly close to each other, the movement is interpreted by our eyes as "fat" circles. Not sure if we should worry about this.

[Oofky]

Yes, this seems to be some kind of optical illusion. If the eyeballs get drawn rapidly close to each other, the movement is interpreted as "fat" circles. Not sure if we should worry about this.

I would argue that I don't think this is an optical illusion! This is because through checking console logs, I can confirm that there are multiple of the same animations playing (from the same origin position to the same destination position, of the same object).

I've made a commit fixing this by checking for duplicates before creating the animation. It visually looks correct now (there is certainly a visible difference), as the function objects and arrays now have uniform line thickness when animated. So this issue is fixed.

Stale

[martin-henz]

Yes, this seems to be some kind of optical illusion. If the eyeballs get drawn rapidly close to each other, the movement is interpreted as "fat" circles. Not sure if we should worry about this.

I would argue that I don't think this is an optical illusion! This is because through checking console logs, I can confirm that there are multiple of the same animations playing (from the same origin position to the same destination position, of the same object).

I've made a commit fixing this by checking for duplicates before creating the animation. It visually looks correct now (there is certainly a visible difference), as the function objects and arrays now have uniform line thickness when animated. So this issue is fixed.

Ah ok. Great!

[RichDom2185]

LGTM thanks!