{"id":5035,"date":"2013-12-27T09:00:23","date_gmt":"2013-12-27T14:00:23","guid":{"rendered":"https:\/\/blogs.mathworks.com\/pick\/?p=5035"},"modified":"2013-12-26T17:07:43","modified_gmt":"2013-12-26T22:07:43","slug":"connecting-points-with-smooth-curves","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/pick\/2013\/12\/27\/connecting-points-with-smooth-curves\/","title":{"rendered":"Connecting Points with Smooth Curves"},"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\/42302-smooth-3d-bezier-curves-with-implicit-control-points\"><tt>hobbysplines<\/tt><\/a> by <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/364671\">Will Robertson<\/a>.<\/p><p>End of the year is a pretty fun time for me. I get some extra free time in between my holiday break to do some fun MATLAB-ing! :) Just yesterday, I was trying to find a good way to nicely trace out an object (i.e. digitize an image) with a smooth line. In the <a href=\"https:\/\/www.mathworks.com\/products\/image\/\">Image Processing Toolbox<\/a>, there are many <a href=\"https:\/\/www.mathworks.com\/help\/images\/building-guis-with-modular-interactive-tools.html\">interactive tools<\/a> to help me draw lines and shapes. Using <a href=\"https:\/\/www.mathworks.com\/help\/images\/ref\/imfreehand.html\"><tt>imfreehand<\/tt><\/a> to do this was difficult. The mouse is not meant for drawing accurately. Perhaps a tablet and a stylus would have helped, which I don't own.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/jiro\/potw_hobbyspline\/freehand_screenshot.png\" alt=\"\"> <\/p><p><a href=\"https:\/\/www.mathworks.com\/help\/images\/ref\/impoly.html\"><tt>impoly<\/tt><\/a> will let me better select points along the object, but it creates a polygon. If I want a smooth object, I would need to select many points along the outline of the object.<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/jiro\/potw_hobbyspline\/polygon_screenshot.png\" alt=\"\"> <\/p><p>What I wanted was a way to connect the polygon point with a smooth line. That's when I discovered Will's <tt>hobbysplines<\/tt>. It nicely connects control points with <a href=\"http:\/\/en.wikipedia.org\/wiki\/B%C3%A9zier_curve\">B&eacute;zier curves<\/a>. This was much better and more robust than my initial attempt to use splines on two dimensions. I could get close, but it was difficult to match up the slopes at the end points.<\/p><p>The function accepts extra options, in addition to the required control points, which allow you to specify the slope of the curves and the \"tension\" of the curves as they approach the control points. Will includes an example script to demonstrate the various options.<\/p><p><b>Quick Modification<\/b><\/p><p>Will's function creates the plot based on the inputs. I wanted to use the smooth curve in my own visualization, so I modified his code to output the actual coordinates for the smoothed curve. With 23 control points I selected using <tt>impoly<\/tt>, look how nicely I was able to create a smooth outline of the object. Thanks for this file, Will!<\/p><p><img decoding=\"async\" vspace=\"5\" hspace=\"5\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/jiro\/potw_hobbyspline\/hobbyspline_screenshot.png\" alt=\"\"> <\/p><p><b>Comments<\/b><\/p><p>Let us know what you think <a href=\"https:\/\/blogs.mathworks.com\/pick\/?p=5035#respond\">here<\/a> or leave a <a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/42302-smooth-3d-bezier-curves-with-implicit-control-points#comments\">comment<\/a> for Will.<\/p><script language=\"JavaScript\"> <!-- \r\n    function grabCode_9015a20cd7b14efaba026f8f84b1064e() {\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='9015a20cd7b14efaba026f8f84b1064e ' + '##### ' + 'SOURCE BEGIN' + ' #####';\r\n        t2='##### ' + 'SOURCE END' + ' #####' + ' 9015a20cd7b14efaba026f8f84b1064e';\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_9015a20cd7b14efaba026f8f84b1064e()\"><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\n9015a20cd7b14efaba026f8f84b1064e ##### 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\/42302-smooth-3d-bezier-curves-with-implicit-control-points\r\n% |hobbysplines|> by\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/authors\/364671 Will\r\n% Robertson>.\r\n%\r\n% End of the year is a pretty fun time for me. I get some extra free time\r\n% in between my holiday break to do some fun MATLAB-ing! :) Just yesterday,\r\n% I was trying to find a good way to nicely trace out an object (i.e.\r\n% digitize an image) with a smooth line. In the\r\n% <https:\/\/www.mathworks.com\/products\/image\/ Image Processing Toolbox>,\r\n% there are many\r\n% <https:\/\/www.mathworks.com\/help\/images\/building-guis-with-modular-interactive-tools.html\r\n% interactive tools> to help me draw lines and shapes. Using\r\n% <https:\/\/www.mathworks.com\/help\/images\/ref\/imfreehand.html |imfreehand|>\r\n% to do this was difficult. The mouse is not meant for drawing accurately.\r\n% Perhaps a tablet and a stylus would have helped, which I don't own.\r\n%\r\n% <<freehand_screenshot.png>>\r\n%\r\n% <https:\/\/www.mathworks.com\/help\/images\/ref\/impoly.html |impoly|> will let\r\n% me better select points along the object, but it creates a polygon. If I\r\n% want a smooth object, I would need to select many points along the\r\n% outline of the object.\r\n%\r\n% <<polygon_screenshot.png>>\r\n%\r\n% What I wanted was a way to connect the polygon point with a smooth line.\r\n% That's when I discovered Will's |hobbysplines|. It nicely connects\r\n% control points with <http:\/\/en.wikipedia.org\/wiki\/B%C3%A9zier_curve\r\n% B\u00c3\u00a9zier curves>. This was much better and more robust than my initial\r\n% attempt to use splines on two dimensions. I could get close, but it was\r\n% difficult to match up the slopes at the end points.\r\n%\r\n% The function accepts extra options, in addition to the required control\r\n% points, which allow you to specify the slope of the curves and the\r\n% \"tension\" of the curves as they approach the control points. Will\r\n% includes an example script to demonstrate the various options.\r\n%\r\n% *Quick Modification*\r\n%\r\n% Will's function creates the plot based on the inputs. I wanted to use the\r\n% smooth curve in my own visualization, so I modified his code to output\r\n% the actual coordinates for the smoothed curve. With 23 control points I\r\n% selected using |impoly|, look how nicely I was able to create a smooth\r\n% outline of the object. Thanks for this file, Will!\r\n%\r\n% <<hobbyspline_screenshot.png>>\r\n%\r\n% *Comments*\r\n%\r\n% Let us know what you think\r\n% <https:\/\/blogs.mathworks.com\/pick\/?p=5035#respond here> or leave a\r\n% <https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/42302-smooth-3d-bezier-curves-with-implicit-control-points#comments\r\n% comment> for Will.\r\n\r\n##### SOURCE END ##### 9015a20cd7b14efaba026f8f84b1064e\r\n-->","protected":false},"excerpt":{"rendered":"<div class=\"overview-image\"><img decoding=\"async\"  class=\"img-responsive\" src=\"https:\/\/blogs.mathworks.com\/images\/pick\/jiro\/potw_hobbyspline\/freehand_screenshot.png\" onError=\"this.style.display ='none';\" \/><\/div><p>\r\n\r\nJiro's pick this week is hobbysplines by Will Robertson.End of the year is a pretty fun time for me. I get some extra free time in between my holiday break to do some fun MATLAB-ing! :) Just... <a class=\"read-more\" href=\"https:\/\/blogs.mathworks.com\/pick\/2013\/12\/27\/connecting-points-with-smooth-curves\/\">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\/5035"}],"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=5035"}],"version-history":[{"count":3,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/5035\/revisions"}],"predecessor-version":[{"id":5038,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/posts\/5035\/revisions\/5038"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/media?parent=5035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/categories?post=5035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/pick\/wp-json\/wp\/v2\/tags?post=5035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}