Orientación de programación interesante para el diseñador: haga que su imagen funcione (segunda parte): 8 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:40

Las matemáticas, para la mayoría de ustedes, parecen inútiles. El más utilizado en nuestra vida diaria es simplemente sumar, restar, multiplicar y dividir. Sin embargo, es bastante diferente si puede crear con el programa. Cuanto más sepa, más resultado maravilloso obtendrá.

Paso 1: Movimiento y función

Déjame mostrarte varias imágenes desconocidas para estimular tu gusto.

¿Qué es esto? Ahora mantén esta pregunta primero y, después, la sabrás y la usarás.

En el último capítulo, hemos aprendido la configuración de funciones y el dibujo de funciones, lo que puede hacer que los gráficos estáticos se vuelvan dinámicos. Sin embargo, este formato de movimiento es demasiado simple. Vamos a utilizar el conocimiento de funciones que dominamos antes para ejecutar nuestros gráficos con su propio carácter.

¿Cuántas funciones puedes reconocer en las imágenes de arriba? ¿Qué tipo de relación tienen con el movimiento? Ahora, tomemos una función cuadrática, agreguemos algunos parámetros al azar y veamos qué sucede. Por ejemplo, y = x² / 100.

Así es como se ve la imagen de la función. Copie el código a continuación.

