Interessant guia de programació de processament per a dissenyadors: càrrega i esdeveniment de suports: 13 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:16

El processament es pot carregar moltes dades externes, entre les quals hi ha tres tipus molt utilitzats. Són imatge, àudio i vídeo per separat.

En aquest capítol, parlarem de com carregar àudio i vídeo en detall, combinant-ho amb esdeveniments. Al final, podeu crear el vostre propi teclat o paleta de música.

Pas 1: llegiu la imatge

Abans de començar, mirem enrere el mètode de càrrega d’imatges.

Pas 2: Funcions relacionades amb la imatge

Abans d’utilitzar aquestes funcions, hem de crear un objecte d’imatge mitjançant PImage. A continuació, podem utilitzar aquestes funcions per definir tot tipus de propietats de la imatge.

No oblideu emmagatzemar les fonts d’imatges en un fitxer de dades abans d’executar el programa.

Pas 3: Carregant música, reproduir-lo i aturar-lo

A continuació, comencem a presentar-vos formalment la invocació de la música. Molt similar a la càrrega d’imatges, heu de declarar un objecte d’àudio al principi. Podeu consultar l'exemple següent de la gramàtica real.

Exemple de codi (10-1):

[cceN_cpp theme = "dawn"] import process.sound. *;

So SoundFile;

configuració nul·la () {

mida (640, 360);

fons (255);

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

}

sorteig buit () {

}

tecla buida Pressed () {

// Reproduir so

if (clau == 'p') {

sound.play ();

}

// Atura el so

if (clau == 's') {

sound.stop ();

}

} [/cceN_cpp]

Preparació:

El processament en si no comporta cap biblioteca de so. Cal que el descarregueu vosaltres mateixos. Per tant, abans d’escriure el vostre codi, és millor que feu els següents preparatius.

Afegiu una biblioteca a Processament. Aquí teniu la pràctica habitual. Trieu a la barra de menú "Eina" - "Afegeix eina" i, a continuació, canvieu a "Biblioteques". Introduïu les paraules clau de la biblioteca a la columna de cerca perquè pugueu descarregar-la i instal·lar-la directament.

