Las curvas Bézier son muy utilizadas en diseño 3D y gráficos vectoriales, pero también nos puede ser muy útil cuando queremos realizar una determinada curva entre dos puntos.
De forma resumida, la curva Bézier está formada por cuatro puntos: punto origen (p0), punto final (p3) y dos puntos más (p1 y p2) con los que se realizan vectores que forman la curva:
El script que lo realiza es muy sencillo, tan solo hay que pasarle los 4 puntos y el valor de t (que va desde 0 a 1).
function PointOnCubicBezier( $p0, $p1, $p2, $p3, $t ) {
/* cálculo de los coeficientes polinomiales */
$cx = 3.0 * ($p1[0] - $p0[0]);
$bx = 3.0 * ($p2[0] - $p1[0]) - $cx;
$ax = $p3[0] - $p0[0] - $cx - $bx;
$cy = 3.0 * ($p1[1] - $p0[1]);
$by = 3.0 * ($p2[1] - $p1[1]) - $cy;
$ay = $p3[1] - $p0[1] - $cy - $by;
/* calculate the curve point at parameter value t */
$squared = $t * $t;
$cubed = $squared * $t;
$res[0] = ($ax * $cubed) + ($bx * $squared) + ($cx * $t) + $p0[0];
$res[1] = ($ay * $cubed) + ($by * $squared) + ($cy * $t) + $p0[1];
return $res;
}
¿Y todo esto por qué? pues porque estamos realizando mejoras en el Top de Bitacoras.com y necesitábamos una curva que ofreciera una pendiente poco pronunciada entre dos puntos.
También os paso un ejemplo para que juguéis con los posibles valores de los puntos, teniendo una escala de 1000×100.
Vía / Wikipedia