Clear Filters
Clear Filters

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

2 views (last 30 days)
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!

Accepted Answer

Anton Kogios
Anton Kogios on 2 Apr 2024
Edited: Anton Kogios on 2 Apr 2024
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!
Anton Kogios
Anton Kogios on 4 Apr 2024
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;
for i = 1:numel(lineData)
addpoints(animShape, xShape{i}+x-0.5, yShape{i}+y-0.5);
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 on 4 Apr 2024
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?

Sign in to comment.

More Answers (0)


Find more on Migrate GUIDE Apps in Help Center and File Exchange

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!