Displaying animation in UI Axes in app developer

I am struggling to display my animation of a boat in the UI Axes, I have tried many things but the animation is just displayed on the app and not in the axes. I am unsure of where to go from here.

When I turn the visibility of the UI Axes off, the animation is still there. I want the animation to dissapear as well.

Any help would be greatly appreciated.

Here is my code for the animation

  % Code that executes after component creation
        function startupFcn2(app)
            
            

            animateFrames();
            function animateFrames()
                animFilename = 'The_Empty_Boat.gif'; % Output file name
                firstFrame = true;
                framesPerSecond = 24;
                delayTime = 1/framesPerSecond;
               
                % Create the gif
                
                for frame = 1:48
                    drawframe(app,frame);
                    drawnow; % Update the UIAxes
                    fig = app.UIAxes.Parent;
                    fig.Units = 'pixels';
                    fig.Position(3:4) = [600,600]; % Adjust width and height of the figure
                    set(fig, 'WindowButtonDownFcn', @(src, event)[]); % Disable mouse interaction with the animation
                    im = getframe(fig);
                    [A,map] = rgb2ind(im.cdata,256);

                    if firstFrame
                        firstFrame = false;
                        imwrite(A,map,animFilename, 'LoopCount', Inf, 'DelayTime', delayTime);
                    else
                        imwrite(A,map,animFilename, 'WriteMode', 'append', 'DelayTime', delayTime);
                    end
                end
              
                  app.PressStarttoplaythegameLabel.Visible = "on";
                

            end
            function drawframe(app,f)
                % Number of frames
                nframes = 48;

                % Compute the trajectory "phase" based on the current frame
                phase_rad = f/nframes * 2*pi;

                % Draw the sea
                draw_sea(phase_rad)

                % Draw boat
                draw_boat(phase_rad)

                % Set axes limits
                xlim(app.UIAxes, [-1 1])
                ylim(app.UIAxes, [ 0 2])

                % Equal axes scaling
                daspect(app.UIAxes, [1, 1, 1])

                app.UIAxes.XTick = [];
                app.UIAxes.YTick = [];
                hold(app.UIAxes, 'off')
            end

            function draw_sea(phase_rad)
                % Use [-1 +1] to fill entire plot
                x = linspace(-1, 1, 50);

                % Evaluate sea equation with the phase to create the moving illusion
                [y, ~] = eval_sea_eq(x + phase_rad);

                % Plot area under curve
                area(app.UIAxes, x, y)
                hold (app.UIAxes, 'on')
            end

            function draw_boat(phase_rad)
                % Define some boat size parameters
                body_height = 0.1;
                body_span   = 0.4;
                sail_height = 0.2;

                % Boat "body"
                b_xy(1,:) = [-body_span/2 -body_span/2*1.2 body_span/2*1.2 body_span/2 ];
                b_xy(2,:) = [      0       body_height     body_height         0       ];

                % Boat "body" fold
                f_xy(1,:) = [b_xy(1,1)      0           b_xy(1,end)];
                f_xy(2,:) = [b_xy(2,1)  body_height     b_xy(2,end)];

                % Sail
                s_xy(1,:) = [  -0.1            0                       0.1         ];
                s_xy(2,:) = [body_height (body_height + sail_height) body_height   ];

                % Get the boat y position and inclination angle
                [y, psi_rad] = eval_sea_eq(phase_rad);

                % Get rotation matrix
                z_rot = get_z_rot(psi_rad);

                % Rotate boat parts
                b_xy = z_rot'*b_xy;
                f_xy = z_rot'*f_xy;
                s_xy = z_rot'*s_xy;

                % Move boat parts
                b_xy(2,:) = b_xy(2,:) + y;
                f_xy(2,:) = f_xy(2,:) + y;
                s_xy(2,:) = s_xy(2,:) + y;

                % Plot the boat
                fill(app.UIAxes, b_xy(1,:), b_xy(2,:), 'r')
                fill(app.UIAxes, f_xy(1,:), f_xy(2,:), 'r')
                fill(app.UIAxes, s_xy(1,:), s_xy(2,:), 'r')
                hold(app.UIAxes, 'off')
            end

            function [y, dydx] = eval_sea_eq(x)
                % Outputs sea coordinates and slope

                % Scale factor
                c = 0.5;

                % Use only harmonics (x, 2*x, 3*x, etc.) to create the infinity loop illusion
                y       = (sin(x)*0.5 +   0.4*sin(2*x + pi/6) +   0.3*sin(3*x + pi/3) +   0.1*sin(5*x) + 2) * c;
                dydx    = (cos(x)*0.5 + 2*0.4*cos(2*x + pi/6) + 3*0.3*cos(3*x + pi/3) + 5*0.1*cos(5*x) + 0) * c; % Derivative
            end

            function z = get_z_rot(psi_rad)
                % Outputs rotation matrix about z-axis
                z = [cos(psi_rad), sin(psi_rad)
                    -sin(psi_rad), cos(psi_rad)];
            end

[Voss]

Please upload your .mlapp file, using the paperclip button.

[Gabriela]

The app isn't saving into my documents and I don't know why. I have the file in MATLAB but not in the docuements on my laptop.

[Voss]

Maybe it's in the current working directory (i.e., the directory shown toward the top of the main MATLAB window, or returned by running pwd on the command line).

Or if you are using MATLAB Online, the mlapp will be somewhere in your MATLAB Drive folder.

Answer 1

[Voss]

"the animation is just displayed on the app and not in the axes"

I'm not sure what this means. I put your code into a script that creates the referenced components (uifigure, uiaxes, uibutton), and it runs fine (see attached). The sea and the boat appear in the axes, and a gif file is created.

"When I turn the visibility of the UI Axes off, the animation is still there. I want the animation to dissapear as well."

You'll have to set the visibility of the boat and sea as well. One way to do that is:

app.UIAxes.Visible = 'off'; % turn off the axes
set(get(app.UIAxes,'Children'),'Visible','off'); % turn off everything in the axes as well

[Gabriela]

when i start the app (a game) it works fine

the start button turns the visibility of the UI Axes off (as well as other buttons), however when pressed it looks like this

would i put the code you just typed into the main animation or in the code for the button?

[Gabriela]

i have put it into my code and it works! thank you so much!

Could you explain what the 'Children' part means? I am trying to understand how this function works

[Voss]

You're welcome!

To explain, essentially this gets whatever is in the uiaxes (lines, images, surfaces, whatever).

get(app.UIAxes,'Children')

So this

set(get(app.UIAxes,'Children'),'Visible','off');

sets the Visible property of all those things to 'off'.

See the Children property of a uiaxes:

https://www.mathworks.com/help/matlab/ref/matlab.ui.control.uiaxes-properties.html#d126e1988520

I did it this way because I don't have a direct handle to those graphics objects, because when your code creates those objects in the uiaxes (using the area() and fill() functions) the output from area() or fill() is not captured.

If you modified your code to capture those outputs, e.g.:

% Plot the boat

app.boat = [ ...

fill(app.UIAxes, b_xy(1,:), b_xy(2,:), 'r') ...

fill(app.UIAxes, f_xy(1,:), f_xy(2,:), 'r') ...

fill(app.UIAxes, s_xy(1,:), s_xy(2,:), 'r') ...

];

and

% Plot area under curve

app.sea = area(app.UIAxes, x, y);

(which requires adding boat and sea properties to your app) then you could modify the graphics objects corresponding to the boat and the sea later however you wish, including setting their visibility, but also changing their color or location or whatever.

[Gabriela]

Thank you!

[Voss]

You're welcome!