Tot i això, si fem servir aquesta funció al nostre país (a la Xina), no la podem descarregar connectant directament la web. Hem d’iniciar la VPN. Tot i que l’iniciem, hi haurà condicions inestables. Per tant, heu de tenir paciència per provar-ho diverses vegades. Aquest és el mètode de càrrega més convenient. Si no podeu instal·lar-lo, heu de descarregar manualment el lloc web oficial. (https://processing.org/reference/libraries/) Com que el mètode d'instal·lació manual és molt complicat, en parlarem més endavant a l'altre capítol.

Exaplain de codi:

La fonoteca pot funcionar correctament després de completar la preparació. Feu servir el codi anterior, feu clic a RUN i funcionarà. Premeu la tecla "P" per reproduir música, "S" per aturar la música.

Si està acostumat al programa, primer hem de carregar-lo. Al principi, hem d'afegir una frase "import processing.sound. *". "importar" és la paraula clau, que significa carregar literalment. Afegiu el nom de la biblioteca darrere de "importar" i, a continuació, carregarà la biblioteca. La cua sol seguir una marca de "*", de manera que carregarà totes les classes relacionades amb la biblioteca al programa sense haver d'afegir-les una per una manualment.

A la segona frase, "SoundFile sound" ha declarat objecte d'àudio. SoundFile és similar a PImage.

Dins de la configuració de la funció, "sound = new SoundFile (this," 1.mp3 ");" s'utilitza per crear un objecte i definir el seu camí de lectura. Aquí ja hem començat a utilitzar una nova classe de conceptes. Ara mateix no ho discutim a fons. Només hem de saber que és un mètode d’escriptura fix i l’últim paràmetre és per omplir l’adreça de la font de música.

Entre els esdeveniments keyPressed (), "sound.play ()" i "sound.stop ()" funcionen relativament com a efecte de reproducció i aturada. "." al mig indica una funció membre que reprodueix i atura pertany a objectes d'àudio. Podem considerar la funció membre com la funció inclosa a l’objecte. Pertany a aquest objecte, que es defineix prèviament. Més tard, quan hem de reproduir diversos objectes d'àudio, només hem d'afegir ".play ()" darrere del nom de la variable relativa.

Les fonts d’àudio s’emmagatzemaran en un fitxer de dades sota el mateix catàleg de sketchfile (amb sufix pde). Si no n’hi ha cap, en podeu crear manualment.

No oblideu escriure el dibuix de funcions. Tot i que no heu dibuixat cap gràfic, és necessari reproduir música amb èxit.

El procediment anterior sembla força complex, però només heu d’afegir diverses frases de codi per poder realitzar la funció de reproducció. És molt convenient.

El processament admet formats d’àudio habituals com mp3, wav, ogg, etc.

Pas 4: control de la velocitat de la música

Els següents exemples començaran a ser molt interessants. El processament ha proporcionat algunes funcions que poden controlar la velocitat de reproducció de música. Al mateix temps, els tons canviaran amb la velocitat de reproducció de la música. Quan fem servir el ratolí per controlar, generarà un efecte molt psicodèlic.

Lloc web del vídeo:

Exemple de codi (10-2):

[cceN_cpp theme = "dawn"] import process.sound. *;

So SoundFile;

configuració nul·la () {

mida (640, 360);

fons (255);

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

}

sorteig buit () {

float speed = mouseX / (float) ample * 3;

sound.rate (velocitat);

flotador vol = ratolí Y / (flotador) alçada * 4;

so.amp (vol);

}

tecla buida Pressed () {

// Reproduir so

if (clau == 'p') {

sound.play ();

}

// Atura el so

if (clau == 's') {

sound.stop ();

}

} [/cceN_cpp]

Codi explicatiu:

La funció.rate () controla la velocitat de reproducció d’àudio. El valor entre parèntesis determina la velocitat de reproducció ràpida i lenta. Quan el valor és 1, la velocitat de reproducció és normal. Quan és superior a 1, llavors accelerar; mentre és inferior a 1 i desaccelera.

La funció.amp () controla el volum de l'àudio. El valor del parèntesi determina el valor del volum. Quan és 1, el valor del volum és normal. Quan sigui superior a 1, augmenteu el volum; mentre sigui inferior a 1, reduïu el volum.

Aquí hem construït dues variables locals velocitat i vol com a paràmetres a carregar. Per tant, la coordenada horitzontal del ratolí canviarà el to de la música i la coordenada vertical canviarà el volum de la música.

Pas 5: reproduir i aturar el vídeo

A Processament, la càrrega de vídeo és similar a la càrrega d'àudio. Primer heu de descarregar la biblioteca de vídeos. (https://processing.org/reference/libraries/video/index.html)

Exemple de codi (10-3):

[cceN_cpp theme = "dawn"] import process.video. *;

Pel·lícula mov;

configuració nul·la () {

mida (640, 360);

fons (0);

mov = nova pel·lícula (això, "1.mov");

}

void movieEvent (pel·lícula de pel·lícula) {

mov.read ();

}

sorteig buit () {

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

}

tecla buida Pressed () {

if (clau == 'p') {

mov.play ();

}

if (clau == 's') {

mov.stop ();

}

if (clau == 'd') {

mov.pause ();

}

} [/cceN_cpp]

Captura de pantalla del vídeo:

Codi explicatiu:

La primera frase "import processing.video. *;" S'utilitza per carregar la biblioteca de vídeo.

La segona frase "Movie mov;" s'utilitza per declarar l'objecte de vídeo. Entre elles, la funció de "Movie" és similar a PImage.

A la configuració de la funció, l'efecte de "mov = new Movie (això," 1.mov ");" és crear un objecte i definir el seu camí de lectura. L'últim paràmetre s'ha d'emplenar amb l'adreça de la font de vídeo.

La configuració de Behine, movieEvent representa un esdeveniment de vídeo. S'utilitza per actualitzar i llegir informació de vídeo. "mov.read ()" en el cas significa llegir.

A excepció de la visualització d'imatges, la imatge de funció també pot mostrar vídeo. Podem considerar l’objecte de vídeo com una imatge dinàmica. El primer paràmetre és omplir el nom de la variable de l'objecte de vídeo. El segon i el tercer paràmetre són les coordenades horitzontals i verticals dibuixades pel vídeo. El quart i el cinquè paràmetre decideixen la longitud i l'amplada de la visualització del vídeo.

Funció.play () significa jugar. La funció.stop () significa aturar-se i restablirà el vídeo. Funció.pause () significa pausa. Interromprà la reproducció actual, que continuarà fins que s'invoqui la funció.play ().

Pas 6: control de la velocitat del vídeo

Exemple de codi (10-4):

[cceN_cpp theme = "dawn"] import process.video. *;

Pel·lícula mov;

configuració nul·la () {

mida (640, 360);

fons (0);

mov = nova pel·lícula (això, "transit.mov");

}

void movieEvent (pel·lícula de pel·lícula) {

mov.read ();

}

sorteig buit () {

imatge (mov, 0, 0, amplada, alçada);

float newSpeed = mouseX / (float) ample * 4;

mov.speed (newSpeed);

}

tecla buida Pressed () {

if (clau == 'p') {

mov.play ();

}

if (clau == 's') {

mov.stop ();

}

if (clau == 'd') {

mov.pause ();

}

}

[/cceN_cpp]

Codi explicatiu:

La funció.speed () es pot utilitzar per controlar la velocitat de reproducció de vídeo. Quan el valor del paràmetre és 1, la velocitat de reproducció és normal. Quan el valor és superior a 1, a continuació, s'accelera; mentre que és inferior a 1, després deccelerar.

Com que hem creat la variable local newSpeed i la hem importat a la funció setSpeed (), la coordenada del ratolí influirà directament en la velocitat de reproducció del vídeo.

Quant a més exemples sobre vídeo, podeu consultar Biblioteques - Vídeo a la biblioteca de casos.

Pas 7: processar esdeveniments comuns

Anteriorment, només hem introduït l'esdeveniment keyPressed (). S'activarà després de prémer el teclat. A continuació, introduirem altres esdeveniments habituals a Processament.

Els usos dels esdeveniments anteriors són similars a keyPressed. No tenen cap seqüència en l'escriptura de codi. En altres paraules, independentment de l'esdeveniment que hàgiu situat abans o darrere de la configuració de la funció, obtindreu el mateix resultat. L'ordre d'execució només està relacionat amb la condició de desencadenament del propi esdeveniment. Només si es compleix la condició, s'executarà. Els esdeveniments anteriors són molt fàcils d’entendre. Només heu de fer un petit experiment i, tot seguit, podeu copsar-ne els usos.

Flux d'esdeveniments

Podem utilitzar un exemple per conèixer l'ordre d'execució dels esdeveniments.

Exemple de codi (10-5):

[cceN_cpp theme = "dawn"] void setup () {

frameRate (2);

println (1);

}

sorteig buit () {

println (2);

}

void mousePressed () {

println (3);

}

void mouseMoved () {

println (4);

}

void mouseReleased () {

println (5);

}

tecla buida Pressed () {

println (6);

}

void keyReleased () {

println (7);

} [/cceN_cpp]

Codi explicatiu:

A la configuració de funcions, la funció frameRate () ha definit la velocitat de funcionament del programa en 2 fotogrames per segon. La reducció de la freqüència de fotogrames ens pot ajudar a observar la sortida de la consola en cas que els esdeveniments desencadenats siguin immediatament analitzats per les dades posteriors.

Proveu de moure el ratolí, feu clic al ratolí, deixeu anar el ratolí i observeu el resultat de la sortida. Conegueu l’ordre d’execució de l’esdeveniment mitjançant println.

El que val la pena prestar atenció és que les funcions de dibuix no es poden escriure en altres esdeveniments, tret de la funció de dibuix, o no es poden mostrar. Si volem controlar l’amagatall i la visualització de components gràfics mitjançant esdeveniments com keyPressed, podem considerar crear una variable bool com a mitjà.

Els esdeveniments s’executaran en ordre. Només després d'implementar tot el codi de l'esdeveniment actual, s'executarà el codi en el proper esdeveniment.

Pas 8: exemple complet: teclat de música

Combinant-ho amb els esdeveniments recents, podem afegir noves interaccions al nostre programa. A continuació, només amb pocs minuts, podem analògicament un teclat de música fàcilment.

Lloc web del vídeo:

Exemple de codi (10-6):

[cceN_cpp theme = "dawn"] import process.sound. *;

SoundFile sound1, sound2, sound3, sound4, sound5;

clau booleana1, clau2, clau3, clau4, clau5;

configuració nul·la () {

mida (640, 360);

fons (255);

noStroke ();

sound1 = nou SoundFile (això, "do.wav");

sound2 = nou SoundFile (això, "re.wav");

sound3 = nou SoundFile (això, "mi.wav");

sound4 = nou SoundFile (això, "fa.wav");

sound5 = nou SoundFile (això, "so.wav");

}

sorteig buit () {

fons (255, 214, 79);

rectMode (CENTRE);

flotador w = ample * 0,1;

flotador h = alçada * 0,8;

si (clau1) {

farcit (255);

} més {

farcit (238, 145, 117);

}

recta (amplada / 6, alçada / 2, w, h);

si (clau2) {

farcit (255);

} més {

farciment (246, 96, 100);

}

recta (amplada / 6 * 2, alçada / 2, w, h);

si (clau3) {

farcit (255);

} més {

farcit (214, 86, 113);

}

recta (amplada / 6 * 3, alçada / 2, w, h);

si (clau4) {

farcit (255);

} més {

farcit (124, 60, 131);

}

recta (amplada / 6 * 4, alçada / 2, w, h);

si (clau5) {

farcit (255);

} més {

farcit (107, 27, 157);

}

recta (amplada / 6 * 5, alçada / 2, w, h);

}

tecla buida Pressed () {

if (clau == 'a') {

sound1.play ();

clau1 = cert;

}

if (clau == 's') {

sound2.play ();

clau2 = cert;

}

if (clau == 'd') {

sound3.play ();

clau3 = cert;

}

if (clau == 'f') {

sound4.play ();

clau4 = cert;

}

if (clau == 'g') {

sound5.play ();

clau5 = cert;

}

}

void keyReleased () {

if (clau == 'a') {

clau1 = falsa;

}

if (clau == 's') {

clau2 = falsa;

}

if (clau == 'd') {

clau3 = falsa;

}

if (clau == 'f') {

clau4 = falsa;

}

if (clau == 'g') {

clau5 = falsa;

}

} [/cceN_cpp]

Codi explicatiu:

Hem de crear diversos objectes d’àudio per llegir la informació relativa al so per reproduir sons diferents quan s’activen diferents tecles.

Aquí fem servir un nou esdeveniment keyReleased (). La funció d’aquest esdeveniment és restaurar el color del teclat al seu color original. En deixar anar la clau, s'activarà.

Els 5 valors booleans declarats al capçal s'utilitzen per detectar l'estat de la clau.

Pas 9: exemple complet: paleta de música 1

A més de l’esdeveniment amb teclat, l’esdeveniment del ratolí és bo que l’hem de fer servir de manera flexible. L’exemple següent és per a nosaltres per crear una paleta de música, entre la qual hem utilitzat dos esdeveniments relacionats amb el ratolí.

Lloc web del vídeo:

Exemple de codi (10-7):

[cceN_cpp theme = "dawn"] import process.sound. *;

SoundFile sound1, sound2, sound3, sound4, sound5;

boolean isDragging;

configuració nul·la () {

mida (640, 360);

fons (255, 214, 79);

noStroke ();

sound1 = nou SoundFile (això, "do.wav");

sound2 = nou SoundFile (això, "re.wav");

sound3 = nou SoundFile (això, "mi.wav");

sound4 = nou SoundFile (això, "fa.wav");

sound5 = nou SoundFile (això, "so.wav");

}

sorteig buit () {

if (isDragging) {

farcit (107, 27, 157, 100);

el·lipse (mouseX, mouseY, 16, 16);

}

}

void mouseDragged () {

isDragging = cert;

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

sound1.play ();

}

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

sound2.play ();

}

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

