[转] n次贝塞尔曲线AS重现
[转] n次贝塞尔曲线AS再现
http://bbs.9ria.com/viewthread.php?tid=71904&extra=page%3D1%26amp;orderby%3Ddateline%26amp;filter%3D86400
新年快到了,再也忍不住几个月不发帖了,这贴主要内容有:
1)n次方贝塞尔曲线(以1-10阶次为例子)
2)n次方贝塞尔曲线(Can Move版)(曲线可以移动,而效率不错哟,包括10次贝塞尔曲线)
3)n次方贝塞尔曲线(等分)(简单版等分,详细在
http://bbs.9ria.com/thread-24082-1-1.html
中,不同的是,俺不使用复杂的公式)
新年系列之——n次贝塞尔曲线AS再现出发!!
以俺的思路讲解,如果有必要的话,看看其他资料,保证对不明白贝塞尔曲线的兄弟们了解提升 一大步。
看看二次、三次的贝塞尔曲线公式:
其公式主要成分为基函数(贝塞尔曲线计算耗时的原因),基函数推导过程(以二次为例):
如此类推。。。所有的基函数数值都能计算出来
如果你还是一头汗!!那也没关系,先看看代码,基函数的代码
二次贝塞尔曲线一个点要计算出6次基函数数值,因此越平滑,越高阶的贝塞尔曲线,会越折磨CPU的。
要画出一个贝塞尔曲线的一个点在上面的第一张图中已经看出了,所以完整的帧代码为:
5阶次的贝塞尔曲线
10阶次的贝塞尔曲线
1阶次的贝塞尔曲线
那么,要移动10阶次的贝塞尔曲线,需要怎么做?
一切都是基函数的问题,就从他入手。
假设需要画100个点(已经可以画出很平滑的曲线了)
var sep:int = 100;
复制代码
如果阶次肯定地话,基函数的数值也就肯定了,如10阶次,一个点x坐标、y坐标分别需要计算出11个基函数数值。
把它保存起来
var datas:Array = [];
复制代码
以后需要的时候使用,这样就会得到意识不到的效果。(当然,3次贝塞尔曲线就足以模拟n次贝塞尔曲线,as3.0也是如此,但是做出实实在在的n次贝塞尔曲线,实在 )
效果图(移动前):
效果图(移动后):
效果图: 下载 (41.44 KB)
初始化时CPU会高一些,此后CPU都十分理想。哈哈,代码会在最后给出。
本帖最后由 shen_0_ 于 2011-1-7 18:37 编辑
http://bbs.9ria.com/thread-24082-1-1.html 帖子已经解答出等分的问题,但是考虑其效果的用途,可以再简单一些
我使用一个点
var p:Point=P_BEZ(0,sz);
复制代码
将曲线大致跟踪了一次(画的同时)
在画的时候不是画出真正的贝塞尔曲线,而是画出其相似的等分线段:
当然密集时会产生不理想的效果
这个教程告一段落! 新的一年要更加努力呀!!!!
http://bbs.9ria.com/viewthread.php?tid=71904&extra=page%3D1%26amp;orderby%3Ddateline%26amp;filter%3D86400
新年快到了,再也忍不住几个月不发帖了,这贴主要内容有:
1)n次方贝塞尔曲线(以1-10阶次为例子)
2)n次方贝塞尔曲线(Can Move版)(曲线可以移动,而效率不错哟,包括10次贝塞尔曲线)
3)n次方贝塞尔曲线(等分)(简单版等分,详细在
http://bbs.9ria.com/thread-24082-1-1.html
中,不同的是,俺不使用复杂的公式)
新年系列之——n次贝塞尔曲线AS再现出发!!
以俺的思路讲解,如果有必要的话,看看其他资料,保证对不明白贝塞尔曲线的兄弟们了解提升 一大步。
看看二次、三次的贝塞尔曲线公式:
其公式主要成分为基函数(贝塞尔曲线计算耗时的原因),基函数推导过程(以二次为例):
如此类推。。。所有的基函数数值都能计算出来
如果你还是一头汗!!那也没关系,先看看代码,基函数的代码
function BEZ(n:int,k:int,t:Number):Number {//基函数 return C(n,k)*Math.pow(t,k)*Math.pow(1-t,n-k); } function C(n:int,k:int):Number {//组合排序 var son:int=jie_cheng(n); var mother:int=jie_cheng(k)*jie_cheng(n-k); return son/mother; } function jie_cheng(i:int):int {//阶乘 var n:int=1; for (var j:int=1; j<=i; j++) { n*=j; } return n; }
二次贝塞尔曲线一个点要计算出6次基函数数值,因此越平滑,越高阶的贝塞尔曲线,会越折磨CPU的。
要画出一个贝塞尔曲线的一个点在上面的第一张图中已经看出了,所以完整的帧代码为:
var points:Array = []; var sp:Sprite=new Sprite(); var n:int = 5; addChild(sp); draw_points(points,n); function P_BEZ(t:Number,sz:Array):Point {//n次 var x_p:Number = 0; var y_p:Number = 0; var n:int = sz.length; for (var i:int=0; i<sz.length; i++) { var b:Number = BEZ(n - 1,i,t); x_p += sz[i].x * b; y_p+=sz[i].y*b; } return (new Point(x_p,y_p)); } function BEZ(n:int,k:int,t:Number):Number {//基函数 return C(n,k)*Math.pow(t,k)*Math.pow(1-t,n-k); } function C(n:int,k:int):Number {//组合排序 var son:int=jie_cheng(n); var mother:int=jie_cheng(k)*jie_cheng(n-k); return son/mother; } function jie_cheng(i:int):int {//阶乘 var n:int=1; for (var j:int=1; j<=i; j++) { n*=j; } return n; } function draw_points(sz:Array,n:int):void { sz.length=0; for (var i:int=0; i<=n; i++) { sz[i]=new Point(800*Math.random(),500*Math.random()); draw_point(sz[i]); } draw_lines(sz); sp.graphics.lineStyle(2,0xff0000); var p:Point=P_BEZ(0,sz); sp.graphics.moveTo(p.x,p.y); for (var j:Number=0; j<1; j+=0.01) { p=P_BEZ(j,sz); sp.graphics.lineTo(p.x,p.y); } p=P_BEZ(1,sz); sp.graphics.lineTo(p.x,p.y); } function draw_point(p:Point):void {//画点 sp.graphics.lineStyle(0); sp.graphics.drawCircle(p.x,p.y,3); } function draw_lines(sz:Array):void {//画边 sp.graphics.lineStyle(0,0,0.3); sp.graphics.moveTo(sz[0].x,sz[0].y); for (var i:int=0; i<sz.length; i++) { var p:Point=sz[i]; sp.graphics.lineTo(p.x,p.y); } }
5阶次的贝塞尔曲线
10阶次的贝塞尔曲线
1阶次的贝塞尔曲线
那么,要移动10阶次的贝塞尔曲线,需要怎么做?
一切都是基函数的问题,就从他入手。
假设需要画100个点(已经可以画出很平滑的曲线了)
var sep:int = 100;
复制代码
如果阶次肯定地话,基函数的数值也就肯定了,如10阶次,一个点x坐标、y坐标分别需要计算出11个基函数数值。
把它保存起来
var datas:Array = [];
复制代码
以后需要的时候使用,这样就会得到意识不到的效果。(当然,3次贝塞尔曲线就足以模拟n次贝塞尔曲线,as3.0也是如此,但是做出实实在在的n次贝塞尔曲线,实在 )
效果图(移动前):
效果图(移动后):
效果图: 下载 (41.44 KB)
初始化时CPU会高一些,此后CPU都十分理想。哈哈,代码会在最后给出。
本帖最后由 shen_0_ 于 2011-1-7 18:37 编辑
http://bbs.9ria.com/thread-24082-1-1.html 帖子已经解答出等分的问题,但是考虑其效果的用途,可以再简单一些
我使用一个点
var p:Point=P_BEZ(0,sz);
复制代码
将曲线大致跟踪了一次(画的同时)
在画的时候不是画出真正的贝塞尔曲线,而是画出其相似的等分线段:
当然密集时会产生不理想的效果
这个教程告一段落! 新的一年要更加努力呀!!!!
1 楼
xellosssky
2011-03-07
感谢楼主分享,最想做连接2点的随机曲线,用了万有引力公式,结果一个点变成另一个点的“卫星”,不断的绕着转了…… 。现在可以尝试下贝塞尔曲线公式了