{"id":169,"date":"2009-01-27T00:00:42","date_gmt":"2009-01-27T07:00:42","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=614"},"modified":"2009-01-27T00:00:42","modified_gmt":"2009-01-27T07:00:42","slug":"move-along-bezier-curve","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=169","title":{"rendered":"Animate Along Bezier Curve"},"content":{"rendered":"<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\nvar circle:Shape = Shape(addChild(new Shape));\r\nwith(circle.graphics) beginFill(0x000000), drawCircle(0,0,5);\r\n \r\nvar bezierPoint:Point = new Point();\r\nfunction bezier(a:Number, x1:Number, y1:Number, x2:Number, y2:Number, x3:Number, y3:Number):void {\r\n\t\tvar b:Number =1-a;\r\n\t\tvar pre1:Number=a*a;\r\n\t\tvar pre2:Number=2*a*b;\r\n\t\tvar pre3:Number=b*b;\r\n\t\tbezierPoint.x = pre1*x1 + pre2*x2  + pre3*x3;\r\n\t    bezierPoint.y = pre1*y1 + pre2*y2 + pre3*y3;\r\n}\r\n\r\nvar inc:Number = 0;\r\nvar theta:Number = 0;\r\n\r\naddEventListener(Event.ENTER_FRAME, onLoop);\r\nfunction onLoop(evt:Event):void {\r\n\t\r\n\t graphics.clear();\r\n\t graphics.lineStyle(0,0xFF0000);\r\n     graphics.moveTo(200,200);\r\n     graphics.curveTo(mouseX, mouseY, 400, 200);\r\n\r\n\ttheta+= .05;\r\n\tinc = .5 + .5*Math.sin(theta);\r\n \r\n\tbezier(inc, 200, 200, mouseX, mouseY, 400, 200);\r\n\tcircle.x = bezierPoint.x;\r\n\tcircle.y = bezierPoint.y;\r\n}\r\n<\/pre>\n<p>The above animates a circle along a quadratic bezier curve. This snippet was written in response to a question spurned by some of the recent bezier posts. I used Math.sin() to animate the circle but you could just as easily use modulus&#8230; simply replace lines 25-26 with the following:<\/p>\n<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\ninc += .03;\r\ninc %= 1;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>var circle:Shape = Shape(addChild(new Shape)); with(circle.graphics) beginFill(0x000000), drawCircle(0,0,5); var bezierPoint:Point = new Point(); function bezier(a:Number, x1:Number, y1:Number, x2:Number, y2:Number, x3:Number, y3:Number):void { var b:Number =1-a; var pre1:Number=a*a; var pre2:Number=2*a*b; var pre3:Number=b*b; bezierPoint.x = pre1*x1 + pre2*x2 + pre3*x3; bezierPoint.y = pre1*y1 + pre2*y2 + pre3*y3; } var inc:Number = 0; var theta:Number = 0; addEventListener(Event.ENTER_FRAME, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30,33,114,13],"tags":[3,4],"class_list":["post-169","post","type-post","status-publish","format-standard","hentry","category-bezier","category-graphics","category-graphics-algorithms","category-motion","tag-actionscript","tag-flash"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/169","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=169"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/169\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}