Share
Vemos líneas usadas en muchos escenarios. Las curvas también se utilizan, aunque quizás no con tanta frecuencia, ¡pero eso no socava su importancia! En este tutorial veremos más de cerca las curvas, en particular la curva cuadrática y cúbica, junto con algunas de sus características matemáticas de uso común..
Echemos un vistazo al resultado final en el que trabajaremos. Arrastre los puntos rojos y vea cómo cambian los gradientes en la posición..
Y aquí hay otra demostración, usando curvas cúbicas, sin los gradientes:
En cada una de estas secciones se presentarán cuadráticas y cúbicas. Así que primero veamos la ecuación de las curvas. Estas ecuaciones se escriben en forma polinomial, comenzando con el término de grado más alto. La primera es la ecuación cuadrática (el grado más alto es 2); la segunda es la ecuación cúbica (el grado más alto es 3).
\ [f (x) = Axe ^ 2 + Bx + C \… (eq \ 1) \]
\ [g (x) = Axe ^ 3 + Bx ^ 2 + Cx + D \… (eq \ 2) \]
Tenga en cuenta que A, B, C y D son números reales. Así que ahora que estamos familiarizados con esto, tratemos de visualizarlo. Graficar curvas será nuestro próximo intento..
Primero, vamos a graficar una curva cuadrática. Estoy seguro de que todos los lectores han graficado la curva cuadrática en la clase de matemáticas de la escuela secundaria, pero solo para refrescar la memoria, les presento las gráficas a continuación. Se colocan lado a lado para facilitar la comparación..
La diferencia obvia es el eje y invertido en el espacio de coordenadas de Flash. Se ven simples en general, ¿verdad? Bien, ahora estamos listos para trazar en el espacio de coordenadas de Flash.
Para colocar curvas cuadráticas en el lugar correcto, necesitamos entender sus ecuaciones correspondientes. La curva dibujada depende realmente de los coeficientes de la ecuación (para el caso de la cuadrática, esos son A, B y C).
He incluido una presentación Flash a continuación para que pueda ajustar fácilmente estos coeficientes y obtener una respuesta inmediata..
Para estudiar los efectos de los coeficientes individuales en la curva general, sugiero seguir los pasos a continuación para experimentar con la presentación Flash anterior..
Otra observación interesante es que a lo largo de los pasos segundo y tercero de los anteriores, el punto de inflexión (es decir, el punto de inflexión) permanece en el mismo punto en el eje y.
Ves rápidamente que posicionar una curva es algo difícil. La ecuación utilizada no es práctica si queremos, digamos, ubicar las coordenadas del punto más bajo en una curva.
¿Solución? Reescribiremos la ecuación en una forma deseada. Echa un vistazo a la siguiente ecuación:
\ [f (x) = P (x + Q) ^ 2 + R \]
Sigue siendo una ecuación cuadrática, pero ha tomado otra forma. Ahora podemos controlar fácilmente los puntos mínimos y máximos de la curva. En la presentación anterior de Flash, haga clic en el botón "Enfoque 1" en la parte superior derecha y juegue con los nuevos valores.
Aquí hay una breve explicación de los roles de los coeficientes:
| Coeficiente | Papel |
| PAG | Controlar la inclinación de la curva.. |
| Q | Control del desplazamiento del punto de inflexión de la curva a lo largo del eje x. |
| R | Control del desplazamiento del punto de inflexión de la curva a lo largo del eje y. |
No obstante, sigue siendo una tarea difícil hacer que la curva pase a través de un conjunto dado de puntos. Tendríamos que realizar un precálculo riguroso en el papel antes de traducirlo al código.
Afortunadamente, hay una mejor solución. Pero antes de continuar, echemos un vistazo a la implementación de ActionScript a partir de ahora.
Aquí están las ecuaciones escritas como funciones de ActionScript (ver Graficando.as en la fuente de descarga).
función privada quadratic1 (x: Number, A: Number, B: Number, C: Number): Number // y = A (x ^ 2) + B (x) + C return A * x * x + B * x + C función privada cuadrática2 (x: Número, P: Número, Q: Número, R: Número): Número // y = P * (x + Q) ^ 2 + R retorno P * (x + Q) * ( x + Q) + R
Y aquí hay una implementación del método de dibujo usando Graphics.drawPath (). Solo una nota de que todas las curvas en este artículo están dibujadas de manera similar..
Primero las variables ...
puntos de var privado: vector.= nuevo vector. ; private var drawCommand: Vector. = nuevo vector. ;
Ahora las posiciones y, calculadas en base a las posiciones x y los coeficientes dados.
función privada redibujar (A: Número, B: Número, C: Número): void for (var i: int = 0; i < 400; i++) var x:Number = i - 200; points[i * 2] = x * 10 + stage.stageWidth >> 1; if (isApproach1) points [i * 2 + 1] = quadratic1 (x, A, B, C) + stage.stageHeight >> 1 else points [i * 2 + 1] = quadratic2 (x, A, B , C) + stage.stageHeight >> 1 if (i == 0) drawCommand [i] = 1; else drawCommand [i] = 2; graphics.clear (); graphics.lineStyle (1); graphics.drawPath (drawCommand, puntos);
(Confundido acerca de la >> ¿operador? Echa un vistazo a este tutorial.
Supongamos que nos dan tres puntos por los que la curva cuadrática debe atravesar; ¿Cómo formamos la ecuación correspondiente? Más específicamente, ¿cómo podemos determinar los valores de coeficiente de la ecuación? El álgebra lineal viene al rescate. Analicemos este problema.
Sabemos que las ecuaciones cuadráticas siempre toman la forma escrita en la ecuación. 1 en el paso 1.
\ [f (x) = Axe ^ 2 + Bx + C \… (eq \ 1) \]
Como las tres coordenadas proporcionadas se encuentran en la misma curva, cada una debe satisfacer esta ecuación, con los mismos coeficientes que la ecuación de la curva que estamos buscando. Vamos a escribir esto en forma de ecuación.
Teniendo en cuenta tres coordenadas:
Sustituye estos valores en (eq 1). Tenga en cuenta que A, B, C son desconocidos en este momento.
\ [f (x) = Axe ^ 2 + Bx + C \… (eq \ 1) \]
Ahora, reescribe en forma de matriz. Tome nota de que A, B, C son las incógnitas que estamos resolviendo.
[látex]
\ begin bmatrix S_y \\ T_y \\ U_y \ end bmatrix =
\ begin bmatrix
\ left (S_x \ right) ^ 2 & \ left (S_x \ right) & 1 \\
\ left (T_x \ right) ^ 2 & \ left (T_x \ right) & 1 \\
\ left (U_x \ right) ^ 2 & \ left (U_x \ right) y 1 \ end bmatrix
\ begin bmatrix A \\ B \\ C \ end bmatrix \\
[/látex]
[látex]
\ begin bmatrix
\ left (S_x \ right) ^ 2 & \ left (S_x \ right) & 1 \\
\ left (T_x \ right) ^ 2 & \ left (T_x \ right) & 1 \\
\ left (U_x \ right) ^ 2 & \ left (U_x \ right) & 1 \ end bmatrix ^ - 1
\ begin bmatrix S_y \\ T_y \\ U_y \ end bmatrix =
\ begin bmatrix
\ left (S_x \ right) ^ 2 & \ left (S_x \ right) & 1 \\
\ left (T_x \ right) ^ 2 & \ left (T_x \ right) & 1 \\
\ left (U_x \ right) ^ 2 & \ left (U_x \ right) & 1 \ end bmatrix ^ - 1
\ begin bmatrix
\ left (S_x \ right) ^ 2 & \ left (S_x \ right) & 1 \\
\ left (T_x \ right) ^ 2 & \ left (T_x \ right) & 1 \\
\ left (U_x \ right) ^ 2 & \ left (U_x \ right) y 1 \ end bmatrix
\ begin bmatrix A \\ B \\ C \ end bmatrix \\
[/látex]
[látex]
\ begin bmatrix
\ left (S_x \ right) ^ 2 & \ left (S_x \ right) & 1 \\
\ left (T_x \ right) ^ 2 & \ left (T_x \ right) & 1 \\
\ left (U_x \ right) ^ 2 & \ left (U_x \ right) & 1 \ end bmatrix ^ - 1
\ begin bmatrix S_y \\ T_y \\ U_y \ end bmatrix
= Yo
\ begin bmatrix A \\ B \\ C \ end bmatrix
\\
K ^ - 1 J = L
[/látex]
Por supuesto, podemos usar ecuaciones simultáneas en su lugar, pero prefiero usar matrices porque es más simple. (Nota del editor: mientras entiendas las matrices, eso es!)
Obtendremos el inverso de K y se multiplicará por la matriz J para obtener L. Después de que hayamos resuelto con éxito A, B, C, simplemente sustituiremos en la ecuación cuadrática. Así, tendremos una curva cuadrática que pasa a través de los tres puntos..
Como se mencionó en el paso anterior, debemos realizar una inversión y multiplicación de matriz de 3x3. De ActionScript flash.geom.matrix La clase no podrá ayudar en esto. Por supuesto, tenemos una opción para utilizar flash.geom.Matrix3D, Clase, pero prefiero la biblioteca de Coral porque puedo hacer palanca en estas clases personalizadas y examinar lo que está sucediendo debajo del capó. Personalmente, me parece muy útil cuando tengo dudas sobre el uso adecuado de los comandos incluso después de leer la documentación de la API..
Así que descargue y coloque los archivos Coral descomprimidos en la carpeta de origen del proyecto.
Aquí hay una muestra del resultado. Intente volver a colocar los puntos rojos y ver la curva cuadrática rediseñada para cruzar los tres puntos..
Puedes encontrar el script completo en Draw_curve.as. El siguiente código ActionScript es solo para habilitar los controles del mouse en los puntos pequeños.
función pública Draw_Curve () // configuración de controles c1 = new Circle (0xFF0000); addChild (c1); c1.x = stage.stageWidth * 0.2; c1.y = stage.stageHeight >> 1; c2 = círculo nuevo (0xFF0000); addChild (c2); c2.x = stage.stageWidth * 0.5; c2.y = stage.stageHeight >> 1; c3 = nuevo círculo (0xFF0000); addChild (c3); c3.x = stage.stageWidth * 0.8; c3.y = stage.stageHeight >> 1; c1.addEventListener (MouseEvent.MOUSE_DOWN, mover); c1.addEventListener (MouseEvent.MOUSE_UP, mover); c2.addEventListener (MouseEvent.MOUSE_DOWN, mover); c2.addEventListener (MouseEvent.MOUSE_UP, mover); c3.addEventListener (MouseEvent.MOUSE_DOWN, mover); c3.addEventListener (MouseEvent.MOUSE_UP, mover); redraw () movimiento de función privada (e: MouseEvent): void if (e.type == "mouseDown") e.target.startDrag () e.target.addEventListener (MouseEvent.MOUSE_MOVE, actualizar); else if (e.type == "mouseUp") e.target.stopDrag (); e.target.removeEventListener (MouseEvent.MOUSE_MOVE, actualización); actualización de la función privada (e: MouseEvent): void redraw ();
El núcleo se encuentra en el redibujar función. He resaltado las operaciones matriciales y la función cuadrática para el proceso de redibujado.
función privada redraw (): void K = new Matrix3d (c1.x * c1.x, c1.x, 1, 0, c2.x * c2.x, c2.x, 1, 0, c3.x * c3 .x, c3.x, 1, 0, 0, 0, 0, 1); K.invert () L = nueva Matriz 3d (c1.y, 0, 0, 0, c2.y, 0, 0, 0, c3.y, 0, 0, 0, 0, 0, 0, 0); L.append (K); graphics.clear (); puntos var: vector.= nuevo vector. ; var cmd: vector. = nuevo vector. ; para (var i: int = 0; i < 200; i++) //current x var x:Number = i * 2; //f(x) = A (x^2) + B (x) + C var y:Number = L.n11* x* x + L.n21 * x + L.n31 ; points.push(x, y); if (i == 0) cmd.push(1); else cmd.push(2); graphics.lineStyle(1); graphics.drawPath(cmd, points);
Así que pueden ver que la matriz K se inicializó e invirtió antes de agregarse a la matriz J.
los adjuntar() la función multiplica la matriz actual, J, con la matriz de entrada, K, situada a su izquierda. Otro detalle notable es que no utilizamos todas las filas y columnas en las matrices K y J. Sin embargo, como la inversión de la matriz solo puede ocurrir con una matriz cuadrada, debemos completar la cuarta fila, el elemento de la cuarta columna de K con 1. (No hay necesidad de hacer esto para J porque no necesitamos su inversión en nuestro cálculo. ) Por lo tanto, puedes ver que todos los demás elementos son 0 excepto la primera columna.
Así que eso es todo para dibujar curvas cuadráticas. Vayamos a las curvas cúbicas..
Nuevamente, tendremos una pequeña revisión de graficar estas curvas. Echa un vistazo a la siguiente imagen:
Cuando compara esta curva con la de la cuadrática, notará que es más empinada y que una parte de la curva está debajo del eje x. Una mitad se refleja verticalmente, en comparación con una cuadrática.
He incluido la siguiente presentación en Flash para que pueda experimentar con los coeficientes de una ecuación cúbica. Intente ajustar el valor de A de positivo a negativo y observe la diferencia en la curva producida.
Aquí está la sección importante de la implementación de la gráfica anterior:
función privada redibujar (A: Número, B: Número, C: Número, D: Número): void for (var i: int = 0; i < 400; i++) var x:Number = i - 200; points[i * 2] = x * 10 + stage.stageWidth >> 1; puntos [i * 2 + 1] = cubic1 (x, A, B, C, D) + stage.stageHeight >> 1 if (i == 0) drawCommand [i] = 1; else drawCommand [i] = 2; graphics.clear (); graphics.lineStyle (1); graphics.drawPath (drawCommand, puntos); función privada cubic1 (x: Número, A: Número, B: Número, C: Número, D: Número): Número // y = A (x ^ 3) + B (x ^ 2) + C (x) + D retorno A * x * x * x + B * x * x + C * x + D
Nuevamente, es difícil posicionar la curva cúbica de acuerdo con un conjunto de puntos que atraviesa. Una vez más, nos referimos al álgebra lineal para una alternativa..
Sabemos por el Paso 6 que los coeficientes de una ecuación cuadrática se pueden calcular basándose en tres puntos dados, y la curva dibujada a partir de ella cruzará esos puntos. Un enfoque similar se puede realizar con cualquier cuatro Puntos dados para obtener una ecuación cúbica:
Sustituye estas coordenadas en (eq 2). Tenga en cuenta que A, B, C, D son incógnitas.
\ [g (x) = Axe ^ 3 + Bx ^ 2 + Cx + D \… (eq \ 2) \]
Pero ahora trataremos con una matriz de 4x4 en lugar de una matriz de 3x3:
\ (
\ begin bmatrix S_y \\ T_y \\ U_y \\ V_y \ end bmatrix =
\ begin bmatrix
\ left (S_x \ right) ^ 3 & \ left (S_x \ right) ^ 2 & \ left (S_x \ right) & 1 \\
\ left (T_x \ right) ^ 3 & \ left (T_x \ right) ^ 2 & \ left (T_x \ right) & 1 \\
\ left (U_x \ right) ^ 3 & \ left (U_x \ right) ^ 2 & \ left (U_x \ right) & 1 \\
\ left (V_x \ right) ^ 3 & \ left (V_x \ right) ^ 2 & \ left (V_x \ right) & 1 \ end bmatrix
\ begin bmatrix A \\ B \\ C \\ D \ end bmatrix \\
P = QR \\
Q ^ - 1 P = Q ^ - 1 QR \\
Q ^ - 1 P = IR \\
Q ^ - 1 P = R
\)
Ahora utilizaremos todos los elementos en la matriz 4x4 para Q y toda la primera columna para P. Luego Q se invierte y se aplica a P.
Nuevamente, configuramos los controles del mouse para permitir el arrastre de esos puntos. Cuando se arrastra cualquiera de esos puntos, el recálculo y el redibujado de la curva suceden constantemente.
función pública Draw_Curve2 () // configuración de controles c1 = new Circle (0xFF0000); addChild (c1); c1.x = stage.stageWidth * 0.2; c1.y = stage.stageHeight >> 1; c2 = círculo nuevo (0xFF0000); addChild (c2); c2.x = stage.stageWidth * 0.4; c2.y = stage.stageHeight >> 1; c3 = nuevo círculo (0xFF0000); addChild (c3); c3.x = stage.stageWidth * 0.6; c3.y = stage.stageHeight >> 1; c4 = nuevo círculo (0xFF0000); addChild (c4); c4.x = stage.stageWidth * 0.8; c4.y = stage.stageHeight >> 1; c1.addEventListener (MouseEvent.MOUSE_DOWN, mover); c1.addEventListener (MouseEvent.MOUSE_UP, mover); c2.addEventListener (MouseEvent.MOUSE_DOWN, mover); c2.addEventListener (MouseEvent.MOUSE_UP, mover); c3.addEventListener (MouseEvent.MOUSE_DOWN, mover); c3.addEventListener (MouseEvent.MOUSE_UP, mover); c4.addEventListener (MouseEvent.MOUSE_DOWN, mover); c4.addEventListener (MouseEvent.MOUSE_UP, mover); redibujar (); movimiento de función privada (e: MouseEvent): void if (e.type == "mouseDown") e.target.startDrag () e.target.addEventListener (MouseEvent.MOUSE_MOVE, actualizar); else if (e.type == "mouseUp") e.target.stopDrag (); e.target.removeEventListener (MouseEvent.MOUSE_MOVE, actualización); actualización de la función privada (e: MouseEvent): void redraw ();
redibujar Es la función crucial donde todo sucedió..
función privada redraw (): void var left: Matrix3d = new Matrix3d (c1.x * c1.x * c1.x, c1.x * c1.x, c1.x, 1, c2.x * c2.x * c2.x, c2.x * c2.x, c2.x, 1, c3.x * c3.x * c3.x, c3.x * c3.x, c3.x, 1, c4.x * c4. x * c4.x, c4.x * c4.x, c4.x, 1); left.invert () var right: Matrix3d = new Matrix3d (c1.y, 0, 0, 0, c2.y, 0, 0, 0, c3.y, 0, 0, 0, c4.y, 0, 0 , 0); right.append (izquierda); // f (x) = A (x ^ 3) + B (x ^ 2) + C (x) + D graphics.clear (); puntos var: vector.= nuevo vector. ; var cmd: vector. = nuevo vector. ; para (var i: int = 0; i < 200; i++) var x:Number = i * 2; var y:Number = right.n11 * x * x * x+ right.n21 * x * x+ right.n31 * x + right.n41; points.push(x, y); if (i == 0) cmd.push(1); else cmd.push(2); graphics.lineStyle(1); graphics.drawPath(cmd, points);
Por último, echemos un vistazo al producto. Haga clic y mueva los puntos rojos para ver la curva cúbica dibujada para pasar por todos esos puntos.
Acabamos de pasar por polinomios de dibujo de grado 2 y 3 (cuadráticos y cúbicos). Desde nuestra experiencia, podemos predecir que el cálculo para un polinomio de grado 4 (quíntico) requerirá cinco puntos, lo que requerirá una matriz de 5x5, y así sucesivamente para polinomios de grados aún más altos.
Desafortunadamente, Coral y flash.geom.Matrix3D solo permite matrices 4x4, por lo que tendrás que escribir tu propia clase si es necesario. Sin embargo, rara vez se requiere en los juegos..
Intentemos aplicar nuestro conocimiento para dividir regiones en nuestro escenario. Esto requiere una revisión de las desigualdades de la ecuación. Echa un vistazo a la imagen de abajo.
Esta imagen de arriba muestra una curva que divide las regiones en dos:
No es difícil entender este concepto. De hecho, ya has experimentado con esto en el Paso 11 mientras ajustaste los coeficientes de la fórmula cúbica. Imagínese, en el sistema de coordenadas, que hay un número infinito de curvas, todas diferenciadas solo por un ligero cambio en D:
Así que aquí está la muestra de salida para la curva cuadrática. Puedes intentar mover el punto rojo y ver las regiones coloreadas..
Aquí está el importante fragmento de código ActionScript. Echa un vistazo a la secuencia de comandos completa en Region_Curve.as
función privada redraw (): void var left: Matrix3d = new Matrix3d (c1.x * c1.x, c1.x, 1, 0, c2.x * c2.x, c2.x, 1, 0, c3. x * c3.x, c3.x, 1, 0, 0, 0, 0, 1); left.invert () var right: Matrix3d = new Matrix3d (c1.y, 0, 0, 0, c2.y, 0, 0, 0, c3.y, 0, 0, 0, 0, 0, 0, 0, 0 ); right.append (izquierda); // D = A (x ^ 2) + B (x) + C para cada (var item: círculo en el fondo) var D: Number = right.n11 * item.x * item.x + right.n21 * item .x + right.n31; //trace(background[i◆.y); if (item.y> D) item.color = 0; else item.color = 0xAAAAAA;
Aquí está la muestra con respecto a la curva cúbica..
Y la implementación que viene con él. Una vez más, el guión completo está en Region_Curve2.as
// D = A + B (x) + C (x ^ 2) para cada (var item: círculo en el fondo) var D: Number = right.n11 * item.x * item.x * item.x; + right.n21 * item.x * item.x + right.n31 * item.x + right.n41 //trace(background[i◆.y); if (item.y> D) item.color = 0; else item.color = 0xAAAAAA;
¿Qué tal algunos ajustes para cambiar el color a través de diferentes curvas? Nuevamente, haga clic con el mouse en los puntos rojos y vea los cambios de gradiente en la pantalla.
Aquí está el fragmento de código ActionScript importante extraído de Region_Curve3.as. En primer lugar, querremos averiguar el desplazamiento máximo y mínimo de la curva original..
var max: número = 0; var min: Número = 0; var ds: vector.= nuevo vector. ; // D = A (x ^ 2) + B (x) + C para cada (var item: círculo en el fondo) var D: Number = right.n11 * item.x * item.x + right.n21 * item .x + right.n31; var offset: Number = item.y - D; Ds.push (desplazamiento); if (item.y> D && offset> max) max = offset; else if (item.y < D && offset < min) min = offset;
Una vez hecho esto, lo aplicaremos para colorear los puntos individuales..
// variaciones de color basadas en la compensación color de var: Número para (var i: int = 0; i < background.length; i++) if (Ds[i] > 0) color = Ds [i] / max * 255 // calculando el color para ubicarlo en el fondo [i] .color = color<<16 | color<<8 | color; //define a grayscale else if (Ds[i] < 0) color = Ds[i] / min * 255; background[i].color = color<<16; //define a gradient of red
Así que todo para el dibujo de curvas. A continuación, encontrar las raíces de una curva cuadrática y cúbica. Gracias por leer. Comparta si ve algunas aplicaciones de la vida real que aprovechan este tutorial..
Accentsconagua