{"id":4820,"date":"2013-09-20T09:00:28","date_gmt":"2013-09-20T13:00:28","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/?p=4820"},"modified":"2013-09-20T08:27:43","modified_gmt":"2013-09-20T12:27:43","slug":"web-browser-viewable-animations","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2013\/09\/20\/web-browser-viewable-animations\/","title":{"rendered":"Web browser viewable animations"},"content":{"rendered":"\r\n\r\n<div class=\"content\"><p><a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/15007\">Jiro<\/a>'s pick this week is <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/36052-web-browser-viewable-gui-animations-of-pngs--gifs--etc\">Web-browser viewable animations<\/a> by <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/29275\">Kevin Bartlett<\/a>.<\/p><p>I love thinking about creative ways of presenting results. As the number of dimensions increases, I find myself using animation as a way to convey one of the dimensions, oftentimes <i>time<\/i>. In MATLAB, it's easy to make <a href=\"\">animations<\/a>, but when I need to visualize data on a website, I have to get creative. The description Kevin has on his entry page accurately explains the kinds of things I need to be concerned about when creating animations for web pages. To summarize,<\/p><div><ul><li>Movie files may not play well in some platforms without an appropriate software.<\/li><li>Movie files tend to be large, especially when you try to make them cross-platform.<\/li><li>The image quality may suffer due to video compression.<\/li><\/ul><\/div><p>For these reasons, I often create animated GIF's from my MATLAB visualizations. You can create <a href=\"#btv452g-1\">animated GIF's<\/a> using the <a href=\"\"><tt>imwrite<\/tt><\/a> function. However, Kevin introduces a more elegant, versatile approach of using Javascript to build and incorporate speed and play controls into your animations.<\/p><p>Click on the image below to see an example of a Javascript animation page.<\/p><p> <a\r\nhref=\"https:\/\/blogs.mathworks.com\/images\/pick\/jiro\/potw_jsanim\/peaks.html\"><img\r\nsrc=\"https:\/\/blogs.mathworks.com\/images\/pick\/jiro\/potw_jsanim\/jsanim_page_screenshot.png\"><\/a>\r\n<\/p><p>His function has many options to customize the animation and the webpage, including frame delay controls. He provides plenty of documentation and examples to help you use his function.<\/p><p><b>Comments<\/b><\/p><p>Give this a try and let us know what you think <a href=\"https:\/\/blogs.mathworks.com\/pick\/?p=4820#respond\">here<\/a> or leave a <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/36052-web-browser-viewable-gui-animations-of-pngs--gifs--etc#comments\">comment<\/a> for Kevin.<\/p><script language=\"JavaScript\"> <!-- \r\n    function grabCode_d6265698db0144d0ae369149ea06b64c() {\r\n        \/\/ Remember the title so we can use it in the new page\r\n        title = document.title;\r\n\r\n        \/\/ Break up these strings so that their presence\r\n        \/\/ in the Javascript doesn't mess up the search for\r\n        \/\/ the MATLAB code.\r\n        t1='d6265698db0144d0ae369149ea06b64c ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' d6265698db0144d0ae369149ea06b64c';\r\n    \r\n        b=document.getElementsByTagName('body')[0];\r\n        i1=b.innerHTML.indexOf(t1)+t1.length;\r\n        i2=b.innerHTML.indexOf(t2);\r\n \r\n        code_string = b.innerHTML.substring(i1, i2);\r\n        code_string = code_string.replace(\/REPLACE_WITH_DASH_DASH\/g,'--');\r\n\r\n        \/\/ Use \/x3C\/g instead of the less-than character to avoid errors \r\n        \/\/ in the XML parser.\r\n        \/\/ Use '\\x26#60;' instead of '<' so that the XML parser\r\n        \/\/ doesn't go ahead and substitute the less-than character. \r\n        code_string = code_string.replace(\/\\x3C\/g, '\\x26#60;');\r\n\r\n        copyright = 'Copyright 2013 The MathWorks, Inc.';\r\n\r\n        w = window.open();\r\n        d = w.document;\r\n        d.write('<pre>\\n');\r\n        d.write(code_string);\r\n\r\n        \/\/ Add copyright line at the bottom if specified.\r\n        if (copyright.length > 0) {\r\n            d.writeln('');\r\n            d.writeln('%%');\r\n            if (copyright.length > 0) {\r\n                d.writeln('% _' + copyright + '_');\r\n            }\r\n        }\r\n\r\n        d.write('<\/pre>\\n');\r\n\r\n        d.title = title + ' (MATLAB code)';\r\n        d.close();\r\n    }   \r\n     --> <\/script><p style=\"text-align: right; font-size: xx-small; font-weight:lighter;   font-style: italic; color: gray\"><br><a href=\"javascript:grabCode_d6265698db0144d0ae369149ea06b64c()\"><span style=\"font-size: x-small;        font-style: italic;\">Get \r\n      the MATLAB code <noscript>(requires JavaScript)<\/noscript><\/span><\/a><br><br>\r\n      Published with MATLAB&reg; R2013b<br><\/p><p class=\"footer\"><br>\r\n      Published with MATLAB&reg; R2013b<br><\/p><\/div><!--\r\nd6265698db0144d0ae369149ea06b64c ##### SOURCE BEGIN #####\r\n%%\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/15007\r\n% Jiro>'s pick this week is\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/36052-web-browser-viewable-gui-animations-of-pngs--gifs--etc Web-browser\r\n% viewable animations> by\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/29275 Kevin\r\n% Bartlett>.\r\n%\r\n% I love thinking about creative ways of presenting results. As the number\r\n% of dimensions increases, I find myself using animation as a way to convey\r\n% one of the dimensions, oftentimes _time_. In MATLAB, it's easy to make\r\n% <\r\n% animations>, but when I need to visualize data on a website, I have to\r\n% get creative. The description Kevin has on his entry page accurately\r\n% explains the kinds of things I need to be concerned about when creating\r\n% animations for web pages. To summarize,\r\n%\r\n% * Movie files may not play well in some platforms without an appropriate\r\n% software.\r\n% * Movie files tend to be large, especially when you try to make them\r\n% cross-platform.\r\n% * The image quality may suffer due to video compression.\r\n%\r\n% For these reasons, I often create animated GIF's from my MATLAB\r\n% visualizations. You can create\r\n% <#btv452g-1\r\n% animated GIF's> using the\r\n% <\r\n% |imwrite|> function. However, Kevin introduces a more elegant, versatile\r\n% approach of using Javascript to build and incorporate speed and play\r\n% controls into your animations.\r\n%\r\n% Click on the image below to see an example of a Javascript animation\r\n% page.\r\n%\r\n% <html> <a\r\n% href=\"https:\/\/blogs.mathworks.com\/images\/pick\/jiro\/potw_jsanim\/peaks.html\"><img\r\n% src=\"https:\/\/blogs.mathworks.com\/images\/pick\/jiro\/potw_jsanim\/jsanim_page_screenshot.png\"><\/a>\r\n% <\/html>\r\n%\r\n% His function has many options to customize the animation and the webpage,\r\n% including frame delay controls. He provides plenty of documentation and\r\n% examples to help you use his function.\r\n%\r\n% *Comments*\r\n%\r\n% Give this a try and let us know what you think\r\n% <https:\/\/blogs.mathworks.com\/pick\/?p=4820#respond here> or leave a\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/36052-web-browser-viewable-gui-animations-of-pngs--gifs--etc#comments\r\n% comment> for Kevin.\r\n\r\n##### SOURCE END ##### d6265698db0144d0ae369149ea06b64c\r\n-->","protected":false},"excerpt":{"rendered":"<p>\r\n\r\nJiro's pick this week is Web-browser viewable animations by Kevin Bartlett.I love thinking about creative ways of presenting results. As the number of dimensions increases, I find myself using... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/pick\/2013\/09\/20\/web-browser-viewable-animations\/\">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\/4820"}],"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=4820"}],"version-history":[{"count":21,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/4820\/revisions"}],"predecessor-version":[{"id":4841,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/4820\/revisions\/4841"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media?parent=4820"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/categories?post=4820"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/tags?post=4820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}