{"id":3,"date":"2008-06-08T10:12:39","date_gmt":"2008-06-08T16:12:39","guid":{"rendered":"http:\/\/www.cartogrammar.com\/blog\/?p=3"},"modified":"2009-08-19T08:48:45","modified_gmt":"2009-08-19T13:48:45","slug":"continuous-curves-with-actionscript-3","status":"publish","type":"post","link":"https:\/\/andywoodruff.com\/blog\/continuous-curves-with-actionscript-3\/","title":{"rendered":"Continuous curves with ActionScript 3"},"content":{"rendered":"<p>Seeing my comrade <a href=\"http:\/\/indiemaps.com\/blog\">Zach Johnson&#8217;s<\/a> impressive work on generating <a href=\"http:\/\/indiemaps.com\/blog\/2008\/06\/isolining-package-for-actionscript-3\/\">isoline maps in Flash<\/a>, I offered to try to lend a hand with smoothing the lines (point-to-point connections) he was deriving from interpolations via Delauney triangulation.  I first turned to the fantastic book <em>Foundation Actionscript 3.0 Animation: Making Things Move!<\/em>, in which <a href=\"http:\/\/www.bit-101.com\/blog\/\">Keith Peters<\/a> presents a method for drawing a continuous curve based on multiple points.  (<a href=\"http:\/\/www.gskinner.com\/blog\/\">Grant Skinner<\/a> has a post with a nice <a href=\"http:\/\/www.gskinner.com\/blog\/archives\/2008\/05\/drawing_curved.html\">demo of the same method<\/a> and an even cooler demo of a double-line version for fills.)  While the method produces a nice, smooth, continuously curved line, it&#8217;s not very appropriate for the isoline problem because the curve doesn&#8217;t actually pass <em>through<\/em> any of the specified points, save the first and last.  The points in this case are interpolations, so a smoothed line that is  essentially an interpolation of an interpolation would be sacrificing too much accuracy.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"border: 0pt none;\" src=\"http:\/\/www.cartogrammar.com\/images\/bezier.jpg\" alt=\"Bezier curves\" width=\"388\" height=\"149\" \/><\/p>\n<p>The bottom line is that I had no luck finding a satisfactory way to use Flash&#8217;s built-in <code>curveTo<\/code> method&mdash;which draws quadratic <a href=\"http:\/\/en.wikipedia.org\/wiki\/Bezier_curve\">B\u00e9zier curves<\/a>&mdash;and instead opted for creating cubic B\u00e9zier curves (compare the two in the above image from the Flash documentation).  Thanks to Flash&#8217;s BezierSegment class, it&#8217;s pretty easy to construct these curves.  With my limited understanding of the math involved, however, finding good control points for a continuous curve was a bit more challenging.<\/p>\n<p>I put together an AS3 <a href=\"http:\/\/cartogrammar.com\/source\/CubicBezier.as\">CubicBezier class<\/a>, which for now just contains two methods: one to draw a continuous series of curves through many points (as was my goal), and one to draw a single curve between two points (seemed worthwhile to throw that in), both demonstrated below.  I&#8217;m sure there are a few kinks (ha!) to work out, but generally the results seem pretty satisfying. This was written with cartographic generalization in mind, but hopefully it can be more broadly useful.<\/p>\n\n<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"\n\t\t\tid=\"fm_curveTest_1988372424\"\n\t\t\tclass=\"flashmovie\"\n\t\t\twidth=\"400\"\n\t\t\theight=\"480\">\n\t<param name=\"movie\" value=\"http:\/\/cartogrammar.com\/flash\/curveTest.swf\" \/>\n\t<!--[if !IE]>-->\n\t<object\ttype=\"application\/x-shockwave-flash\"\n\t\t\tdata=\"http:\/\/cartogrammar.com\/flash\/curveTest.swf\"\n\t\t\tname=\"fm_curveTest_1988372424\"\n\t\t\twidth=\"400\"\n\t\t\theight=\"480\">\n\t<!--<![endif]-->\n\t\t\n\t<!--[if !IE]>-->\n\t<\/object>\n\t<!--<![endif]-->\n<\/object>\n<p>Files:<br \/>\n<em>These are old versions! See my <a href=\"http:\/\/www.cartogrammar.com\/blog\/actionscript-curves-update\/\">update post<\/a> for the latest.<\/em><br \/>\n<a href=\"http:\/\/cartogrammar.com\/source\/CubicBezier_May08.as\">CubicBezier.as<\/a><br \/>\n<a href=\"http:\/\/cartogrammar.com\/source\/curveTest.zip\">curveTest.zip<\/a> (AS plus the above demo)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Seeing my comrade Zach Johnson&#8217;s impressive work on generating isoline maps in Flash, I offered to try to lend a hand with smoothing the lines (point-to-point connections) he was deriving from interpolations via Delauney triangulation. I first turned to the fantastic book Foundation Actionscript 3.0 Animation: Making Things Move!, in which Keith Peters presents a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[14,11,9,12],"class_list":["post-3","post","type-post","status-publish","format-standard","hentry","category-code","tag-as3","tag-curves","tag-drawing","tag-isolines"],"_links":{"self":[{"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/posts\/3","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/comments?post=3"}],"version-history":[{"count":1,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/posts\/3\/revisions"}],"predecessor-version":[{"id":346,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/posts\/3\/revisions\/346"}],"wp:attachment":[{"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/media?parent=3"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/categories?post=3"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/andywoodruff.com\/blog\/wp-json\/wp\/v2\/tags?post=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}