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

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

¡Correr! ¡Correr! ¡Correr!

Programar no es tan difícil. El punto clave es encontrar tu ritmo y hacerlo uno a uno.

Antes de leer este capítulo, espero que ya se haya familiarizado con el método de dibujo de funciones básicas, o se sentirá mareado y confundido por dos funciones importantes: configurar y dibujar.

Como queremos hacer gráficos de movimiento, tenemos que saber cómo se produce la animación.

La imagen de arriba parece bastante atractiva y revela visualmente el principio de implementación de la animación.

La animación es mágica. Es una magia sobre el engaño visual. Sin embargo, en esta información explotada, la era de las inundaciones de video, ya nos hemos acostumbrado. Pocas personas se sorprenderán de que sea increíble poder ver la animación.

El mismo principio se puede aplicar a la animación de dibujos con el programa. Tenemos que considerar cómo dibujar diferentes gráficos en cada cuadro, y el programa automáticamente pasará las páginas mientras complementamos una animación completa en nuestra cabeza. En el siguiente capítulo, hablaremos sobre cómo realizar el movimiento gráfico básico. Antes de eso, necesitamos conocer algunos conocimientos básicos sobre variables.

Paso 1: variable

La variable es el contenedor de datos. Se puede utilizar repetidamente dentro de un programa.

Por ejemplo:

[cceN_cpp theme = "dawn"] tamaño (500, 500); elipse (100, 250, 50, 50); elipse (200, 250, 50, 50); elipse (300, 250, 50, 50); elipse (400, 250, 50, 50);

[/cceN_cpp]

Esta sección de código no ha utilizado ninguna variable. Dibuja cuatro círculos en la pantalla. Podemos encontrar que tienen el mismo ancho y alto. Ahora que es el mismo, para minimizar la entrada de datos repetidos, podemos definir un signo para representarlo. Este signo es variable.

Aquí está el código después de agregar una variable:

[cceN_cpp theme = "dawn"] tamaño (500, 500); int a = 50; elipse (100, 250, a, a); elipse (200, 250, a, a); elipse (300, 250, a, a); elipse (400, 250, a, a);

[/cceN_cpp]

¡Obtenemos el mismo resultado!

Como hemos definido la variable a, podemos cambiar los parámetros convenientemente. Si cambiamos a = 50 a a = 100, entonces el ancho y la altura de todos los círculos se convertirán en 100 de manera uniforme. Entonces no tenemos que cambiar los parámetros uno por uno. Variable es realmente un buen invento.

Paso 2: la creación de variable

Antes de usar la variable, tenemos que hacer una declaración y designar su tipo de datos.

int i;

i 50;

La primera oración de código ha hecho una declaración para una variable i. int es un símbolo que se utiliza principalmente para declarar variables. Al declarar, dejará un espacio en la memoria de la computadora, lo que equivale a generar una "caja", especialmente utilizada para restaurar datos enteros. La segunda oración significa hacer que la asignación 50 sea implementada por la variable i. Después de la implementación de esta oración, los datos se almacenarán en la variable i de manera estable. O puede ser más perezoso para combinar las dos oraciones anteriores en una y completar la tarea mientras hace una declaración.

int i ＝ 50;

Es relativamente libre nombrar una variable. Pero a veces tenemos que prestar atención a algo.

Paso 3: Regulación de nombres de variables

• Debe ser la combinación de alfabeto y subrayado. Puede ser un símbolo o una palabra.

• Distingue mayúsculas y minúsculas. El nombre y el nombre pueden representar diferentes variables.

• Trate de nombrarlo lo más fácil posible para que pueda entenderlo de una sola vez. El carácter inicial debe ser un alfabeto en lugar de un número o un carácter especial.

• Sin palabras clave como int, float

Las siguientes son algunas declaraciones incorrectas.

int $ a;

int 89b;

Aquí están las declaraciones correctas:

int r;

int super_24;

int openTheDoor;

Paso 4: Tipo de variable

