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

Question

Gabriela 2024-4-2

0
链接

此问题的直接链接

https://ww2.mathworks.cn/matlabcentral/answers/2101751-use-drawing-made-by-user-in-ui-axes-to-be-animated-onto-graph

评论： Gabriela 2024-4-4

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!

0 个评论
显示 -2更早的评论隐藏 -2更早的评论

请先登录，再进行评论。

请先登录，再回答此问题。

Answer 1

Anton Kogios 2024-4-2

0
链接

此回答的直接链接

https://ww2.mathworks.cn/matlabcentral/answers/2101751-use-drawing-made-by-user-in-ui-axes-to-be-animated-onto-graph#answer_1434876

编辑：Anton Kogios 2024-4-2

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!

9 个评论
显示 7更早的评论隐藏 7更早的评论

Anton Kogios 2024-4-2

在 MATLAB Online 中打开

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

Anton Kogios 2024-4-4

在 MATLAB Online 中打开

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 2024-4-4

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?

请先登录，再进行评论。

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

0 个评论
显示 -2更早的评论隐藏 -2更早的评论

采纳的回答

9 个评论
显示 7更早的评论隐藏 7更早的评论

更多回答（0 个）

另请参阅

类别

标签

Community Treasure Hunt

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

0 个评论 显示 -2更早的评论隐藏 -2更早的评论

采纳的回答

9 个评论 显示 7更早的评论隐藏 7更早的评论

更多回答（0 个）

另请参阅

类别

标签

Community Treasure Hunt

0 个评论
显示 -2更早的评论隐藏 -2更早的评论

9 个评论
显示 7更早的评论隐藏 7更早的评论