Bézier //Repositório JavaScript

//+ 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);
    };
}

<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>

Construtor

Bezier(p0: Object, p1: Object, c0: Object, c1: Object)

Gera uma instância de Bezier. Os pontos podem ser obtidos a partir do método "Bezier.point".

p0

define o ponto de origem da curva

p1

define o ponto final da curva

c0

define o ponto que exerce influência sobre o argumento p0

c1

define o ponto que exerce influência sobre o argumento p1

Métodos de classe

Bezier.point(x: Integer, y: Integer): Object

Retorna um objeto contendo duas propriedades, x e y.

Métodos

Bezier.getCoordinates(position: Float): Object

Retorna as coordenadas de um ponto, dada sua "posição" na linha.

position

número de 0 a 1 que especifica a posição do ponto (exemplo: 0 = início, 0.5 = meio, 1 = final)

Bezier.plot(callback: Function(point: Object, currentPosition: Float): void): Object

Desenha a curva.

callback

função que será chamada para cada ponto a ser desenhado, recebe como primeiro argumento as coordenadas do ponto (objeto contém duas propriedades x e y) e o segundo parâmetro é a posição atual, que varia de 0 (0%) a 1 (100%)