View Single Post

#1
Bookmark and Share!
draw curve through 3 points
Old 2002-03-18

I wrote some methods to draw a curve through three points. I took the quadratic Bezier equation and solved for the control point, given the two anchor points and time t=0.5.

P(t) = a(1-t)^2 + b(2t(1-t)) + ct^2
P = P(.5) = .25a + .5b + .25c

// solve for b
.5b = P - .25a - .25c
b = 2P - .5(a + c);

=]


Code:
MovieClip.prototype.drawCurve3Pts = function (x1, y1, x2, y2, x3, y3) {
	var cx = 2*x2 - .5*(x1 + x3);
	var cy = 2*y2 - .5*(y1 + y3);
	this.moveTo (x1, y1);
	this.curveTo (cx, cy, x3, y3);
}; // Robert Penner

MovieClip.prototype.curveToThru = function (px, py, ax, ay) {
	var cx = 2*px - .5*(this._xpen + ax);
	var cy = 2*py - .5*(this._ypen + ay);
	this.curveTo (cx, cy, ax, ay);
}; // Robert Penner


// MovieClip.curveToThru() depends on these methods
// which override the built-in ones:
/*
var MCP = MovieClip.prototype;

MCP.f6moveTo = MCP.moveTo;
MCP.moveTo = function (x, y) {
	with (this) {
		f6moveTo (x, y);
		_xpen = _xpenStart = x;
		_ypen = _ypenStart = y;
	}
};

MCP.f6lineTo = MCP.lineTo;
MCP.lineTo = function (x, y) {
	with (this) {
		f6lineTo (x, y);
		_xpen = x;
		_ypen = y;
	}
};

MCP.f6curveTo = MCP.curveTo;
MCP.curveTo = function (cx, cy, ax, ay) {
	with (this) {
		f6curveTo (cx, cy, ax, ay);
		_xpen = ax;
		_ypen = ay;
	}
};
*/
Here is an example for the drawCurve3Pts() function:

Code:
this.onEnterFrame = function () {
	this.clear();
	this.lineStyle(0);
	this.drawCurve3Pts (100, 100, _xmouse, _ymouse, 400, 400);
};
postbit arrow 8 comments | 2858 views postbit arrow Reply: with Quote   
robpenner
Moderator
robpenner is offline
seperator
Posts: 822
2001-02-13
Age: 32
seperator

Ultrashock Member Comments: