Bézier //JavaScript Repository

Description

Calculates the bézier curve.
Created: 2006.06.24

Code (Download)

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/math/bezier [rev. #1]

function Bezier(p0, p1, c0, c1){
    var o = this;
    o.x0 = p0.x, o.y0 = p0.y, o.x1 = p1.x, o.y1 = p1.y, o.cx0 = c0.x, o.cy0 = c0.y, o.cx1 = c1.x, o.cy1 = c1.y;
};
with({$: Bezier, o: Bezier.prototype}){
    $.point = function(x, y){
        return {x: x, y: y};
    };
    o.getCoordinates = function(t){
        var i = 1 - t, x = t * t, y = i * i, a = x * t, b = 3 * x * i, c = 3 * t * y, d = y * i, o = this;
        return Bezier.point(a * o.x0 + b * o.cx0 + c * o.cx1 + d * o.x1, a * o.y0 + b * o.cy0 + c * o.cy1 + d * o.y1);
    };
    o.plot = function(c){
        var r, x = (x = this.x0 - this.x1) * x, y = (y = this.y0 - this.y1) * y, l = l = Math.ceil(Math.sqrt(x + y)), i = l + 1;
        while(c(this.getCoordinates(r = --i / l), r), i);
    };
}

Example (Example)

<script type="text/javascript" src="/js/graphical-plotter.js"></script>

<script type="text/javascript">
//<![CDATA[

//http://jsfromhell.com/dhtml/graphical-plotter
var canvas = new Canvas;
canvas.pen.color = "#f00";
canvas.pixelSize = 5;

var points = {
    'p0': Bezier.point(0, 70),
    'p1': Bezier.point(100, 20),
    'c0': Bezier.point(50, 20),
    'c1': Bezier.point(50, 70)
};

var bezier = new Bezier(points.p0, points.p1, points.c0, points.c1);
bezier.plot(function(p){
    canvas.pixel(p.x, p.y);
});

canvas.pen.color = "blue";
canvas.line(points.p0.x, points.p0.y, points.c0.x, points.c0.y);

canvas.pen.color = "green";
canvas.line(points.p1.x, points.p1.y, points.c1.x, points.c1.y);

//]]>
</script>

Help

Constructor

Bezier(p0: Object, p1: Object, c0: Object, c1: Object)
Generates an instance de Bezier. The points can be generated from the method "Bezier.point".
p0
defines the origin point of the curve
p1
defines the end point of the curve
c0
defines the point which has influence over the p0 argument
c1
defines the point which has influence over the p1 argument

Class Methods

Bezier.point(x: Integer, y: Integer): Object
Returns an object containing two properties, x and y.

Methods

Bezier.getCoordinates(position: Float): Object
Returns the coordinates of a point given its "position" on the curve.
position
number from 0 up to 1 which specifies the position of the point (example: 0 = beginning, 0.5 = middle, 1 = end)
Bezier.plot(callback: Function(point: Object, currentPosition: Float): void): Object
Draws the curve.
callback
function which will be called for each point that needs to be drawed, receives as first argument the coordinates of the point (contains the x and y properties), the second argument is the current position, which varies from 0 (0%) up to 1 (100%)

Rank (Votes: 18)

3.61