Nerding Out con curvas Bezier

Desde los últimos días he estado intentando escribir mi propia pequeña biblioteca de animación JavaScript. Sé que a nadie le importa una nueva biblioteca de animación, pero bueno, el punto es que en el proceso me encontré con las curvas de Bezier. Pasé un par de horas investigando, tratando de entenderlas, durante las cuales encontré este nuevo artículo: “La intuición matemática detrás de las curvas de Bezier”, que también resulta ser la inspiración para este artículo. Es matemático y aparentemente está dirigido a personas inteligentes, por lo tanto, me costó un poco entender el concepto. Pero, afortunadamente, al final lo hice y esto me llevó a aprender una serie de cosas nuevas e interesantes sobre las curvas de Bezier que estoy muy emocionado de compartir con ustedes.

Que vas a aprender

Comenzaré con una introducción a las curvas, qué son, por qué son geniales, su representación matemática. Sin embargo, no te preocupes por las matemáticas, para ser honesto, soy un poco asqueroso en matemáticas, así que tengo que encontrar formas de intentar explicármelo a mí mismo y estoy seguro de que "las formas" funcionarán para ti también :).

A continuación, pasaremos a las curvas de Bezier. Qué son y qué los hace diferentes. Su fórmula matemática.

Hacia el final, construiremos nuestro propio motor de dibujo de curvas Bezier en JavaScript y SVG. ¿Cuan genial es eso?

Curvas

No necesito dar una definición formal de curva aquí, ¿verdad? Todas estas líneas son curvas, míralas

Las curvas son bastante dulces, pueden representar varias cosas. Como por ejemplo, la siguiente curva muestra el número de seguidores de Twitter a lo largo del tiempo.

Muy bien, parece una línea garabateada al azar. Permítanme agregar algo de contexto.

Ahora debería dar una mejor idea de lo que representa. En el eje horizontal está el número de días desde que me uní a Twitter y en el eje vertical está el número de seguidores que gané.

En mi primer día en Twitter, tenía 0 seguidores, luego aumentó lentamente, perdí algunos, gané algunos, y luego, en la segunda mitad, como pueden ver, gané varios seguidores nuevos. Esa no es la única información que podemos descifrar de esta curva. También puedo averiguar el número exacto de seguidores que tuve en un día determinado. Es solo cuestión de trazar dos líneas.

Digamos que me gustaría saber la cantidad de seguidores que tuve el día 60.

Trazo una línea vertical desde 60 en el eje horizontal, luego desde el punto donde esta línea se cruza con la curva, dibujo una línea horizontal. Esta línea horizontal cruza el eje vertical (eje con número de seguidores) en un punto. El valor de ese punto en el eje vertical me da el número exacto de seguidores que tenía el día 60, que es 126.

Ahora, donde las dos líneas rojas se cruzan, es lo que se llama un punto . En un gráfico bidimensional, como nuestro gráfico de seguidores de Twitter, un punto se identifica de forma única por dos valores, su coordenada horizontal ( x ) y su coordenada vertical ( y ). Por lo tanto, escribir (x, y) es todo lo que se necesita para representar un punto. En nuestro caso, el punto rojo, donde las dos líneas rojas se cruzan, se puede escribir como (60, 126).

(60 = x / coordenada horizontal, 126 = y / coordenada vertical)

Muy bien para lo que es un punto, ya lo sabías. Hablemos de la curva, que en realidad es una colección de muchos de esos puntos, ¿no es así?

Usted toma una serie de datos como en el día 0 0 seguidores, el primer día 50 seguidores ... el décimo día 76 seguidores ... el día 100 500 seguidores ... y así sucesivamente. Convierte estos datos en puntos (0, 0) (1, 50)… (10, 76)… (100, 500) ... Dibuja los puntos en el gráfico, únelos y ahí, tienes una curva.

Entonces, para una curva necesita puntos y para puntos necesita los valores correspondientes de xey. Por lo tanto, ahora preste mucha atención aquí, una curva puede ser representada de forma única por algo que puede arrojar valores de xyo y para nosotros. Ese “algo” es lo que llamamos en Matemáticas una función.

Hay muchas funciones estándar en matemáticas. Considere la función seno .

En funciones como esta, la elección de x es nuestra. Le damos una x , nos da una y . Y juntos formamos un punto (x, y). Le damos otra x, nos da otra y, y así sucesivamente terminamos con una colección de puntos, los trazamos y obtenemos una forma única.

