{"id":231,"date":"2009-03-25T00:00:38","date_gmt":"2009-03-25T07:00:38","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=1031"},"modified":"2009-03-25T00:00:38","modified_gmt":"2009-03-25T07:00:38","slug":"catmull-rom-spline","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=231","title":{"rendered":"Catmull-Rom Spline"},"content":{"rendered":"
\r\nvar canvas:BitmapData = new BitmapData(400,400,false, 0x000000);\r\naddChild(new Bitmap(canvas));\r\n\r\nvar p0:Sprite = dot(100, 100);\r\nvar p1:Sprite = dot(120, 180);\r\nvar p2:Sprite = dot(220, 180);\r\nvar p3:Sprite = dot(250, 250);\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\r\n\tcurve(p0, p1, p2, p3);\r\n\tcanvas.unlock();\r\n}\r\n\r\n\r\n\/\/ all math from http:\/\/en.wikipedia.org\/wiki\/Cubic_Hermite_spline\r\nfunction curve(p0:Sprite, p1:Sprite, p2:Sprite, p3:Sprite, rez:Number=.02):void{\r\n\tvar px:Number = 0;\r\n    var py:Number = 0;\r\n\tvar m0:Point = tangent(p1, p0);\r\n\tvar m1:Point = tangent(p2, p0);\r\n\tvar m2:Point = tangent(p3, p1);\r\n\tvar m3:Point = tangent(p3, p2);\r\n\t\r\n\tfor (var t:Number = 0; t < 1; t+=rez){\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 \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 \r\n\t\t px = h00 * p0.x + h10 * m0.x + h01 * p1.x + h11 * m1.x;\r\n\t\t py = h00 * p0.y + h10 * m0.y + h01 * p1.y + h11 * m1.y;\r\n\t\t canvas.setPixel(px, py, 0xFFFFFF);\r\n\t\t \r\n\t\t px = h00 * p1.x + h10 * m1.x + h01 * p2.x + h11 * m2.x;\r\n\t\t py = h00 * p1.y + h10 * m1.y + h01 * p2.y + h11 * m2.y;\r\n\t\t canvas.setPixel(px, py, 0xFFFFFF);\r\n\t\t \r\n\t\t px = h00 * p2.x + h10 * m2.x + h01 * p3.x + h11 * m3.x;\r\n\t\t py = h00 * p2.y + h10 * m2.y + h01 * p3.y + h11 * m3.y;\r\n\t\t canvas.setPixel(px, py, 0xFFFFFF);\r\n\t}\r\n}\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\r\n\/\/ draggable dot\r\nfunction dot(xp:Number, yp:Number, col:uint = 0x507399, rad:Number=5):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
This is snippet draws a Catmull-Rom spline based on 4 control points. A nice feature of Catmull-Rom splines is that they always pass through each of their control points. <\/p>\n

\nhave a look at the swf here:<\/p>\n
<\/a>