{"id":11151,"date":"2019-11-10T09:00:59","date_gmt":"2019-11-10T14:00:59","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/?p=11151"},"modified":"2020-10-05T03:08:00","modified_gmt":"2020-10-05T07:08:00","slug":"animating-mathematical-functions","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2019\/11\/10\/animating-mathematical-functions\/","title":{"rendered":"Animating mathematical functions"},"content":{"rendered":"<div class=\"content\"><p><a href=\"http:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/869871\">Jiro<\/a>&#8216;s Pick this week is <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/71862\">Plot Gui 2d<\/a> by <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/11611379\">Silas Henderson<\/a>.<\/p><p>This entry is one of many interactive apps that Silas has created, and I had been quite intrigued by many of his entries. I chose to highlight &#8220;Plot GUI 2d&#8221; because of its simple, but useful application for teaching mathematical concepts. Visualization helps students understand concepts, and animation increases that understanding.<\/p><p>Silas includes a YouTube video showing the app in action, so I will simply reference it here.<\/p><p> \n\n<a title=\"https:\/\/www.youtube.com\/embed\/eGxlSe3YKwg (video no longer works)\">https:\/\/www.youtube.com\/embed\/eGxlSe3YKwg<\/a>\n\n<\/p><p>A few highlights regarding the code:<\/p><div><ul><li>Silas uses <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/matlab_prog\/local-functions-in-scripts.html\">local functions<\/a> in his <b>script<\/b>. This is a relatively new feature introduced in R2016b, so I&#8217;m happy to see that being used.<\/li><li>He uses <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/matlab.ui.figure-properties.html#buiwuyk-1-KeyPressFcn\">&#8220;KeyPressFcn&#8221;<\/a> property of the figure to capture key presses, which control the zooming and panning of the graph.<\/li><li>He animates the lines by changing the <tt>XData<\/tt> and <tt>YData<\/tt> properties of the line objects, instead of re-plotting the lines. This is the recommended way of doing efficient animation. <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/ref\/animatedline.html\"><tt>animatedline<\/tt><\/a> is another feature that could be useful.<\/li><\/ul><\/div><p>I have one suggestion for Silas. He wrote this using a script, with a global variable to be shared amongst some of his local functions. For such purpose, I prefer using a function, with <a href=\"https:\/\/www.mathworks.com\/help\/matlab\/matlab_prog\/nested-functions.html\">nested functions<\/a>. When you do that, the life cycle of the app is with the figure, so it will continue to work so long as the figure is open, even if you do a &#8221; <tt>clear all<\/tt> &#8221; in the command line.<\/p><p><b>Comments<\/b><\/p><p>Give it a try and let us know what you think <a href=\"http:\/\/blogs.mathworks.com\/pick\/?p=11151#respond\">here<\/a> or leave a <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/71862#comment\">comment<\/a> for Silas.<\/p><script language=\"JavaScript\"> <!-- \n    function grabCode_6deab01ce6d9405e85aa966195919e27() {\n        \/\/ Remember the title so we can use it in the new page\n        title = document.title;\n\n        \/\/ Break up these strings so that their presence\n        \/\/ in the Javascript doesn't mess up the search for\n        \/\/ the MATLAB code.\n        t1='6deab01ce6d9405e85aa966195919e27 ' + '##### ' + 'SOURCE BEGIN' + ' #####';\n        t2='##### ' + 'SOURCE END' + ' #####' + ' 6deab01ce6d9405e85aa966195919e27';\n    \n        b=document.getElementsByTagName('body')[0];\n        i1=b.innerHTML.indexOf(t1)+t1.length;\n        i2=b.innerHTML.indexOf(t2);\n \n        code_string = b.innerHTML.substring(i1, i2);\n        code_string = code_string.replace(\/REPLACE_WITH_DASH_DASH\/g,'--');\n\n        \/\/ Use \/x3C\/g instead of the less-than character to avoid errors \n        \/\/ in the XML parser.\n        \/\/ Use '\\x26#60;' instead of '<' so that the XML parser\n        \/\/ doesn't go ahead and substitute the less-than character. \n        code_string = code_string.replace(\/\\x3C\/g, '\\x26#60;');\n\n        copyright = 'Copyright 2019 The MathWorks, Inc.';\n\n        w = window.open();\n        d = w.document;\n        d.write('<pre>\\n');\n        d.write(code_string);\n\n        \/\/ Add copyright line at the bottom if specified.\n        if (copyright.length > 0) {\n            d.writeln('');\n            d.writeln('%%');\n            if (copyright.length > 0) {\n                d.writeln('% _' + copyright + '_');\n            }\n        }\n\n        d.write('<\/pre>\\n');\n\n        d.title = title + ' (MATLAB code)';\n        d.close();\n    }   \n     --> <\/script><p style=\"text-align: right; font-size: xx-small; font-weight:lighter;   font-style: italic; color: gray\"><br><a href=\"javascript:grabCode_6deab01ce6d9405e85aa966195919e27()\"><span style=\"font-size: x-small;        font-style: italic;\">Get \n      the MATLAB code <noscript>(requires JavaScript)<\/noscript><\/span><\/a><br><br>\n      Published with MATLAB&reg; R2019b<br><\/p><p class=\"footer\"><br>\n      Published with MATLAB&reg; R2019b<br><\/p><\/div><!--\n6deab01ce6d9405e85aa966195919e27 ##### SOURCE BEGIN #####\n%%\n% <http:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/869871 Jiro>'s\n% Pick this week is\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/71862 Plot Gui 2d>\n% by <https:\/\/www.mathworks.com\/matlabcentral\/profile\/authors\/11611379\n% Silas Henderson>.\n%\n% This entry is one of many interactive apps that Silas has created, and I\n% had been quite intrigued by many of his entries. I chose to highlight\n% \"Plot GUI 2d\" because of its simple, but useful application for teaching\n% mathematical concepts. Visualization helps students understand concepts,\n% and animation increases that understanding. \n% \n% Silas includes a YouTube video showing the app in action, so I will\n% simply reference it here.\n%\n% <html> <iframe loading=\"lazy\" width=\"560\" height=\"315\"\n% src=\"https:\/\/www.youtube.com\/embed\/rCGKeIVr-II\" frameborder=\"0\"\n% allow=\"accelerometer; autoplay; encrypted-media; gyroscope;\n% picture-in-picture\" allowfullscreen><\/iframe>\n% <\/html>\n%\n% A few highlights regarding the code:\n%\n% * Silas uses\n% <https:\/\/www.mathworks.com\/help\/matlab\/matlab_prog\/local-functions-in-scripts.html\n% local functions> in his *script*. This is a relatively new feature\n% introduced in R2016b, so I'm happy to see that being used.\n% * He uses <https:\/\/www.mathworks.com\/help\/matlab\/ref\/matlab.ui.figure-properties.html#buiwuyk-1-KeyPressFcn \"KeyPressFcn\"> property of the figure to capture key presses,\n% which control the zooming and panning of the graph.\n% * He animates the lines by changing the |XData| and |YData| properties of\n% the line objects, instead of re-plotting the lines. This is the\n% recommended way of doing efficient animation.\n% <https:\/\/www.mathworks.com\/help\/matlab\/ref\/animatedline.html\n% |animatedline|> is another feature that could be useful.\n%\n% I have one suggestion for Silas. He wrote this using a script, with a\n% global variable to be shared amongst some of his local functions. For\n% such purpose, I prefer using a function, with\n% <https:\/\/www.mathworks.com\/help\/matlab\/matlab_prog\/nested-functions.html\n% nested functions>. When you do that, the life cycle of the app is with\n% the figure, so it will continue to work so long as the figure is open,\n% even if you do a \" |clear all| \" in the command line.\n%\n% *Comments*\n%\n% Give it a try and let us know what you think\n% <http:\/\/blogs.mathworks.com\/pick\/?p=11151#respond here> or leave a\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/71862#comment\n% comment> for Silas.\n\n##### SOURCE END ##### 6deab01ce6d9405e85aa966195919e27\n-->","protected":false},"excerpt":{"rendered":"<p>Jiro&#8216;s Pick this week is Plot Gui 2d by Silas Henderson.This entry is one of many interactive apps that Silas has created, and I had been quite intrigued by many of his entries. I chose to&#8230; <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/pick\/2019\/11\/10\/animating-mathematical-functions\/\">read more >><\/a><\/p>","protected":false},"author":35,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[16],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/11151"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/comments?post=11151"}],"version-history":[{"count":3,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/11151\/revisions"}],"predecessor-version":[{"id":11783,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/11151\/revisions\/11783"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media?parent=11151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/categories?post=11151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/tags?post=11151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}