You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 7-animation/1-bezier-curve/article.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,11 +2,11 @@
2
2
3
3
Las curvas de Bézier se utilizan en gráficos por ordenador para dibujar formas, para animación CSS y en muchos otros lugares.
4
4
5
-
En realidad, son algo muy sencillo, vale la pena estudiar una vez y luego sentirse cómodo en el mundo de los gráficos vectoriales y las animaciones avanzadas.
5
+
En realidad, son algo muy sencillo, vale la pena estudiarlos una vez y luego sentirse cómodo en el mundo de los gráficos vectoriales y las animaciones avanzadas.
6
6
7
7
## Puntos de control
8
8
9
-
Una [curva de Bèzier](https://es.wikipedia.org/wiki/Curva_de_B%C3%A9zier) está definida por puntos de control.
9
+
Una [curva de Bézier](https://es.wikipedia.org/wiki/Curva_de_B%C3%A9zier) está definida por puntos de control.
10
10
11
11
Puede haber 2, 3, 4 o más.
12
12
@@ -22,7 +22,7 @@ Curva de cuatro puntos:
22
22
23
23

24
24
25
-
Si observa detenidamente estas curvas, puede notar inmediatamente que:
25
+
Si observas detenidamente estas curvas, puedes notar inmediatamente que:
26
26
27
27
1.**Los puntos no siempre están en la curva.** Eso es perfectamente normal, luego veremos cómo se construye la curva.
28
28
2.**El orden de la curva es igual al número de puntos menos uno**.
@@ -35,11 +35,11 @@ Debido a esa última propiedad, en gráficos por ordenador es posible optimizar
35
35
36
36
**El valor principal de las curvas de Bézier para dibujar: al mover los puntos, la curva cambia *de manera intuitiva*.**
37
37
38
-
Intente mover los puntos de control con el ratón en el siguiente ejemplo:
38
+
Intenta mover los puntos de control con el ratón en el siguiente ejemplo:
**Como puede observar, la curva se extiende a lo largo de las lineas tangenciales 1 -> 2 y 3 -> 4.**
42
+
**Como puedes observar, la curva se extiende a lo largo de las lineas tangenciales 1 -> 2 y 3 -> 4.**
43
43
44
44
Después de algo de práctica, se vuelve obvio cómo colocar puntos para obtener la curva necesaria. Y al conectar varias curvas podemos obtener prácticamente cualquier cosa.
45
45
@@ -78,7 +78,7 @@ Los puntos de control (1,2 y 3) se pueden mover con el ratón. Presiona el botó
4. Ahora, en el segmento <spanstyle="color:#167490">azul</span>, tome un punto en la distancia proporcional al mismo valor de `t`. Es decir, para `t=0.25` (la imagen de la izquierda) tenemos un punto al final del cuarto izquierdo del segmento, y para `t=0.5` (la imagen de la derecha) -- en la mitad del segmento. En las imágenes de arriba ese punto es <spanstyle="color:red">rojo</span>.
81
+
4. Ahora, en el segmento <spanstyle="color:#167490">azul</span>, toma un punto en la distancia proporcional al mismo valor de `t`. Es decir, para `t=0.25` (la imagen de la izquierda) tenemos un punto al final del cuarto izquierdo del segmento, y para `t=0.5` (la imagen de la derecha) -- en la mitad del segmento. En las imágenes de arriba ese punto es <spanstyle="color:red">rojo</span>.
82
82
83
83
5. Como `t` va de `0` a `1`, cada valor de `t` añade un punto a la curva. El conjunto de tales puntos forma la curva de Bézier. Es rojo y parabólico en las imágenes de arriba.
84
84
@@ -108,7 +108,7 @@ Dados N de puntos de control:
108
108
Estos puntos forman la curva.
109
109
110
110
```online
111
-
**Ejecute y pause los ejemplos para ver claramente los segmentos y cómo se construye la curva.**
111
+
**Ejecuta y pausa los ejemplos para ver claramente los segmentos y cómo se construye la curva.**
0 commit comments