Una función también se puede representar en forma paramétrica . En forma paramétrica, no necesitamos proporcionar una parte de la coordenada del punto como hicimos (x) en el ejemplo anterior. En lugar suministramos un parámetro / variables, generalmente escrita como t y para cada t obtenemos tanto X y Y coordenadas, en definitiva nos suministran una t obtenemos un punto.

Querrá saber qué es la forma paramétrica cuando hablemos de las matemáticas detrás de las curvas de Bézier.

Curvas de Bezier

Las curvas de Bézier son curvas muy especiales. Las matemáticas y la idea detrás de ellas me dejaron boquiabierto y tú también deberías prepararte para quedarte impresionado.

Ya que está leyendo esto, supongo que es diseñador o desarrollador y ha tratado con curvas de Bézier antes, especialmente curvas de Bézier cúbicas, llegaremos a lo que son las curvas de Bézier en un segundo. Ahora, estas curvas se utilizan en una variedad de lugares, para crear gráficos vectoriales, rutas de animación, curvas de suavizado de animación, etc., solo porque son muy fáciles de controlar . No necesitas saber mucho de matemáticas, nada en absoluto para doblar estas curvas a tus caprichos. Piense si las curvas de Bezier no existieran y la gente tuviera que idear funciones matemáticas únicas para curvas, digamos, dibujar gráficos vectoriales como fuentes, por ejemplo, una pesadilla, por supuesto.

Matemáticas ?

Muy bien, es hora de algo de matemáticas. Comenzaré con la fórmula general para las curvas de Bezier, es bastante abrumador a primera vista, pero lo superaremos.

“¡Guau! ¡Guau! ¡Guau! ¡Einstein! ”. Oye, espera, no hagas clic. Es fácil, mira, ¿lo hice tan colorido ?.

Comencemos a desglosar la fórmula. Puede omitir las partes que ya conoce.

B (t)

B porque es una curva de B ezier. Como se mencionó anteriormente en el artículo sobre la forma paramétrica de curvas, t es un parámetro. Se conecta t y hacia fuera viene X y Y , un punto. Pronto veremos cómo funciona eso con la ecuación anterior. Será bueno mencionar aquí que para las curvas de Bezier, el valor de t debe estar entre 0 y 1, ambos incluidos.

Σ / Sigma

Este símbolo, Σ, en Matemáticas se llama operador de suma. La forma en que funciona es así, a la derecha de este símbolo hay una expresión con una variable i, y solo puedo contener valores enteros. En la parte superior e inferior del símbolo escribimos los límites de i. Para cada valor de i, se evalúa la expresión de la derecha y se suma al total hasta que i llega a n.

Aquí hay unos ejemplos.

Solo una notación más corta para algo más largo.

Muy bien, parece que estamos claros con sigma.

nCi

Esta C aquí, es la C de permutaciones y C ombinations. Tengamos una lección improvisada de combinaciones, ¿de acuerdo? Ahora, en la fórmula esta parte es lo que se llama coeficiente binomial. La forma de leer nCi es así: n Elija i. Es decir, dados n elementos de cuántas maneras puede elegir i elementos de ellos (n siempre es mayor o igual que i). Bien, puede que eso no tenga mucho sentido, considere este ejemplo: tengo 3 elementos: un círculo, un cuadrado y un triángulo. Por lo tanto, aquí, n = 3. ¿De cuántas maneras puedo elegir 2 (i = 2) elementos de los 3. En el lenguaje de las matemáticas, eso se escribiría como 3C2 (3 Elija 2). La respuesta es 3.

Similar,

Y cuando i es 0, solo hay una forma de elegir 0 elementos de n, 1, para elegir ninguno.

En lugar de dibujar bocetos y averiguar la respuesta a una expresión de combinación dada, existe esta fórmula generalizada.

P sub i

Ésta es la parte importante. En la fórmula general de la curva de Bezier hay t, i y n. Realmente no hemos mencionado lo que es n. n es lo que se llama el grado de la curva de Bezier. n es lo que decide si una curva de Bezier es lineal o cuadrática o cúbica o algo más.

Verá, si ha usado la herramienta Pluma antes, hace clic en dos ubicaciones distintas para crear dos puntos distintos y luego controla la curva que se forma entre los dos puntos usando manijas. Una curva de Bezier siempre tendrá al menos dos puntos de ancla, y los restantes son puntos de control que se utilizan para controlar la forma de la curva. Además, lo que llama identificadores son solo los puntos de control conectados por una línea a un punto de ancla, solo están ahí para proporcionar un mejor modelo mental. Entonces, cuando ajusta las manijas, en realidad simplemente está cambiando las coordenadas de los puntos de control.

Vamos a deshacernos de todos los accesorios y centrarnos en el núcleo.

La curva que ve en la imagen de arriba es una curva de Bézier cúbica, o en otras palabras, el grado de la curva de Bézier que se muestra arriba es 3, o en la fórmula general para las Curvas de Bézier, conecte n = 3.

n = 1 le da una curva de Bezier lineal con dos puntos de anclaje P0 y P1 y sin puntos de control, por lo que esencialmente termina siendo una línea recta.

n = 2 le da una curva de Bezier cuadrática con dos puntos de anclaje P0 y P2 y un punto de control P1

e igualmente n = 3 le da una curva de Bezier cúbica con dos puntos de anclaje P0 y P3 y dos puntos de control P1 y P2. Cuanto mayor sea la n, se pueden dibujar formas más complicadas.

Ahora vamos a formar a partir de la ecuación general la ecuación para la curva de Bezier cúbica que implica sustituir n = 3 en la fórmula general. La ecuación que obtendremos estará en la variable t que como se mencionó anteriormente es un parámetro cuyo valor varía entre 0 y 1. Además, para la ecuación necesitaremos 4 Pis (léase: ojos de pipí) P0, P1, P2 y P3. La elección de estos puntos depende de nosotros, después de todo, cuando dibujamos gráficos vectoriales, digamos que con la herramienta de lápiz, elegimos la posición de los puntos de ancla y los puntos de control, ¿no? Después de los cambios, nuestra ecuación para la curva Cubic Bezier se ve así.

Estamos usando un poco de brevedad aquí, en realidad cada punto (P) tiene dos coordenadas xey y también al pasar t a la ecuación general se supone que obtenemos un punto que también tiene coordenadas xey. Por lo tanto, podemos escribir la ecuación anterior como

Estás a punto de presenciar algo muy especial sobre estas ecuaciones.

En resumen, la ecuación mencionada es la forma paramétrica de la curva de Bezier con el parámetro t que puede contener valores que varían entre 0 y 1. Una curva es una colección de puntos. Cada t única que pasa a B da un punto único que construye toda la curva de Bézier.

Lo mágico de la ecuación es que cuando t = 0, B (0) = P0 y cuando t = 1, B (1) = P3, por lo tanto, los valores extremos de t, 0 y 1 dan los puntos más extremos del curva que son, por supuesto, los puntos de anclaje. Esto no es cierto solo para las curvas de Bezier cúbicas, para una curva de grado n B (0) = P0 y B (1) = Pn.

Para cualquier otro valor de t entre 0 y 1 (por ejemplo, t = 0,2 en la figura anterior) se obtiene un punto que construye la curva.

Dado que toda la ecuación depende de la posición de los Pis (ojos de pipí), cambiar su posición cambia la forma de la curva. Y así es como funcionan las curvas de Bezier.

Ahora que conocemos las matemáticas detrás de las curvas de Bézier, usemos ese conocimiento.

He creado un programa JavaScript simple que muestra una curva de Bezier cúbica, no hay una interfaz de usuario para interactuar con él porque no quería que la lógica se desvaneciera en todo el código de la interfaz de usuario y también porque soy vago. Pero eso no significa que no puedas interactuar con él :).

¿Fue demasiado para asimilar? Comenzamos definiendo qué son las curvas, de ahí pasamos a los puntos y cómo son los componentes básicos de una curva. Luego pasamos a las curvas de Bezier y entendimos las matemáticas para encontrar puntos que hacen una curva de Bezier hacia arriba. Espero que hayas aprendido algo y hayas dejado este artículo más inteligente que cuando empezaste a leerlo.

El código para el pequeño motor Cubic Bezier personalizado se puede encontrar en este repositorio de GitHub.

Actualización: el generador ahora puede generar una curva Bezier de cualquier grado y no solo curvas Bezier cúbicas :).

¿Buscando por mas? Publico regularmente en mi blog en nashvail.me. ¡Nos vemos allí, que tengas una buena!