circle - Cómo crear un círculo con curvas Bézier?
bezier processing (9)
Tenemos un punto de inicio (x, y) y un radio de círculo. También existe un motor que puede crear un camino desde los puntos de curva de Bézier.
¿Cómo puedo crear un círculo con las curvas de Bézier?
Como ya se dijo: no hay una representación exacta del círculo con las curvas de Bezier.
Para completar las otras respuestas: para la curva de Bezier con n segmentos la distancia óptima a los puntos de control, en el sentido de que el centro de la curva se encuentra en el círculo, es (4/3)*tan(pi/(2n)) .
Entonces para 4 puntos es (4/3)*tan(pi/8) = 4*(sqrt(2)-1)/3 = 0.552284749831 .
Cubierto en el comp.graphics.faq
Extracto:
Sujeto 4.04: ¿Cómo ajusto una curva de Bezier a un círculo?
Curiosamente, las curvas de Bezier pueden aproximarse a un círculo pero no encajar perfectamente en un círculo. Una aproximación común es usar cuatro beziers para modelar un círculo, cada uno con puntos de control a una distancia d = r * 4 * (sqrt (2) -1) / 3 desde los puntos finales (donde r es el radio del círculo), y en una dirección tangente al círculo en los puntos finales. Esto asegurará que los puntos medios de los Beziers estén en el círculo, y que la primera derivada sea continua.
El error radial en esta aproximación será aproximadamente 0.0273% del radio del círculo.
Michael Goldapp, "Aproximación de arcos circulares por polinomios cúbicos" Diseño geométrico asistido por computadora (# 8 1991 pp.227-238)
Tor Dokken y Morten Daehlen, "Buenas aproximaciones de círculos por curvatura-Curvas de Bezier continuas" Diseño geométrico asistido por computadora (# 7 1990 pp. 33-41). http://www.sciencedirect.com/science/article/pii/016783969090019N (artículo no gratuito)
También vea el artículo no pago en http://spencermortensen.com/articles/bezier-circle/
Navegadores y Elemento de lienzo.
Tenga en cuenta que algunos navegadores utilizan curvas de Bezier en su arco de dibujo del lienzo, Chrome utiliza (en este momento) un enfoque de 4 sectores y Safari utiliza un enfoque de 8 sectores, la diferencia solo se nota en alta resolución, por eso 0.0273%, y también solo es realmente visible cuando los arcos se dibujan en paralelo y fuera de fase; notará que los arcos oscilan desde un círculo verdadero. El efecto también es más notorio cuando la curva se está animando alrededor de su centro radial; el radio de 600 píxeles generalmente es el tamaño en el que marcará la diferencia.
Ciertas API de dibujo no tienen una verdadera representación de arco, por lo que también usan curvas de Bezier, por ejemplo, la plataforma Flash no tiene una API de dibujo de arco, por lo que cualquier marco que ofrezca arcos generalmente usa el mismo enfoque de curva de Bezier.
Tenga en cuenta que los motores SVG dentro de los navegadores pueden usar un método de dibujo diferente.
Otras plataformas
Cualquiera que sea la plataforma que intente utilizar, vale la pena verificar para ver cómo se hace el dibujo de arco, de modo que pueda predecir errores visuales como este y adaptarse.
Es una gran aproximación que se verá razonable o terrible dependiendo de la resolución y la precisión, pero uso sqrt (2) / 2 x radio como puntos de control. Leí un texto bastante largo de cómo se deriva ese número y vale la pena leerlo, pero la fórmula anterior es rápida y sucia.
Las otras respuestas han cubierto el hecho de que un verdadero círculo no es posible. Este archivo SVG es una aproximación usando curvas de Bezier cuadráticas, y es lo más cercano que puede obtener: http://en.wikipedia.org/wiki/File:Circle_and_quadratic_bezier.svg
Aquí hay una con Curvas de Bezier cúbicas: http://en.wikipedia.org/wiki/File:Circle_and_cubic_bezier.svg
Las respuestas a la pregunta son muy buenas, así que hay poco que agregar. Inspirado por eso, comencé a hacer un experimento para confirmar visualmente la solución, comenzando con cuatro curvas Bézier, reduciendo el número de curvas a una. Sorprendentemente descubrí que con tres curvas Bézier el círculo se veía lo suficientemente bueno para mí, pero la construcción es un poco complicada. En realidad, utilicé Inkscape para ubicar la aproximación de Bézier negra de 1 píxel sobre un círculo rojo de 3 píxeles de ancho (como lo produce Inkscape). Para aclarar, agregué líneas azules y superficies que mostraban los cuadros delimitadores de las curvas de Bézier.
Para verte a ti mismo, estoy presentando mis resultados:
El gráfico de 1 curva (que se parece a una gota apretada en una esquina, solo para completar):
(Quería poner el SVG o PDF aquí, pero eso no es compatible)
No es posible. Un Bezier es un cubo (al menos ... el más utilizado es). Un círculo no se puede expresar exactamente con un cubo, porque un círculo contiene una raíz cuadrada en su ecuación. Como consecuencia, debe aproximarse.
Para hacer esto, debes dividir tu círculo en n-tants (por ej., Cuánticos, octantes). Para cada n-tant, usa el primer y el último punto como la primera y última curva de Bezier. El polígono de Bezier requiere dos puntos adicionales. Para ser rápido, tomaría las tangentes al círculo para cada punto extremo del n-tant y elegiría los dos puntos como la intersección de las dos tangentes (de modo que, básicamente, su polígono Bezier es un triángulo). Aumente la cantidad de n-tants para adaptarse a su precisión.
No estoy seguro de si debería abrir una nueva pregunta, ya que se trata de aproximación, pero estoy interesado en la fórmula general para obtener puntos de control para Bezier de cualquier grado y creo que encaja en esta pregunta. Todas las soluciones que encontré en la web son solo para curvas cúbicas o se pagan o ni siquiera entiendo (no soy muy bueno en matemáticas). Así que decidí tratar de resolver esto por mi cuenta. Estuve a una distancia de estudio del punto de control del centro de un círculo dependiente del ángulo dado y hasta ahora he encontrado que:
Donde N es el número de puntos de control para la curva simple y α es el ángulo del arco del círculo.
Para la curva cuadrática se puede simplificar a l ≈ r + r * PI*0.1 * pow(α/90, 2) El PI*0.1 es más bien una suposición - No calculé el valor perfecto, pero está bastante cerca. Esto funciona razonablemente bien para la curva con 1-2 puntos de control dando un error de radio de aproximadamente 0.2% para la curva cúbica. Para curvas de mayor grado, la pérdida de precisión es notable. Con 3 puntos de control, la curva se ve similar a la cuadrática, así que, obviamente, echo de menos algo, pero no puedo entenderlo y este método generalmente se ajusta a mis necesidades por ahora. Aquí está la demo .
Perdón por traer esta de vuelta de entre los muertos, pero encontré esta publicación muy útil junto con this página al presentar una fórmula ampliable.
Básicamente, puede crear un círculo cercano usando una fórmula increíblemente simple que le permite usar cualquier número de curvas Bezier sobre 4: Distance = radius * stepAngle / 3
Donde la Distance es la distancia entre un punto de control Bezier y el extremo más cercano del arco, el radio es el radius del círculo, y el paso stepAngle es el ángulo entre los 2 extremos del arco representado por 2π / (el número de curvas).
Así que para golpearlo de una vez: Distance = radius * 2π / (the number of curves) / 3
Ya tengo muchas respuestas, pero encontré un pequeño artículo en línea con una muy buena aproximación de círculos bezier. En términos de círculo unitario c = 0.55191502449 donde c es la distancia desde los puntos de intersección del eje a lo largo de las tangentes a los puntos de control.
Como un solo cuadrante para el círculo unitario con las dos coordenadas medias como puntos de control. (0,1),(c,1),(1,c),(1,0)
El error radial es solo 0.019608%, así que solo tuve que agregarlo a esta lista de respuestas.
El artículo se puede encontrar aquí Aproximar un círculo con curvas cúbicas Bézier