Excepto para declarar datos enteros, podemos declarar datos decimales (también llamados datos de coma flotante) con la palabra clave float.

flotar b = 0.5

Tenemos que tener en cuenta el tipo de datos que usamos para nuestra declaración. Si hemos usado la palabra clave int, la última asignación no puede escribir i ＝ 0.5 o algo así, o el programa se convertirá en un error. Pero si escribimos de manera opuesta, está bien. Por ejemplo, float i = 5 es la gramática correcta, pero el programa lo reconocerá como un número decimal.

Algunas de las variables ya se han definido por sistema. No tenemos que declararlos nosotros mismos. Al igual que el "ancho, alto" anteriormente mencionado, adquirirá automáticamente el ancho y alto de la pantalla de la computadora. Tan alta frecuencia de uso que el diseñador la define directamente como una variable predeterminada para que sea más conveniente para nosotros.

Paso 5: operador

Los siguientes son operadores de procesamiento:

+ más

- menos

* multiplicar

dividir

％ Módulo de resto

Debe estar familiarizado con todos estos operadores excepto%. Parece bastante extraño porque su resultado es el resto. 9% 3 es 0. Mientras que 9% 5 es 4.

Los operadores se pueden utilizar entre asignaciones y variables.

[cceN_cpp theme = "dawn"] int a = 1; // declara la variable entera a, la asignación es 1. int b = 2; // Declara la variable entera b, la asignación es 2. int c; // Declarar variable entera c. c = a + b; // Más dos asignaciones y asigna su resultado a c. imprimir (c); // Variable de salida c.

[/cceN_cpp]

Paso 6: Resultado de la operación:

El resultado de la salida no se mostrará en la ventana sino en la consola en la parte inferior.

El método de escritura de la cuarta línea parece bastante extraño. Pero es un formato común que se usa con frecuencia durante la asignación de computadoras. El lado izquierdo del símbolo igual debe ser la variable asignada final, mientras que el lado derecho debe ser el proceso de operación.

La función de impresión en la quinta línea puede imprimir variables en la consola, que a menudo se usa para probar la condición de la salida de datos.

Paso 7: Regulación de la operación

Un punto problemático en Processing es que tenemos que aclarar el tipo de variable. Tenemos que prestar especial atención al proceso de número de punto flotante y tipo de entero.

imprimir （6/5）; // resultado 1

La operación entre enteros tendrá un nuevo entero. 6 dividido por 5 es 1,2. Pero el resultado de la salida del programa es 1. Esto es contrario a nuestra intuición. El programa no se ocupará de redondear, sino que eliminará el número detrás del punto decimal.

imprimir (6.0 / 5.0); // resultado 1.2

La operación entre puntos flotantes dará como resultado un nuevo número de punto flotante. Si el resultado real es 1,2, el resultado de salida del programa será el mismo.

imprimir (6 / 5,0); // resultado 1.2

imprimir (6.0 / 5); // resultado 1.2

Finalmente, es la mezcla de números enteros y de coma flotante. El resultado final de salida será 1.2.

• En realidad, debe tener en cuenta que el objetivo del diseño de este reglamento es no perder la precisión de los datos. Entonces, si un elemento es un número de punto flotante, el resultado también será un número de punto flotante.

Paso 8: Función de configuración y función de dibujo

Anteriormente hemos hablado de una pila de conocimientos básicos. Ahora, finalmente llegamos a tocar algo interesante. La configuración de funciones y el dibujo son equivalentes a las funciones principales de procesamiento. Estas dos funciones son muy especiales. Puede controlar el procedimiento del programa. Un programa comparativamente complicado incluirá estas dos funciones porque son el marco básico del programa. Formato:

configuración vacía () {

}

vacío dibujar () {

}

El uso especial hace que su formato de invocación sea diferente al de las otras funciones. Tenemos que agregar "void" antes del nombre de la función, que es sinónimo de "valor devuelto". Detrás del nombre de la función, tenemos que agregar paréntesis y llaves.

[cceN_cpp theme = "dawn"] void setup () {print (1); } vacío dibujar () {imprimir (2); } [/cceN_cpp]

Echemos un vistazo a un ejemplo:

Cuando presione el botón de operación, la consola emitirá primero "1" y luego emitirá constantemente "2" hasta que haya presionado el botón de parada o cerrado la ventana.

El código entre paréntesis en la función de configuración se implementará solo una vez, mientras que el código dentro de la función dibujar se ejecutará constantemente en circulación (implementación predeterminada 60 veces / segundo).

Debido a este carácter, la configuración se usa generalmente para inicializar las propiedades del entorno, como el ancho y el alto de la pantalla, el color de fondo y todo tipo de asignación de variables. Si bien a menudo colocamos funciones de dibujo en la función de dibujo para generar gráficos que cambian continuamente.

Paso 9: Círculo en movimiento horizontal

Con la función dibujar, podemos empezar a crear nuestras animaciones. El método de escritura de efectos de animación mediante Processing es bastante "incómodo". No tiene ningún comando existente. Por ejemplo, designe una forma determinada para que sea curvilínea.

Tenemos que definir estos detalles por nosotros mismos. Tienes que decirle al programa qué tipo de gráficos necesita cada cuadro definitivamente.

Escriba el siguiente código en él (ahora comencemos a hacerlo con las manos):

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

[/cceN_cpp]

Esta sección de código muestra un círculo de movimiento. Las primeras variables declaradas x, y se utilizan para almacenar la posición de la coordenada. Sus asignaciones se ejecutan en la configuración de funciones. El código clave es el siguiente dentro de la función dibujar:

x = x + 1

No lo veas como una ecuación matemática, o será muy extraño. Aquí, "＝" es un símbolo de asignación. Representa colocar los números de la derecha en la variable de la izquierda. Suponga que x es 50, una vez que el código comienza a ejecutarse, el lado derecho de "＝" es igual a 50 + 1, es decir, 51. El resultado final se asignará a la variable x. Entonces, el valor de x se convierte en 51.

Siga el procedimiento del programa, cada vez que la función dibujar opere por una vez, el valor de x aumentará 1. Por lo tanto, cada vez que dibujemos, el círculo se moverá una dirección de píxel horizontalmente hacia la derecha, en comparación con el cuadro anterior. Por lo tanto, el gráfico se vuelve móvil.

• Para que el código tenga una mejor legibilidad, tenemos que dejar un cierto espacio antes de cada línea de código entre llaves. Y estará lo más alineado posible. Presione TAB o varios espacios en blanco, puede retraerse.

• El símbolo de espacio en blanco y salto de línea en el programa no influirá en el programa. Entonces está bien si escribimos uno más o menos.

Aquí hay otra forma más sencilla de expresarlo. Para hacer que el círculo variable aumente 1 automáticamente, tenemos que escribirlo en el siguiente formato.

círculo ＝ círculo ＋1

¡Muy inconveniente! Si el nombre de la variable es más largo, entonces tenemos que escribir más palabras. Así que nuestros perezosos predecesores piensan en una idea como esta.

círculo ＋＋

¿No es muy sencillo? Significa aumentar 1 automáticamente. Similar a esto, hay - -, lo que significa disminuir 1 automáticamente.

Pero si esperamos que la cantidad de aumento automático sea otro número como 2, tenemos que probar con otra expresión.

círculo + = 2

Esto equivale a

círculo = círculo + 2

De manera similar, hay - ＝, / =, * =.

Paso 10: Dirección del movimiento

La dirección en la que se mueve el gráfico depende de cómo cambie su coordenada. Si se cambia a y ＝ y ＋ 1, el círculo se moverá hacia abajo. Si tanto x como y aumentan en 1, el círculo se moverá hacia abajo en la parte inferior derecha. Si escribimos que es un símbolo menos, se moverá en la dirección opuesta.

[cceN_cpp theme = "amanecer"] int x, y; // Puede declarar múltiples variables al mismo tiempo, use coma para separar. configuración vacía () {tamaño (300, 300); x = 0; y = 0; } vacío dibujar () {fondo (234, 113, 107); noStroke (); elipse (x, y, 50, 50); x ++; y ++; }

[/cceN_cpp]

Tasa de movimiento

¿Recuerda los 60 cuadros por segundo predeterminados dentro de la función dibujar? Según esta velocidad, el círculo de arriba se moverá 60 píxeles por segundo hacia la derecha.

Si queremos cambiar la velocidad de movimiento del gráfico, existen dos métodos: uno es aumentar el valor de x cada vez que se vaya a cambiar.

x ＝ x ＋ 10

¡Ha mejorado la velocidad 10 veces en comparación con la original!

El otro método consiste en cambiar la frecuencia de actualización del lienzo. cuadros por segundo()

Esta función puede cambiar la frecuencia de transmisión del lienzo. Escriba frameRate (10) en la configuración de la función, cambiará los 60 cuadros por segundo originales a 10 cuadros por segundo. La velocidad se reduce 6 veces más que antes.

Paso 11: Fondo ignorado

Todos los ejemplos anteriores escriben background en function draw. ¿Alguna vez ha pensado en escribirlo en la configuración de funciones? ¿Tendrá alguna diferencia? Ahora, actualicemos el ejemplo de movimiento horizontal.

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

¿Qué ha pasado? Tal vez no pueda comprender correctamente el motivo de la producción del problema. Elimine la función noStroke, vuelva a agregar un trazo y vea la trayectoria de movimiento del círculo.

¡Oh, es porque el círculo creado anteriormente no ha sido eliminado! Debido a que la configuración de la función funciona solo una vez, si escribimos el fondo encima, llenará el fondo solo una vez y, por último, ya no tendrá ningún efecto. El fondo de la función es como una herramienta de cubo de pintura. Una vez utilizado, cubrirá todo el contenido del lienzo en lugar de establecer solo un color de fondo. Lo escribimos antes de la función dibujar para que el marco anterior se cubra cada vez que creamos un nuevo patrón. Por lo tanto, el círculo puede funcionar como esperábamos. Excepto por recordar los usos de cada función, tenemos que pensar en la posición del código. Mucho tiempo, la línea hacia arriba o hacia abajo para el código y escribirlo dentro o fuera de una llave, creará efectos bastante diferentes. La dirección del código es bidimensional. Si aparece un error, tenemos que calibrar en esta dos dimensión.

• Este método de dibujo no repetido puede crear un efecto muy especial si se utiliza correctamente. Puede copiar el siguiente código y probarlo.

[cceN_cpp theme = "dawn"] configuración vacía () {tamaño (400, 400); } vacío dibujar () {elipse (ancho / 2-mouseX, alto / 2-mouseX, mouseY, mouseY); elipse (ancho / 2-mouseX, alto / 2 + mouseX, mouseY, mouseY); elipse (ancho / 2 + mouseX, alto / 2-mouseX, mouseY, mouseY); elipse (ancho / 2 + mouseX, alto / 2 + mouseX, mouseY, mouseY); } [/cceN_cpp]

Aquí hemos utilizado la variable mágica mouseX y mouseY. Más adelante hablaremos de ello en detalle.

Paso 12: Círculo de agitación

¿Qué pasa si quiero que la dirección del movimiento del círculo se vuelva irregular? Con la función aleatoria de forma inteligente, también puede realizar este efecto. Aleatorio es una función de uso frecuente. Se puede utilizar para generar funciones aleatorias. Es como un espíritu sin huellas. Una vez relacionado con las variables, no se puede imaginar qué será lo próximo.

Formato de invocación:

aleatorio (alto)

Alto representa el límite superior aleatorio y el límite inferior predeterminado es 0. Por ejemplo, aleatorio (10). Producirá un número del 0 al 10 al azar (se incluye 0 pero no 10).

aleatorio (bajo, alto)

Si establecemos dos parámetros, volverá al valor aleatorio entre ellos, por ejemplo, aleatorio (5, 10). Producirá un número del 5 al 10 al azar (se incluye 5 pero no se incluye 10).

Ejemplo:

[cceN_cpp theme = "dawn"] float x;

x = aleatorio (50, 100);

imprimir (x); [/cceN_cpp]

Cada vez que ejecutamos el programa, la consola generará valores diferentes.

• Nota: Los valores creados por la función aleatoria pertenecen al tipo de coma flotante (tipo de número decimal). Si queremos asignar un valor a la variable entera, tenemos que transformarla mediante la función int (). La transformación no se rige por el redondeo, sino que elimina la parte decimal directamente. Por lo tanto, la salida de int (random (5)) tiene solo 5 posibilidades: 0, 1, 2, 3, 4.

Después de familiarizarnos con el uso de la función aleatoria, podemos entrar directamente en el caso siguiente.

[cceN_cpp theme = "amanecer"] int x, y; configuración vacía () {tamaño (300, 300); x = ancho / 2; y = altura / 2; } vacío dibujar () {fondo (234, 113, 107); noStroke (); x + = int (aleatorio (-5, 5)); y + = int (aleatorio (-5, 5)); elipse (x, y, 50, 50); }

[/cceN_cpp]

Los primeros valores de las coordenadas añadidas son fijos. Solo si aumentamos un valor aleatorio, el círculo se moverá en una dirección indefinida. Con el rango aleatorio más grande, tiembla con más frecuencia. Dado que el cambio de valor entre fotogramas se rebota, el movimiento ya no será suave. Mientras que el primer marco está en (150, 150), el último marco se moverá a la posición de (170, 170) dentro de un vistazo.

Paso 13: Círculo de migración

Círculo migratorio

¿Creará un movimiento suave? El ruido funcional puede ayudarnos. Tiene mejor ritmo que el aleatorio estándar. Y los números aleatorios generados aleatoriamente son continuamente.

Formato de invocación:

ruido （t）

El ruido de la función no puede definir su rango de salida. El programa define que solo puede generar números de punto flotante de 0 a 1 y la entrada fija solo puede tener una salida fija.

[cceN_cpp theme = "dawn"] flotar x = ruido (5); flotar y = ruido (5); imprimir (x, y); [/cceN_cpp]

Debido a que los parámetros de entrada anteriores son 5, los resultados de salida son los mismos. Entonces, ¿cómo cambiar el resultado? La respuesta es cambiar los parámetros de entrada de forma dinámica. En realidad, podemos considerar el ruido como una pista de voz ilimitada, los parámetros de entrada son como "el tiempo presente". Si la entrada del parámetro es continua, la salida también será continua.

[cceN_cpp theme = "dawn"] float x, y; configuración vacía () {tamaño (700, 100); x = 0; fondo (0); } vacío dibujar () {x + = 1; y = ruido (frameCount / 100.0) * 100; noStroke (); elipse (x, y, 2, 2); }

[/cceN_cpp]

En este caso, dibujamos la ruta de cambio de Y para que podamos comprender mejor el ruido de función.

• Entre ellos, la variable frameCount obtendrá el marco actual. A diferencia del ancho, alto en el anterior, es estable sin ningún cambio. Además, comienza a aumentar desde 0. Si lo entendemos por nuestro gráfico animado de visualización inicial, muestra la página a la que hemos vuelto (más bien a la concepción del tiempo en el programa).

• frameCount es una variable entera. Dividido por otra variable de número entero, el programa procesará por defecto el resultado para que sea un número entero. Para mejorar la precisión del resultado, debemos cambiar de 100 a 100,0. Dividido por un número de punto flotante, también obtendremos un número de punto flotante.

• Para cambiar el eje Y de 0 a 100, tenemos que multiplicar el resultado del ruido por 100. Así podemos controlar el rango de valores aleatorios.

Algunos de ustedes que son buenos para pensar podrían preguntarse "¿por qué tenemos que dividir frameCount por 100? ¿No está bien escribir frameCount directamente?" ¡Por supuesto que puede! Pero aquí, para mostrar mejor las características del ruido de función, reducimos la "tasa de transmisión". El siguiente ejemplo muestra los cambios del valor de salida con diferentes tasas de cambio.

[cceN_cpp theme = "dawn"] float x, y1, y2, y3, y4, y5; configuración vacía () {tamaño (700, 500); x = 0; fondo (0); } vacío dibujar () {x + = 1; y1 = ruido (frameCount) * 100; y2 = ruido (frameCount / 10.0) * 100; y3 = ruido (frameCount / 100.0) * 100; y4 = ruido (frameCount / 1000.0) * 100; y5 = ruido (frameCount / 10000.0) * 100; noStroke (); elipse (x, y1, 2, 2); elipse (x, y2 + 100, 2, 2); elipse (x, y3 + 200, 2, 2); elipse (x, y4 + 300, 2, 2); elipse (x, y5 + 400, 2, 2); accidente cerebrovascular (80); línea (0, 100, ancho, 100); línea (0, 200, ancho, 200); línea (0, 300, ancho, 300); línea (0, 400, ancho, 400); }

[/cceN_cpp]

Puede considerar los parámetros cambiantes dentro del ruido de funciones como una barra de progreso. Cambiar el parámetro es como mover la barra de progreso. Entonces, cuando el alcance cambiante de esta "pista de voz" es mayor, las características continuas del valor de salida frontal y posterior serán más débiles. (Podemos imaginar lo que sucederá si transmitimos una pieza de música o un video con 2 veces la velocidad, 5 veces la velocidad, 20 veces la velocidad). Cuando el alcance es mayor que un cierto valor, entonces no hay gran diferencia para funcionar al azar en la generación de valor.

Si puede comprender todos los ejemplos anteriores, entonces sentirá que nada puede ser más fácil para dibujar un círculo migratorio. También puede comprender los principios internos.

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

[/cceN_cpp]

Ahora, el movimiento es más interesante como un giróscopo giratorio.

• La razón por la cual la variable x dentro del ruido de la función debe ser más 100 es porque para separarlos por una distancia. Si los parámetros de xy dentro del ruido de la función son los mismos o bastante cercanos, el cambio de la coordenada x, y se acercará al mismo. Esto es para que el movimiento sea mucho más aleatorio.

Paso 14: Círculo movido por el mouse

A continuación, finalmente llegamos a dos variables que más me gustan: mouseX y mouseY. A la primera vista de las dos concepciones, mis ojos brillan con luz. Porque es la forma más directa de interactuar con gráficos. Podemos crear muchos programas interesantes con él.

El caso es bastante simple:

[cceN_cpp theme = "amanecer"] int x, y; configuración vacía () {tamaño (300, 300); x = 0; y = 0; } vacío dibujar () {fondo (234, 113, 107); noStroke (); x = mouseX; y = mouseY; elipse (x, y, 50, 50); }

[/cceN_cpp]

mouseX puede adquirir la coordenada x del mouse, mientras que mouseY puede obtener la coordenada y.

• Intentemos cambiar el símbolo positivo y negativo, o intercambiar mouseX y mouseY.

Paso 15: Fin

A partir de estos comandos familiares, es posible que pueda realizar el movimiento de los gráficos. Con el contenido del último capítulo, usa tu imaginación correctamente, puedes crear muchos efectos animados interesantes.

En nuestro próximo capítulo, podemos ver ejemplos más abundantes. Al mismo tiempo, usaremos funciones matemáticas y las combinaremos con el movimiento gráfico.

Este artículo proviene del diseñador Wenzy.

Paso 16: Lecturas relativas:

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

Orientación de programación interesante para el diseñador: cree su primer programa de procesamiento

Este artículo es de:

Si necesita ayuda, puede contactar a: [email protected].