{"id":232,"date":"2009-03-26T00:00:51","date_gmt":"2009-03-26T07:00:51","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=1042"},"modified":"2009-03-26T00:00:51","modified_gmt":"2009-03-26T07:00:51","slug":"k-th-order-catmull-rom-spline","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=232","title":{"rendered":"k-th Order Catmull-Rom Spline"},"content":{"rendered":"<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\nvar canvas:BitmapData = new BitmapData(400,400,false, 0x000000);\r\naddChild(new Bitmap(canvas));\r\nvar pnts:Array = new Array();\r\n\/\/ make 8 control points\r\nfor (var i:int = 0; i&lt;8; i++){\r\n\tpnts.push(dot(50 + i * (30 + Math.random()*10),\r\n\t\t\t\t\t\t\t 50 + i * (30 + Math.random()*10)));\r\n}\r\naddEventListener(Event.ENTER_FRAME, onLoop);\r\nfunction onLoop(evt:Event):void {\r\n\tcanvas.lock();\r\n\tcanvas.fillRect(canvas.rect, 0x000000);\r\n\tcurve(pnts);\r\n\tcanvas.unlock();\r\n}\r\nfunction tangent(pk1:Sprite, pk_1:Sprite){\r\n\treturn new Point((pk1.x - pk_1.x) \/ 2, (pk1.y - pk_1.y) \/ 2);\r\n}\r\n\/\/ all math from http:\/\/en.wikipedia.org\/wiki\/Cubic_Hermite_spline\r\nfunction curve(p:Array, res:Number=.03):void{\r\n\tvar px:Number = 0;\r\n\tvar py:Number = 0;\r\n\tvar pIter:int = p.length - 1;\r\n\tvar m:Array = &#x5B;];\r\n\tm&#x5B;0] = tangent(p&#x5B;1], p&#x5B;0]);\r\n\tfor (var i:int = 1; i&lt;pIter; i++){\r\n\t\tm&#x5B;i] = tangent(p&#x5B;i + 1], p&#x5B;i - 1]);\r\n\t}\r\n\tm&#x5B;pIter] = tangent(p&#x5B;pIter], p&#x5B;pIter - 1]);\r\n\tfor (var t:Number = 0; t &lt;1; t+=res){\r\n\t\t var t_2:Number = t * t;\r\n\t\t var _1_t:Number = 1 - t;\r\n\t\t var _2t:Number = 2 * t;\r\n\t\t var h00:Number =  (1 + _2t) * (_1_t) * (_1_t);\r\n\t\t var h10:Number =  t  * (_1_t) * (_1_t);\r\n\t\t var h01:Number =  t_2 * (3 - _2t);\r\n\t\t var h11:Number =  t_2 * (t - 1);\r\n\t\t for (var k:int = 0; k &lt;pIter; k++){\r\n\t\t\t var k1:int = k + 1;\r\n\t\t\t var pk:Sprite = p&#x5B;k];\r\n\t\t\t var pk1:Sprite = p&#x5B;k1];\r\n\t\t\t var mk:Point = m&#x5B;k];\r\n\t\t\t var mk1:Point = m&#x5B;k1];\r\n\t\t\t px = h00 * pk.x + h10 * mk.x + h01 * pk1.x + h11 * mk1.x;\r\n\t\t\t py = h00 * pk.y + h10 * mk.y + h01 * pk1.y + h11 * mk1.y;\r\n\t\t\t canvas.setPixel(px, py, 0xFFFFFF);\r\n\t\t }\r\n\t}\r\n}\r\n\/\/ draggable dot\r\nfunction dot(xp:Number, yp:Number, col:uint = 0xFF0000, rad:Number=4):Sprite {\r\n\tvar s:Sprite = Sprite(addChild(new Sprite));\r\n\ts.x = xp;\r\n\ts.y = yp;\r\n\twith(s.graphics) beginFill(col), drawCircle(0,0,rad);\r\n\ts.buttonMode = true;\r\n\ts.addEventListener(MouseEvent.MOUSE_DOWN, onDrag);\r\n\treturn s;\r\n}\r\nfunction onDrag(evt:MouseEvent):void {\r\n\tevt.currentTarget.startDrag()\r\n}\r\nstage.addEventListener(MouseEvent.MOUSE_UP, onUp);\r\nfunction onUp(evt:MouseEvent):void{\r\n\tstopDrag();\r\n}\r\n<\/pre>\n<p>More Catmull-Rom stuff. This one can have any number of control points:<\/p>\n<p><a data-asruffle-linked=\"true\" href=\"http:\/\/www.actionsnippet.com\/swfs\/catmull_rom_kth.html\" target=\"blank\"><br \/>\nCheck it out here:<br \/>\n<img decoding=\"async\" src=\"https:\/\/actionsnippet.com\/wp-content\/kth_catmull_rom.jpg\" \/><br \/>\n<\/a> <span class=\"asruffle-link\" data-swf=\"{&quot;url&quot;:&quot;https:\\\/\\\/actionsnippet.com\\\/swfs\\\/catmull_rom_kth.swf&quot;,&quot;title&quot;:&quot;catmull rom kth&quot;,&quot;width&quot;:400,&quot;height&quot;:420,&quot;missing&quot;:false,&quot;allowScriptAccess&quot;:false,&quot;backgroundColor&quot;:&quot;#ffffff&quot;}\"><button type=\"button\" hidden aria-expanded=\"false\">Play demo<span class=\"screen-reader-text\">: catmull rom kth<\/span><\/button><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>var canvas:BitmapData = new BitmapData(400,400,false, 0x000000); addChild(new Bitmap(canvas)); var pnts:Array = new Array(); \/\/ make 8 control points for (var i:int = 0; i&lt;8; i++){ pnts.push(dot(50 + i * (30 + Math.random()*10), 50 + i * (30 + Math.random()*10))); } addEventListener(Event.ENTER_FRAME, onLoop); function onLoop(evt:Event):void { canvas.lock(); canvas.fillRect(canvas.rect, 0x000000); curve(pnts); canvas.unlock(); } function tangent(pk1:Sprite, pk_1:Sprite){ return [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[114,121,26],"tags":[],"class_list":["post-232","post","type-post","status-publish","format-standard","hentry","category-graphics-algorithms","category-math","category-setpixel"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=232"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/232\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}