Use drawing made by user in UI Axes to be animated onto graph

I am making a game in app developer. So far, I have made it so the user can draw their own boat (for the game) - this code is in a different app, but I can also upload it if need be.

I want to be able to save the users image that is created in the figure and then animate it on another graph (this would be in the same app).

I have a seperate app where I have made the graph animation which I will upload.

In this app (that I have uploaded) if you press the "Click to start!" button, you should see a sin graph being animated on the axes. I want to be display the user's drawing (a boat) onto the sin wave, so it looks like the boat is "creating" the graph. The code for the user being able to draw a boat I have saved in a different app.

Is it possible to do this?

Is it possible to have an image on the sine wave so it looks like the image is creating the wave?

Any help would be greatly appreciated!

Answer 1

[Anton Kogios]

I've attempted this with the MATLAB logo as the image which is 'creating' the sine wave (see attached, the PNG file has to be in the same folder as the app). The problem I faced is the size of the image (~50x50) is greater than the size of a sine wave (~2x6), so I had to make the sine wave bigger and just change the axis ticks and tick labels.

Hope that helps and points you in the right direction!

[Gabriela]

In my code before the user creates an image in the UI Figure. I wanted to ask how can I use that image that the user makes to be on the sine wave rather than a PNG file? this is because every time the app is run a different image will be used, so I am wondering how to code this. Thank you for the answer though!

[Anton Kogios]

I'm not sure how you are getting your user to create their image since you haven't incuded this part of the app. You should be able to apply similar principles to what I provided in my answer, but if you can't figure it out, please include the code for how the image is created so I can take a look at it.

[Gabriela]

This is how the drawing is created by the user.

For my game this will be all in one app, but I don't want to upload that file because it has the code for my entire project.

Would it be possible to use this drawing created by the user instead?

Thank you!

[Gabriela]

also, I don't have the modifications that you made in my app, everything is still the same, I'm not sure how I can see the changes you have made?

[Anton Kogios]

Thanks for that. I modified your draw_demo.mlapp to export the app.my_lines data so that I could import it into the main app. Since I believe you just have it in one big app, you should be able to skip this and directly read the app.my_lines data, but I modified the bdf_Done function for this:

function bpf_Done(app, event)
    app.is_drawing = false;
    app.MATLABDrawingAppUIFigure.WindowButtonMotionFcn = [];
    app.MATLABDrawingAppUIFigure.WindowButtonDownFcn = [];
    app.MATLABDrawingAppUIFigure.WindowButtonUpFcn = [];

    lineData = app.my_lines;
    save('shapeData.mat','lineData') % save to shapeData.mat file

    set(app.MATLABDrawingAppUIFigure, 'WindowButtonDownFcn', @(src, event)[]); % Disable mouse interaction once the boat is drawn and the user presses done
    app.ClearButton.Enable = "off";
    app.DrawButton.Enable = "off";
end

In testing_graph_animation.mlapp, I modified only the ClicktostartButtonPushed2 function by adding another animated line and extracting the X and Y data from the shape that had been drawn by the user.

function ClicktostartButtonPushed2(app, event)
    app.UIAxes.Visible = "on";
    app.Answer.Visible = "on";
    app.TypeyourAnswerHereLabel.Visible = "on";
    app.CheckyourAnswerButton.Visible ="on";
    app.ClicktostartButton.Visible = "off";
    
    % Disable mouse interaction when graph is being animated and after it has been drawn
    set(app.UIFigure, 'WindowButtonDownFcn', @(src, event)[]);
    
    % Create an animated line objects
    animLine = animatedline(app.UIAxes);
    animShape = animatedline(app.UIAxes);
    
    % Read shape data & rescale
    load shapeData.mat
    xShape = lineData.XData;
    yShape = lineData.YData;
    
    % Optional rescaling of shape (to shrink)
    % xShape = rescale(xShape,0,0.5,"InputMax",1,"InputMin",0);
    % yShape = rescale(yShape,0,0.5,"InputMax",1,"InputMin",0);
    
    % Set the x-axis limits
    xlim(app.UIAxes, [0, 2*pi]);
    ylim(app.UIAxes, [-1, 1]);
    
    % Animation loop
    for x = linspace(0, 2*pi, 100)
        % Calculate the y-value for the sine function
        y = sin(x);
    
        % Add the new point to the animated line
        addpoints(animLine, x, y);
    
        clearpoints(animShape)
        addpoints(animShape, xShape+x-0.5, yShape+y-0.5);
    
        % Update the plot
        drawnow
    
        % Pause for a short duration to control the animation speed
        pause(0.02);
    end
    
end

[Gabriela]

thank you!! that is very useful!

I have a few more questions if that's ok.

When I do a drawing, it only uses the first line I make in the graph, rather than the whole image.

Is it possible for the drawing to be used when the "Done" button is pressed, rather than when the first line is drawn?

Also, is it possible to save the colour that was used in the drawing? when I use red in the drawing it is changed to black in the graph animation.

[Gabriela]

also, do you know how it would be possible to close the figure where the drawing is made?

I have tried to create a button with a callback to close it, but instead of closing that figure it closes the whole app.

[Anton Kogios]

It's a bit hard to answer these questions without your full code but I'll do my best.

When I do a drawing, it only uses the first line I make in the graph, rather than the whole image.

You have to cycle through the number of lines you drew and add them. I was able to do this by changing:

for i = 1:numel(lineData)
    xShape{i} = lineData(i).XData;
    yShape{i} = lineData(i).YData;
end

and

for i = 1:numel(lineData)
    addpoints(animShape, xShape{i}+x-0.5, yShape{i}+y-0.5);
end

Is it possible for the drawing to be used when the "Done" button is pressed, rather than when the first line is drawn?

I think the first question may answer this, but otherwise I'm not sure what you mean without looking at your full code.

Also, is it possible to save the colour that was used in the drawing? when I use red in the drawing it is changed to black in the graph animation.

You should be able to extract the color data from lineData.Color, and parse that in the animatedLine.

also, do you know how it would be possible to close the figure where the drawing is made?

This depends how you've set it up. Have you tried searching it up? This or this may help.

[Gabriela]

Thank you.

I'm referring to the code I have uploaded.

Is it possible to save the entire image when the "done" button is pressed? Because I can't predict how many lines the user will draw. I don't really understand the code that saves the line so i'm not sure how to modify it.

When I run the apps with your modifications, I drew this

but in the graph app only this was shown

what modifications are needed to show the entire image?

Yes, I have looked it up but i haven't found anything that relates to the problem i am having.

For example, how would I close this window there the user can draw without closing the entire app?