[cceN_cpp theme = "dawn"] float x, y; configuración vacía () {tamaño (300, 300); fondo (0); x = 0; } vacío dibujar () {trazo (255); strokeWeight (2); y = pow (x, 2) / 100,0; // La función pow volverá a la enésima potencia del número de designación. (x, 2) representa el cuadrado de x. El primer parámetro es el número base y el segundo es el índice. punto (x, y); x ++; } [/cceN_cpp]

Efecto de ejecución

A continuación, elija la función pecado. Fórmula: y = 150 + sin (x).

Copie el siguiente código.

[cceN_cpp theme = "dawn"] float x, y; configuración vacía () {tamaño (300, 300); fondo (0); x = 0; } vacío dibujar () {y = altura / 2 + sin (radianes (x)) * 150; // Función radianes transformar x en ángulo. x ++; carrera (255); strokeWeight (2); punto (x, y); } [/cceN_cpp]

Efecto de ejecución

Este es el gráfico que obtenemos después de operar el código. Y esas son sus pistas de movimiento. Comparado con el anterior, el resultado es obvio. ¡La imagen de la función corresponde realmente a la pista de movimiento! Es bastante simple. Solo tienes que reemplazar el valor de x, y en coordenadas. La primera pista que dibujamos es equivalente al gráfico de la función y = x² / 100. Mientras que la última pista es igual al gráfico de la función y = 150 + sin (x). Pero en el programa, la dirección del eje y es opuesta. Entonces, en comparación con el gráfico original, la pista estará al revés. Ahora, supongo que debes tener la sensación de que algunas preguntas difíciles que te han perseguido durante mucho tiempo se resuelven de inmediato. ¡Es sorprendente que estas fantásticas funciones que aprendimos antes se puedan usar para controlar el movimiento gráfico!

Paso 2: Para escribir la función

He enumerado varias funciones de uso frecuente a continuación. Espero que estos puedan ayudarnos a traducir funciones en código que pueda ser reconocido por computadora.

Por lo tanto, la fórmula siguiente en el programa se escribirá así:

y = x² → y = pow (x, 2) o y = sq (x)

y = x³ → y = pow (x, 3)

y = xⁿ → y = pow (x, n)

y = 4ⁿ → y = pow (4, n)

y ＝ logₑ² → y = log (2)

y = e² → y = exp (2)

y = √5 → y = raíz cuadrada (5)

También puede escribir aleatoriamente una función en un programa y ver cómo se verá su pista de movimiento. Recuerde considerar el rango de campo de valor y el dominio de definición, o su gráfico se quedará sin pantalla.

Funcion trigonometrica

Ahora, vayamos más allá para conocer algunos escritos de funciones trigonométricas.

Debemos prestar atención a que en el programa la entrada del parámetro de función relativo al ángulo adopta radianes. Así, sin90 ° se escribirá en sin (PI ／ 2). Si no está familiarizado con este método, puede usar la función randians para transformar el ángulo en radianes de antemano y luego escribir sin （radianes (90)).

El uso de grados de función es comparativamente opuesto. Puede transformar radianes en ángulo. Ingrese print (grados (PI / 2)) directamente en el área de edición y vea lo que obtendrá.

Paso 3: Controle el movimiento gráfico con la función trigonométrica

Aquí tienes un caso para que veas el efecto real del movimiento gráfico.

[cceN_cpp theme = "dawn"] float x, y; configuración vacía () {tamaño (700, 300); } vacío dibujar () {fondo (234, 113, 107); y = sin (radianes (x)) * 150 + 150; x ++; noStroke (); elipse (x, y, 50, 50); } [/cceN_cpp]

La función pecado es una función periódica. Su valor mínimo es －1 y el valor máximo es 1. La altura de la pantalla es 300. Referido ay = sin (radianes (x)) * 150 + 150, por lo tanto, el rango de cambio del valor y estará bien controlado dentro de 0 hasta 300.

Círculo giratorio

Bueno, finalmente hemos llegado a la parte más importante de este capítulo. ¿Cómo dibujar una trayectoria circular en un programa? ¿Cómo usar las funciones para mostrarlo? Permítanme mostrarles las dos imágenes que vimos al comienzo de este artículo nuevamente.

De hecho, han expuesto visualmente la relación entre las coordenadas de la circunferencia y la función trigonométrica. El movimiento en las imágenes de arriba es impulsado por la variable independiente θ en constante aumento. La izquierda es la imagen de la función sin y cos, y la derecha representa un punto que realiza un movimiento circular después de ser mapeado. ¿No es muy inteligente? Ya no es misterioso. Puedes usar código para realizarlo.

Un simple ejemplo:

[cceN_cpp theme = "dawn"] float x, y, r, R, angle; configuración vacía () {tamaño (300, 300); r = 20; // Diámetro del círculo R = 100; // Radio de trayectoria de movimiento x = 0; ángulo = 0; y = altura / 2; } vacío dibujar () {fondo (234, 113, 107); traducir (ancho / 2, alto / 2); // Mueve el punto original al centro de la pantalla. noStroke (); x = R * cos (ángulo); y = R * sin (ángulo); elipse (x, y, r, r); ángulo + = 0,05; } [/cceN_cpp]

¡Mirar! ¡Aparece un círculo giratorio! Aquí, la variable independiente ya no está en constante aumento bit convertido en ángulo (igual a θ en la imagen). Es un soporte para el ángulo. Entre ellos, xy tienen un coeficiente R relativamente multiplicado, lo que conduce a la extensión del radio de movimiento del círculo (R es para el radio). Si no multiplica R, su trayectoria de movimiento estará limitada dentro del rango de -1 a 1.

¿Por qué no usar la x creciente? De acuerdo con la propiedad de la función en sí, cualquier x dentro del dominio de definición tiene la única y que coincide con ella. Entonces, en el sistema de coordenadas de dimensión rectangular plana, no puede encontrar una "función simple" para dibujar un círculo directamente. Es decir, ya no podemos usar este formato.

y = (¿La expresión desconocida de x?);

x ＋＋;

Entonces tenemos que cambiar nuestra idea. Elija otro ángulo como variable independiente y luego use la función sin y cos para transformarlo en coordenadas horizontal y vertical.

x = R * cos (ángulo);

y = R * sin (ángulo);

ángulo + = 0,05;

Algunos de ustedes se preguntarán por qué puede mostrar la trayectoria del movimiento circular. De acuerdo con la definición de función trigonométrica, podemos razonar fácilmente esa función sin la razón del lado opuesto a la hipotenusa; la función cos es la razón de adyacente a la hipotenusa. No importa dónde esté el punto del círculo, r (radio) permanecerá sin cambios. Por lo tanto, podemos concluir la expresión de la coordenada xy la coordenada y.

Debido a que esto no es una guía matemática, aquí voy a dejar de mostrarte más conocimientos sobre la función trigonométrica. Si quieren saberlo o simplemente lo olvidan, pueden intentar revisarlo ustedes mismos.

Por supuesto, está bien si no puede comprenderlo completamente. Solo tienes que saber utilizarlo para dibujar un círculo. Esta es también una especie de "idea de programación". Más adelante, a menudo invocaremos algunos de los módulos existentes creados por otros para realizar un cierto tipo de función. No se esfuerce por conocerlo en detalle.

Sin embargo, la función pecado y cos es común. Si desea realizar una creación de nivel superior, es mejor que intente conocerla a fondo. Si esta pregunta en sí puede impulsarnos a aprender más conocimientos matemáticos, hay cosas más interesantes esperando que investigue.

Estas son imágenes muy relacionadas con la función trigonométrica.

Paso 4: Sistema de coordenadas de movimiento

Los efectos anteriores tienen que ver con los cambios de coordenadas gráficas. El sistema de coordenadas en sí es estático. De hecho, podemos hacer que la coordenada se mueva para realizar el efecto de movimiento. Es como si la gente en la playa observara a las otras personas en el barco. Para las personas en el barco, el barco está estático. Pero, ¿qué pasa si el barco en sí se está moviendo, entonces la gente en el barco se mueve con él? Los primeros casos tienen que ver con "gente corriendo en el barco". En realidad, el barco no se mueve. A continuación, se muestran algunas funciones comunes para cambiar el sistema de coordenadas.

Función traducir

La función traducir, de la que hemos hablado anteriormente, se usa para mover el sistema de coordenadas del gráfico horizontalmente.

Formato de invocación:

traducir (a, b)

El primer parámetro significa moverse a la dirección positiva del eje x para píxeles. El segundo parámetro significa moverse a la dirección positiva del eje y para b píxeles.

Compare los dos códigos e intente encontrar alguna diferencia. (Para simplificar el código, podemos eliminar el tamaño de la función, el ancho y la altura de la pantalla están predeterminados en 100).

Antes de usar:

elipse (0, 0, 20, 20);

Después de que usamos:

traducir (50, 50);

elipse (0, 0, 20, 20);

Función rotar

Formato de invocación:

rotar (a)

Se utiliza para rotar el sistema de coordenadas. Cuando el parámetro es positivo, elegirá el punto original como punto central y rotará en el sentido de las agujas del reloj. La entrada del parámetro es la misma que la función trigonométrica para usar radianes.

Antes de usar:

elipse (50, 50, 20, 20);

Después de su uso:

rotar (radianes (30));

elipse (50, 50, 20, 20);

El efecto en el programa es hacer que el círculo gire alrededor del punto central de coordenadas en el sentido de las agujas del reloj durante 30 grados.

Escala de funciones

Formato de invocación:

escala (a)

Esta función puede reducir el sistema de coordenadas. El valor es para escalar. Cuando el parámetro está más allá de 1, amplíe; si es menor que 1, aleja la imagen.

Antes de usar:

elipse (0, 0, 20, 20);

Después de su uso:

escala (4);

elipse (0, 0, 20, 20);

El círculo de la imagen de arriba se amplía cuatro veces el tamaño original. Además, puede utilizar dos parámetros para alejar las direcciones del eje xy del eje y por separado.

escala (4, 2);

elipse (0, 0, 20, 20);

Superposición de la función de transformación

Aquí, la superposición se trata de cambios relativos al sistema de coordenadas actual. En otras palabras, los efectos se pueden superponer.

traducir (40, 10);

traducir (10, 40);

elipse (0, 0, 20, 20);

Su efecto final será igual a

traducir (50, 50);

elipse (0, 0, 20, 20);

Lo mismo para la función rotar

rotar (radianes (10));

rotar (radianes (20));

elipse (50, 50, 20, 20);

Igual a

rotar (radianes (30));

elipse (50, 50, 20, 20);

Ambas funciones escalan y giran en el centro del punto original para escalar y rotar. Si queremos obtener el efecto de rotación con una posición central en (50, 50), tenemos que pensar de manera opuesta. Primero mueva el punto original a la posición de (50, 50), luego agregue la función de transformación rotatoria. Finalmente haz tu gráfico pintado sobre el punto original.

Antes de usar:

elipse (50, 50, 50, 20);

Después de su uso:

traducir (50, 50);

rotar (radianes (45));

elipse (0, 0, 50, 20); // Para ver el cambio del ángulo de rotación, hemos hecho un óvalo.

Puede parecer retorcido. Solo tienes que practicar más para entenderlo. (También puede intentar cambiar la secuencia de la función trasladar y rotar para ver la diferencia).

Movimiento horizontal y movimiento circular

En los siguientes casos, vamos a realizar el efecto de movimiento cambiando el sistema de coordenadas. Al mismo tiempo, me gustaría pedirle que consulte el ejemplo del capítulo anterior. La mayoría de las veces, encontrará que para realizar un cierto tipo de efecto, puede utilizar un método totalmente diferente.

Paso 5: movimiento horizontal

[cceN_cpp theme = "dawn"]

int x, y; configuración vacía () {tamaño (300, 300); x = 0; y = altura / 2; } vacío dibujar () {fondo (234, 113, 107); noStroke (); traducir (x, y); elipse (0, 0, 50, 50); x ++; } [/cceN_cpp]

La coordenada del círculo no se cambia, pero se cambia su sistema de coordenadas.

Girar movimiento

[cceN_cpp theme = "dawn"] float r, R, angle; configuración vacía () {tamaño (300, 300); r = 20; // Dimensión del círculo R = 100; // Radio de la pista de movimiento} void draw () {background (234, 113, 107); traducir (ancho / 2, alto / 2); // Mueve el punto original al centro de la pantalla. rotar (ángulo); noStroke (); elipse (0, R, r, r); ángulo + = 0,05; } [/cceN_cpp]

¿No es mucho más claro y simple que la función trigonométrica? Puede que tengas una pregunta aquí. Tome el código rotativo como ejemplo. Obviamente, la función de transformación mencionada anteriormente es relativa y permite la superposición. Si escribimos traducir (ancho / 2, alto / 2) en la función dibujar, ¿no significa que cada vez que la función dibujar funciona por una vez, el sistema de coordenadas se moverá una distancia? en la dirección inferior derecha de la base original? Es razonable que no se quede en el centro de la pantalla para siempre.

Puedes entender de esta manera. Una vez que el código en la función dibujar ha completado una operación desde arriba hacia abajo, el sistema de coordenadas volverá al estado inicial en la segunda operación. El punto original del sistema de coordenadas estará predeterminado para volver a la esquina superior izquierda. Entonces, si queremos que el sistema de coordenadas cambie continuamente, los parámetros de ángulo dentro de la función rotar aumentarán constantemente su valor.

Acceder al estado de coordenadas

A veces, no queremos que el cambio de estado del sistema de coordenadas se base en el anterior. En este momento, tenemos que usar la función pushMatrix y popMatrix. Las dos funciones suelen aparecer en pareja. La función pushMatrix está antes de popMatrix. No se pueden usar únicamente, o saldrá mal.

Ejemplo:

[cceN_cpp theme = "amanecer"] pushMatrix (); // Almacenar el estado del sistema de coordenadas translate (50, 50); elipse (0, 0, 20, 20); popMatrix (); // Leer el estado del sistema de coordenadas rect (0, 0, 20, 20); [/cceN_cpp]

En este ejemplo, antes de usar translate (50, 50), usamos la función pushMatrix. Para almacenar el estado actual del sistema de coordenadas. Este, al mismo tiempo, es el estado inicial. Después de que dibujamos un círculo, luego implementamos popMatrix, volverá a este estado. En este momento, implemente la función rect, encontrará que no ha sufrido la influencia de la función translate, sino que dibuja un cuadrado en la esquina superior izquierda del punto original.

Además, la función pushMatrix y popMatrix permiten el anidamiento.

Por ejemplo

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

Para mostrar su relación de forma intuitiva, elegimos el formato condensado.

¿Movimiento combinado o movimiento en movimiento?

Ahora comienza la segunda ola de parte importante. Intenta seguir adelante. Anteriormente, usamos una metáfora de barco y personas. ¿Alguna vez has pensado en qué pasaría si hiciéramos que tanto la gente como el barco se movieran, qué tipo de sentimiento tendrá la gente en la playa?

Como combinar el movimiento horizontal con el movimiento giratorio del sistema de coordenadas. En realidad, el punto aquí es moverse solo en una dirección.

[cceN_cpp theme = "amanecer"] int x, y; ángulo de flotación; configuración vacía () {tamaño (300, 300); fondo (234, 113, 107); noStroke (); x = 0; // Cuando el valor inicial de x es 0, podemos descuidar esta oración de código. Al declarar variable, el valor predeterminado es 0. y = 0; // Lo mismo que el anterior. ángulo = 0; // Lo mismo que el anterior. } vacío dibujar () {ángulo + = 0,25; y--; traducir (ancho / 2, alto / 2); pushMatrix (); rotar (ángulo); elipse (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Y hay movimiento circular y escalado del sistema de coordenadas.

[cceN_cpp theme = "dawn"] float x, y, angle; configuración vacía () {tamaño (300, 300); fondo (234, 113, 107); noStroke (); } vacío dibujar () {ángulo + = 0.01; x = sin (ángulo) * 100; y = cos (ángulo) * 100; traducir (ancho / 2, alto / 2); pushMatrix (); escala (1 + 0.1 * sin (ángulo * 10)); elipse (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

¡No te dejes engañar! El punto del círculo en realidad está haciendo un movimiento circular. No es difícil de entender si lo comparamos con escalar con una cámara de video. Una cámara de video que se mueve constantemente hacia adelante o hacia atrás está filmando un punto en movimiento circular.

¿Sorprendido? Estas son funciones básicas simples. Pero con una combinación diferente, podemos crear tantos efectos diferentes. Hasta ahora, mi exposición se detiene para dejar algo de espacio para su exploración.

Paso 6: uso integral

Pronto terminará este capítulo. En los dos últimos capítulos, he presentado el método básico del movimiento gráfico. Creo que es posible que lo comprenda más profundamente, en comparación con sus ideas iniciales. Por último, como mínimo, aquí hay un ejemplo completo para su referencia.

[cceN_cpp theme = "dawn"] float x1, y1, x2, y2, r, R; ángulo de flotación1, ángulo2; configuración vacía () {tamaño (300, 300); r = 12; R = 120; ángulo1 = 0; ángulo2 = PI / 4; } vacío dibujar () {fondo (234, 113, 107); noStroke (); traducir (ancho / 2, alto / 2); ángulo1 + = 0,02; ángulo2 + = 0,06; x1 = R * sin (ángulo1); y1 = R * cos (ángulo1); x2 = R / 2 * sin (ángulo2); y2 = R / 2 * cos (ángulo2); elipse (x1, y1, r / 2, r / 2); elipse (x2, y2, r, r); elipse (-x1, -y1, r / 2, r / 2); elipse (-x2, -y2, r, r); elipse (x1, -y1, r / 2, r / 2); elipse (x2, -y2, r, r); elipse (-x1, y1, r / 2, r / 2); elipse (-x2, y2, r, r); carrera (255); strokeWeight (3); línea (x1, y1, x2, y2); línea (-x1, -y1, -x2, -y2); línea (x1, -y1, x2, -y2); línea (-x1, y1, -x2, y2); } [/cceN_cpp]

Este ejemplo no contiene ningún conocimiento más allá de nuestro capítulo anterior introducido.

¿Para qué puntos coincide? ¿Qué líneas coincide? No puedo entenderlo también. Pero recuerdo que se deriva de una pequeña sección de código.

Ésta es la naturaleza de su movimiento. Las líneas de descanso son solo efecto espejo. Si continúa siguiendo esta guía, puede hacer una versión actualizada y agregar un controlador a su gráfico para cambiar su estado de movimiento gráfico en tiempo real.

El punto interesante de la programación radica en que se pueden diseñar o combinar normativas. Sin embargo, cuál será el programa final depende de tu habilidad. Por lo general, los diseñadores tienen una imaginación gráfica poderosa. Puede dibujar una imagen en su cabeza y luego intentar traducirla en código. Además, puede partir del propio código y normativa, diseñar funciones y variables a voluntad. ¡Recuerde que Processing es su boceto y el código son sus pinceles! ¡Solo rocía tus ideas libremente!

Paso 7: FIN

Por último en nuestro capítulo, volvamos a una pregunta que conservamos durante mucho tiempo desde el principio. ¿De qué sirve gastar tanto esfuerzo para hacer una imagen con el programa? Una vez que haya aprendido este capítulo, encontrará que hay muchos métodos de juego esperando que los explore.

[cceN_cpp theme = "dawn"] flotante browX, earD, eyeD, faceD; configuración vacía () {tamaño (500, 500); } vacío dibujar () {fondo (200, 0, 0); browX = 150 + sin (frameCount / 30.0) * 20; earD = 180 + sin (frameCount / 10.0) * 20; eyeD = 60 + sin (frameCount / 30.0) * 50; faceD = 300; strokeWeight (8); elipse (175, 220, earD, earD); elipse (ancho - 175, 220, earD, earD); rect (100, 100, faceD, faceD); línea (browX, 160, 220, 240); línea (ancho-cejaX, 160, ancho-220, 240); relleno (aleatorio (255), aleatorio (255), aleatorio (255)); elipse (175, 220, eyeD, eyeD); elipse (ancho-175, 220, eyeD, eyeD); llenar (255); punto (ancho / 2, alto / 2); triángulo (170 - cos (frameCount / 10.0) * 20, 300 - sin (frameCount / 10.0) * 20, ancho - (170 + cos (frameCount / 10.0) * 20), 300 + sin (frameCount / 10.0) * 20, 250, 350); } [/cceN_cpp]

¿No es mágico para gráficos dinámicos? Aquí no les muestro demasiados casos. Es posible que puedas diseñar un efecto mucho mejor que yo. Existe la ventaja de dibujar con el programa, puedes jugar con cada píxel. Dado que su gráfico no es un mapa de bits, todos los puntos clave de su gráfico son controlables. Puede realizar algunos efectos que otro software no puede realizar.

Si tienes un corazón que quiere romperlo todo y volver a combinarlo, el programa de estudios te ayudará mucho a cumplir esta idea.

Este artículo proviene del diseñador Wenzy.

Paso 8: Lecturas relativas:

Orientación de programación interesante para el diseñador: procesamiento del toque inicial

Interesante guía de programación para el diseñador: cree su primer programa de procesamiento

Orientación de programación interesante para el diseñador: haga que su imagen funcione (primera parte)

Si tiene alguna pregunta, puede enviar un correo electrónico a [email protected].

Este artículo es de: