Interesante guía de programación de procesamiento para el diseñador: carga de medios y eventos: 13 pasos

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

En el procesamiento se pueden cargar gran cantidad de datos externos, entre los que hay tres tipos muy utilizados. Son imagen, audio y video por separado.

En este capítulo, vamos a hablar sobre cómo cargar audio y video en detalle, combinándolo con eventos. Al final, puede crear su propio teclado musical o paleta musical.

Paso 1: leer la imagen

Antes de comenzar, repasemos el método de carga de imágenes.

Paso 2: funciones relacionadas con la imagen

Antes de usar estas funciones, necesitamos crear un objeto de imagen a través de PImage. Entonces podemos usar estas funciones para definir todo tipo de propiedades de la imagen.

No olvide almacenar sus fuentes de imágenes en un archivo de datos antes de ejecutar su programa.

Paso 3: carga, reproducción y parada de música

A continuación, comenzamos a presentarles formalmente la invocación de la música. Muy similar a la carga de imágenes, debes declarar un objeto de audio al principio. Puede consultar el ejemplo siguiente para conocer la gramática real.

Ejemplo de código (10-1):

[cceN_cpp theme = "dawn"] procesamiento de importación.sonido. *;

Sonido SoundFile;

configuración vacía () {

tamaño (640, 360);

fondo (255);

sound = new SoundFile (esto, "1.mp3");

}

vacío dibujar () {

}

void keyPressed () {

//Reproducir sonido

si (clave == 'p') {

sound.play ();

}

// Detener el sonido

si (clave == 's') {

sound.stop ();

}

} [/cceN_cpp]

Preparación:

El procesamiento en sí no lleva ninguna biblioteca de sonido. Debe descargarlo usted mismo. Entonces, antes de escribir su código, será mejor que haga los siguientes preparativos.

Agregar biblioteca a Processing. Esta es la práctica común. Elija de la barra de menú para "Herramienta" - "Agregar herramienta", y luego cambie a "Bibliotecas". Ingrese las palabras clave de la biblioteca en la columna de búsqueda para que pueda descargarla e instalarla directamente.

Sin embargo, si usamos esta función en nuestro país doméstico (en China), no podemos descargarla conectando la web directamente. Tenemos que iniciar una VPN. Aunque lo iniciemos, habrá condiciones inestables. Así que hay que tener paciencia para intentarlo varias veces. Este es el método de carga más conveniente. Si no puede instalar, debe descargar desde el sitio web oficial de forma manual. (https://processing.org/reference/libraries/) Debido a que el método de instalación manual es muy complicado, lo discutiremos más en el otro capítulo.

Código exaplain:

La biblioteca de sonidos puede funcionar correctamente una vez completada la preparación. Haga clic en el código anterior, haga clic en EJECUTAR, luego funcionará. Presione la tecla "P" para reproducir música, "S" para detener la música.

Si está acostumbrado al programa, primero debemos cargarlo. Al principio, tenemos que agregar una oración "importar procesamiento.sonido. *". "importar" es la palabra clave, que significa cargar literalmente. Agregue el nombre de la biblioteca detrás de "importar", luego se cargará la biblioteca. La cola generalmente sigue una marca de "*", por lo que cargará todas las clases relacionadas con la biblioteca en el programa sin tener que agregarlas una por una manualmente.

En la segunda oración, "SoundFile sound;" ha declarado un objeto de audio. SoundFile es similar a PImage.

Dentro de la configuración de funciones, "sound = new SoundFile (esto," 1.mp3 ");" se usa para crear un objeto y definir su ruta de lectura. Aquí ya hemos empezado a utilizar un nuevo concepto de Clase. Ahora mismo no lo discutimos en profundidad. Solo necesitamos saber que es un método de escritura fijo y el último parámetro es para completar la dirección de la fuente de música.

Entre los eventos keyPressed (), "sound.play ()" y "sound.stop ()" funcionan relativamente como el efecto de reproducir y detener. "." en el medio indica una función miembro que reproducir y detener pertenecen a objetos de audio. Podemos considerar la función miembro como la función incluida en el objeto. Pertenece a este objeto, que está definido de antemano. Más tarde, cuando necesitemos reproducir varios objetos de audio, solo tenemos que agregar ".play ()" detrás del nombre de la variable relativa.

Las fuentes de audio se almacenarán en un archivo de datos bajo el mismo catálogo de archivo de bocetos (con el sufijo pde). Si no hay ninguno, puede crear uno manualmente.

No olvide escribir la función dibujar. Aunque no dibujó ningún gráfico, es necesario reproducir música correctamente.

El procedimiento anterior parece bastante complejo, pero solo necesita agregar varias oraciones de código, luego puede realizar la función de reproducción. Es muy conveniente.

El procesamiento admite formatos de audio comunes como mp3, wav, ogg, etc.

Paso 4: control de velocidad de la música

Los siguientes ejemplos empezarán a ser muy interesantes. El procesamiento ha proporcionado algunas funciones que pueden controlar la velocidad de reproducción de la música. Al mismo tiempo, los tonos cambiarán con la velocidad de reproducción de la música. Cuando usemos el mouse para controlar, generará un efecto muy psicodélico.

Sitio web de video:

Ejemplo de código (10-2):

[cceN_cpp theme = "dawn"] procesamiento de importación.sonido. *;

Sonido SoundFile;

configuración vacía () {

tamaño (640, 360);

fondo (255);

sound = new SoundFile (esto, "1.mp3");

}

vacío dibujar () {

velocidad de flotación = mouseX / (flotación) ancho * 3;

sound.rate (velocidad);

flotar vol = mouseY / (flotar) altura * 4;

sound.amp (vol);

}

void keyPressed () {

//Reproducir sonido

si (clave == 'p') {

sound.play ();

}

// Detener el sonido

si (clave == 's') {

sound.stop ();

}

} [/cceN_cpp]

Explica el código:

La función.rate () controla la velocidad de reproducción de audio. El valor entre paréntesis determina la velocidad de reproducción rápida y lenta. Cuando el valor es 1, la velocidad de reproducción es normal. Cuando esté más allá de 1, acelere; mientras esté por debajo de 1, luego desacelere.

La función.amp () controla el volumen de audio. El valor entre paréntesis determina el valor del volumen. Cuando es 1, el valor del volumen es normal. Cuando esté por encima de 1, aumente el volumen; mientras esté por debajo de 1, luego disminuya el volumen.

Aquí hemos construido dos variables locales speed y vol como parámetros para ser cargados. Por lo tanto, la coordenada horizontal del mouse cambiará el tono de la música y la coordenada vertical cambiará el volumen de la música.

Paso 5: Reproducir y detener el video

En Processing, la carga de video es similar a la carga de audio. Primero debe descargar la biblioteca de videos. (https://processing.org/reference/libraries/video/index.html)

Ejemplo de código (10-3):

[cceN_cpp theme = "dawn"] procesamiento de importación.video. *;

Movie mov;

configuración vacía () {

tamaño (640, 360);

fondo (0);

mov = nueva película (esto, "1.mov");

}

void movieEvent (Película) {

mov.read ();

}

vacío dibujar () {

imagen (mov, 0, 0, 640, 360);

}

void keyPressed () {

si (clave == 'p') {

mov.play ();

}

si (clave == 's') {

mov.stop ();

}

si (clave == 'd') {

mov.pause ();

}

} [/cceN_cpp]

Captura de pantalla de video:

Explica el código:

La primera oración "import processing.video. *;" Se usa para cargar la biblioteca de videos.

La segunda oración "Movie mov;" se usa para declarar el objeto de video. Entre ellos, la función de "Película" es similar a PImage.

En la configuración de funciones, el efecto de "mov = new Movie (esto," 1.mov ");" es crear un objeto y definir su ruta de lectura. El último parámetro se completará con la dirección de la fuente de video.

Antes de la configuración, movieEvent representa un evento de video. Se utiliza para actualizar y leer información de video. "mov.read ()" en el evento significa leer.

Excepto para mostrar imágenes, la función de imagen también puede mostrar video. Podemos considerar el objeto de video como una imagen dinámica. El primer parámetro, completamos el nombre de la variable del objeto de video. El segundo y tercer parámetro son las coordenadas horizontal y vertical dibujadas por video. Los parámetros cuarto y quinto deciden la longitud y el ancho de la visualización de video.

Función.play () significa jugar. La función.stop () significa detener y reiniciará el video. Función.pause () significa pausa. Interrumpirá la reproducción actual, que continuará hasta que se invoque la función.play ().

Paso 6: Control de velocidad de video

Ejemplo de código (10-4):

[cceN_cpp theme = "dawn"] procesamiento de importación.video. *;

Movie mov;

configuración vacía () {

tamaño (640, 360);

fondo (0);

mov = nueva película (esto, "tránsito.mov");

}

void movieEvent (Película) {

mov.read ();

}

vacío dibujar () {

imagen (mov, 0, 0, ancho, alto);

float newSpeed = mouseX / (flotante) ancho * 4;

mov.speed (nueva velocidad);

}

void keyPressed () {

si (clave == 'p') {

mov.play ();

}

si (clave == 's') {

mov.stop ();

}

si (clave == 'd') {

mov.pause ();

}

}

[/cceN_cpp]

Explica el código:

La función.speed () se puede utilizar para controlar la velocidad de reproducción del video. Cuando el valor del parámetro es 1, la velocidad de reproducción es normal. Cuando el valor sea superior a 1, acelere; mientras esté por debajo de 1, luego desacelere.

Debido a que hemos construido la variable local newSpeed y la hemos importado a la función setSpeed (), la coordenada del mouse influirá directamente en la velocidad de reproducción del video.

En cuanto a más ejemplos sobre video, puede consultar Bibliotecas - Video en la biblioteca de casos.

Paso 7: procesamiento de eventos comunes

Anteriormente, hemos introducido solo el evento keyPressed (). Se activará después de que se presione el teclado. A continuación, le presentaremos otros eventos comunes en Procesamiento.

Los usos de los eventos anteriores son similares a keyPressed. No tienen secuencia en la escritura de código. En otras palabras, no importa qué evento colocó antes o detrás de la configuración de la función, obtendrá el mismo resultado. La orden de ejecución solo está relacionada con la condición de activación del evento en sí. Solo si se cumple la condición, se ejecutará. Los eventos anteriores son todos muy fáciles de entender. Solo tiene que hacer un pequeño experimento, luego podrá comprender rápidamente sus usos.

Flujo de eventos

Podemos usar un ejemplo para conocer el orden de ejecución de los eventos.

Ejemplo de código (10-5):

[cceN_cpp theme = "dawn"] configuración vacía () {

frameRate (2);

println (1);

}

vacío dibujar () {

println (2);

}

void mousePressed () {

println (3);

}

void mouseMoved () {

println (4);

}

void mouseReleased () {

println (5);

}

void keyPressed () {

println (6);

}

void keyReleased () {

println (7);

} [/cceN_cpp]

Explica el código:

En la configuración de funciones, la función frameRate () ha establecido la velocidad de funcionamiento del programa en 2 fotogramas por segundo. Reducir la velocidad de fotogramas puede ayudarnos a observar la salida en la consola en caso de que los eventos desencadenados sean inmediatamente borrados por nuevos datos hacia atrás.

Intente mover el mouse, haga clic en el mouse, suelte el mouse y observe el resultado de salida. Conozca el orden de ejecución del evento a través de println.

Lo que vale la pena prestar atención es que las funciones de dibujo no se pueden escribir en otros eventos excepto la función de dibujar, o no se pueden mostrar. Si queremos controlar la ocultación y visualización de componentes gráficos a través de eventos como keyPressed, podemos considerar construir la variable bool como medio.

Los eventos se ejecutarán en orden. Solo después de que se implemente todo el código en el evento actual, ejecutará el código en el próximo evento.

Paso 8: Ejemplo completo: teclado musical

Combinando con los eventos recién captados, podemos agregar nuevas interacciones a nuestro programa. A continuación, con solo unos minutos, podemos anotar fácilmente un teclado musical.

Sitio web de videos:

Ejemplo de código (10-6):

[cceN_cpp theme = "dawn"] procesamiento de importación.sonido. *;

SoundFile sound1, sound2, sound3, sound4, sound5;

booleano key1, key2, key3, key4, key5;

configuración vacía () {

tamaño (640, 360);

fondo (255);

noStroke ();

sound1 = new SoundFile (esto, "do.wav");

sound2 = new SoundFile (esto, "re.wav");

sound3 = new SoundFile (esto, "mi.wav");

sound4 = new SoundFile (esto, "fa.wav");

sound5 = new SoundFile (esto, "so.wav");

}

vacío dibujar () {

fondo (255, 214, 79);

rectMode (CENTRO);

flotador w = ancho * 0.1;

flotador h = altura * 0.8;

si (clave1) {

llenar (255);

} demás {

llenar (238, 145, 117);

}

rect (ancho / 6, alto / 2, ancho, alto);

si (clave2) {

llenar (255);

} demás {

llenar (246, 96, 100);

}

rect (ancho / 6 * 2, alto / 2, ancho, alto);

if (clave3) {

llenar (255);

} demás {

llenar (214, 86, 113);

}

rect (ancho / 6 * 3, alto / 2, ancho, alto);

si (clave4) {

llenar (255);

} demás {

llenar (124, 60, 131);

}

rect (ancho / 6 * 4, alto / 2, ancho, alto);

si (clave5) {

llenar (255);

} demás {

llenar (107, 27, 157);

}

rect (ancho / 6 * 5, alto / 2, ancho, alto);

}

void keyPressed () {

si (clave == 'a') {

sound1.play ();

clave1 = verdadero;

}

si (clave == 's') {

sound2.play ();

key2 = verdadero;

}

si (clave == 'd') {

sound3.play ();

key3 = verdadero;

}

si (clave == 'f') {

sound4.play ();

key4 = verdadero;

}

si (clave == 'g') {

sound5.play ();

key5 = verdadero;

}

}

void keyReleased () {

si (clave == 'a') {

clave1 = falso;

}

si (clave == 's') {

clave2 = falso;

}

si (clave == 'd') {

key3 = falso;

}

si (clave == 'f') {

key4 = falso;

}

si (clave == 'g') {

key5 = falso;

}

} [/cceN_cpp]

Explica el código:

Necesitamos crear múltiples objetos de audio para leer la información relativa del sonido para poder reproducir diferentes sonidos cuando se activan diferentes teclas.

Aquí usamos un nuevo evento keyReleased (). La función de este evento es restaurar el color del teclado a su color original. Cuando suelte la tecla, se activará.

Los 5 valores booleanos declarados en el encabezado se utilizan para detectar el estado de la clave.

Paso 9: Ejemplo completo - Paleta musical 1

Además del evento del teclado, el evento del mouse es bueno que tengamos que usarlo de manera flexible. El siguiente ejemplo es para nosotros para crear una paleta de música, entre las cuales hemos utilizado dos eventos relacionados con el mouse.

Sitio web de videos:

Ejemplo de código (10-7):

[cceN_cpp theme = "dawn"] procesamiento de importación.sonido. *;

SoundFile sound1, sound2, sound3, sound4, sound5;

boolean isDragging;

configuración vacía () {

tamaño (640, 360);

fondo (255, 214, 79);

noStroke ();

sound1 = new SoundFile (esto, "do.wav");

sound2 = new SoundFile (esto, "re.wav");

sound3 = new SoundFile (esto, "mi.wav");

sound4 = new SoundFile (esto, "fa.wav");

sound5 = new SoundFile (esto, "so.wav");

}

vacío dibujar () {

if (isDragging) {

llenar (107, 27, 157, 100);

elipse (mouseX, mouseY, 16, 16);

}

}

void mouseDragged () {

isDragging = true;

si (mouseX> 100 && mouseX <105) {

sound1.play ();

}

si (mouseX> 200 && mouseX <205) {

sound2.play ();

}

si (mouseX> 300 && mouseX <305) {

sound3.play ();

}

si (mouseX> 400 && mouseX <405) {

sound4.play ();

}

si (mouseX> 500 && mouseX <505) {

sound5.play ();

}

}

void mouseReleased () {

isDragging = falso;

} [/cceN_cpp]

Explica el código:

Esperamos que solo cuando hayamos presionado el mouse y lo arrastramos, podamos hacer dibujos. Así que necesitamos construir una variable booleana isDragging para obtener el estado actual.

Al arrastrar el mouse, isDragging se convierte en un valor real para que se ejecuten las funciones de dibujo dentro de Draw. Dejará rastros en la pantalla. Cuando soltamos el mouse, isDragging se convierte en un valor falso. Entonces, las funciones de dibujo en la función dibujar detendrán la ejecución.

Hemos diseñado varias condiciones de activación en el evento de arrastre del mouse. Por ejemplo, cuando la coordenada horizontal del mouse está entre 100 y 105 píxeles, la música se reproducirá automáticamente. Esto hace que la pantalla cree varias cadenas invisibles. Solo si el mouse pasa por ciertas áreas, activará la música relativa.

Paso 10: Ejemplo completo: Music Palette 2 (versión actualizada)

El efecto del ejemplo anterior ya es suficientemente bueno. Pero si lo observamos con atención, encontraremos muchos problemas. Por ejemplo, cuando el mouse se mueve muy rápido, dejará un punto redondo en la pantalla cada vez que se mueva. No es una línea recta coherente. Mientras tanto, también provoca algunas filtraciones de música. Mientras que cuando el mouse se mueve muy lentamente, pasando por la posición cuando la coordenada horizontal está entre 100 y 105, transmitirá música varias veces en muy poco tiempo, lo que le da la sensación de estar atascado. Todos estos problemas, los podemos resolver con el siguiente ejemplo.

Puede ver videos en el siguiente enlace:

v.qq.com/x/page/w03226o4y4l.html

Ejemplo de código (10-8):

[cceN_cpp theme = "dawn"] procesamiento de importación.sonido. *;

SoundFile sound1, sound2, sound3, sound4, sound5;

boolean isDragging;

configuración vacía () {

tamaño (640, 360);

fondo (255, 214, 79);

noStroke ();

sound1 = new SoundFile (esto, "do.wav");

sound2 = new SoundFile (esto, "re.wav");

sound3 = new SoundFile (esto, "mi.wav");

sound4 = new SoundFile (esto, "fa.wav");

sound5 = new SoundFile (esto, "so.wav");

}

vacío dibujar () {

if (isDragging) {

accidente cerebrovascular (107, 27, 157, 100);

strokeWeight (10);

línea (mouseX, mouseY, pmouseX, pmouseY);

}

}

void mouseDragged () {

isDragging = true;

si ((mouseX - 100) * (pmouseX - 100) <0) {

sound1.play ();

}

si ((mouseX - 200) * (pmouseX - 200) <0) {

sound2.play ();

}

si ((mouseX - 300) * (pmouseX - 300) <0) {

sound3.play ();

}

si ((mouseX - 400) * (pmouseX - 400) <0) {

sound4.play ();

}

si ((mouseX - 500) * (pmouseX - 500) <0) {

sound5.play ();

}

}

void mouseReleased () {

isDragging = falso;

} [/cceN_cpp]

Explica el código:

Aquí hemos utilizado dos variables pmouseX y pmouseY transportadas en el propio sistema de procesamiento. Son similares a mouseX y mouseY pero lo que obtuvieron son las coordenadas del mouse en el último cuadro.

En Function draw, hemos utilizado la función line () para reemplazar la función original elipse (). Esto hace que la coordenada del último fotograma se conecte directamente con la coordenada del fotograma actual. Entonces podemos dibujar líneas rectas o curvas coherentes.

En el caso de mouseDragged, hemos diseñado una nueva condición de activación. Juzgando si la coordenada del último fotograma y el fotograma actual están en el mismo lado para saber si se cruza una determinada coordenada. Tome esta condición como ejemplo: "if ((mouseX - 100) * (pmouseX - 100) <0)". Entre ellos, a partir del valor positivo y negativo resultante de "mouseX - 100", podemos saber si mouseX está a la derecha oa la izquierda de la coordenada horizontal 100. De manera similar a "pmouseX - 100". Por lo tanto, cuando los dos puntos de la parte delantera y trasera no están en el mismo lado, un positivo multiplica un negativo, obtendrá un nuevo número negativo. Por tanto, se satisface la condición de ejecución.

Lo anterior es una expresión simplificada, que ha utilizado inteligentemente un cierto algoritmo matemático: dos negativos multiplicados crearán un positivo. También puede dividirlo en dos situaciones para discutirlas por separado. Sin embargo, es mucho más complicado escribir condiciones de juicio. Las condiciones de juicio "if ((mouseX = 100) || (mouseX> 100 && pmouseX <= 100))" son equivalentes a las condiciones determinantes del código fuente.

Paso 11: Funciones relativas sobre el control de audio y video

Las funciones mencionadas anteriormente son suficientes para escenarios de uso general. Si desea profundizar, aquí he recopilado algunas funciones comunes relacionadas con el audio y el video para usted. Puede explorar sus usos según sus propios requisitos.

Para obtener más información, puede consultar los documentos del sitio web oficial.

Audio (https://processing.org/reference/libraries/sound/index.html)

Video (https://processing.org/reference/libraries/video/index.html)

Este artículo proviene del diseñador Wenzy.

Paso 12: 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)

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

Orientación de programación interesante para el diseñador - Control del proceso del programa - Declaración de bucle

Orientación de programación interesante para el diseñador - Control del proceso del programa - Declaración de condición (Primera parte)

Orientación de programación interesante para el diseñador - Control del proceso del programa - Declaración de condición (Segunda parte)

Interesante guía de programación para diseñadores: funciones personalizadas y recursividad fractal

Interesante guía de programación para diseñadores: funciones personalizadas y recursividad fractal

Interesante guía de programación de procesamiento para diseñador: control de color

Paso 13: Fuente

Este artículo es de:

Si tiene alguna pregunta, puede ponerse en contacto con: [email protected].