sound3.play ();

}

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

sound4.play ();

}

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

sound5.play ();

}

}

void mouseReleased () {

isDragging = fals;

} [/cceN_cpp]

Codi explicatiu:

Esperem que només prement el ratolí i arrossegant-lo puguem fer dibuixos. Per tant, hem de construir una variable booleana isDragging per obtenir l’estat actual.

En arrossegar el ratolí, isDragging es converteix en un veritable valor de manera que s'executaran funcions de dibuix dins de Draw. Deixarà rastres a la pantalla. Quan deixem anar el ratolí, isDragging esdevé un valor fals. Per tant, les funcions de dibuix de la funció dibuix pararan l'execució.

Hem dissenyat diverses condicions de desencadenament en cas d'arrossegament del ratolí. Per exemple, quan la coordenada horitzontal del ratolí es troba entre els 100 i els 105 píxels, la música es reproduirà automàticament. Això fa que la pantalla creï diverses cadenes invisibles. Només si el ratolí passa per determinades zones, activarà la música relativa.

Pas 10: exemple complet: paleta de música 2 (versió actualitzada)

L'efecte de l'exemple anterior ja és prou bo. Però si ho observem detingudament, trobarem molts problemes. Per exemple, quan el ratolí es mou molt ràpid, deixarà un punt rodó a la pantalla cada vegada que es mogui. No és una línia recta coherent. Mentrestant, també provoca alguna filtració de música. Mentre que quan el ratolí es mou molt lentament, passant per la posició quan la coordenada horitzontal es troba entre 100 i 105, emetrà música diverses vegades en un temps molt curt, cosa que us donarà la sensació d’estar atrapat. Tots aquests problemes els podem resoldre mitjançant l’exemple següent.

Podeu veure vídeos a l’enllaç següent:

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

Exemple de codi (10-8):

[cceN_cpp theme = "dawn"] import process.sound. *;

SoundFile sound1, sound2, sound3, sound4, sound5;

boolean isDragging;

configuració nul·la () {

mida (640, 360);

fons (255, 214, 79);

noStroke ();

sound1 = nou SoundFile (això, "do.wav");

sound2 = nou SoundFile (això, "re.wav");

sound3 = nou SoundFile (això, "mi.wav");

sound4 = nou SoundFile (això, "fa.wav");

sound5 = nou SoundFile (això, "so.wav");

}

sorteig buit () {

if (isDragging) {

ictus (107, 27, 157, 100);

pes de cop (10);

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

}

}

void mouseDragged () {

isDragging = cert;

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

sound1.play ();

}

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

sound2.play ();

}

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

sound3.play ();

}

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

sound4.play ();

}

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

sound5.play ();

}

}

void mouseReleased () {

isDragging = fals;

} [/cceN_cpp]

Codi explicatiu:

Aquí hem utilitzat dues variables pmouseX i pmouseY portades al propi sistema de processament. Són similars a mouseX i mouseY, però el que han obtingut són les coordenades del mouse del darrer fotograma.

A Function draw, hem utilitzat function line () per substituir la funció original ellipse (). Això fa que la coordenada del darrer fotograma estigui connectada directament amb la coordenada del fotograma actual. Així podem dibuixar línies rectes o corbes coherents.

En cas que mouseDragged, hem dissenyat una nova condició de desencadenament. A través de jutjar si la coordenada de l'últim marc i el marc actual es troben al mateix costat per saber si es creua una coordenada determinada. Preneu aquesta condició com a exemple: "if ((mouseX - 100) * (pmouseX - 100) <0)". Entre ells, a partir del valor positiu i negatiu resultant de "mouseX-100", podem saber si mouseX es troba a la dreta o a l'esquerra del coodinat horitzontal 100. De manera similar a "pmouseX-100". Per tant, quan els dos punts del davant i del darrere no es trobin al mateix costat, un positiu multiplica un negatiu, obtindrà un nou nombre negatiu. Així es compleix la condició d'execució.

L’anterior és una expressió simplificada, que ha utilitzat amb intel·ligència un determinat algorisme matemàtic: dos multiplicadors de negatius crearan un positiu. També podeu dividir-lo en dues situacions per discutir per separat. No obstant això, és molt més complicat escriure condicions de judici. Les condicions del judici "if ((mouseX = 100) || (mouseX> 100 && pmouseX <= 100))" són equivalents a les condicions determinants del codi font.

Pas 11: Funcions relatives sobre el control d'àudio i vídeo

Les funcions esmentades són suficients per als escenaris d'ús generals. Si voleu aprofundir, aquí he recopilat algunes funcions habituals relatives a l'àudio i el vídeo. Podeu explorar-ne els usos segons els vostres propis requisits.

Per obtenir més introducció, podeu consultar documents del lloc web oficial.

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

Vídeo (https://processing.org/reference/libraries/video/index.html)

Aquest article prové del dissenyador Wenzy.

Pas 12: lectures relatives:

Interessant guia de programació per al dissenyador: processament del toc inicial

Interessants pautes de programació per al dissenyador: creeu el vostre primer programa de processament

Interessants pautes de programació per a dissenyadors: feu que la vostra imatge funcioni (primera part)

Interessants pautes de programació per a dissenyadors: feu que la vostra imatge funcioni (segona part)

Interessants pautes de programació per al dissenyador: control de processos de programa, declaració de bucle

Interessant guia de programació per al dissenyador - Control de processos de programa - Declaració de condició (primera part)

Interessant guia de programació per al dissenyador - Control de processos de programa - Declaració de condició (segona part)

Interessant guia de programació per a dissenyadors: funcions personalitzades i recursivitat fractal

Interessant guia de programació per a dissenyadors: funcions personalitzades i recursivitat fractal

Interessant guia de programació de processament per al dissenyador - control de color

Pas 13: font

Aquest article prové de:

Si teniu cap pregunta, podeu contactar amb ： [email protected].