Interessante guida alla programmazione dell'elaborazione per Designer - Caricamento del supporto ed evento: 13 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:04

Dall'elaborazione possono essere caricati moltissimi dati esterni, tra i quali ve ne sono di tre tipologie molto comunemente utilizzate. Sono immagine, audio e video separatamente.

In questo capitolo parleremo di come caricare audio e video in dettaglio, combinandolo con gli eventi. Alla fine, puoi creare la tua tastiera musicale o tavolozza musicale.

Passaggio 1: leggi l'immagine

Prima di iniziare, esaminiamo il metodo di caricamento delle immagini.

Passaggio 2: funzioni relative alle immagini

Prima di utilizzare queste funzioni, dobbiamo creare un oggetto immagine tramite PImage. Quindi possiamo usare queste funzioni per definire tutti i tipi di proprietà dell'immagine.

Non dimenticare di archiviare le origini dell'immagine in un file di dati prima di eseguire il programma.

Passaggio 3: caricamento, riproduzione e arresto della musica

Di seguito, iniziamo a presentarvi formalmente l'invocazione della musica. Molto simile al caricamento delle immagini, devi dichiarare un oggetto audio all'inizio. Puoi fare riferimento all'esempio seguente per la grammatica attuale.

Esempio di codice (10-1):

[cceN_cpp theme="alba"] import processing.sound.*;

Suono file audio;

void setup() {

dimensione (640, 360);

sfondo(255);

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

}

disegno vuoto() {

}

tasto voidPremuto() {

//Riprodurre l'audio

if (chiave == 'p') {

sound.play();

}

//Interrompi il suono

if (chiave == 's') {

sound.stop();

}

} [/cceN_cpp]

Preparazione:

L'elaborazione stessa non contiene alcuna libreria di suoni. Devi scaricarlo da solo. Quindi, prima di scrivere il codice, faresti meglio a fare i seguenti preparativi.

Aggiungi libreria a Processing. Ecco la pratica comune. Scegli dalla barra dei menu per "Strumento"-- "Aggiungi strumento", quindi passa a "Librerie". Inserisci le parole chiave della libreria nella colonna di ricerca in modo da poterlo scaricare e installare direttamente.

Tuttavia, se utilizziamo questa funzione nel nostro paese (in Cina), non possiamo scaricarla collegandoci direttamente al web. Dobbiamo avviare VPN. Anche se lo avviamo, ci saranno condizioni instabili. Quindi devi essere paziente per provarlo più volte. Questo è il metodo di caricamento più conveniente. Se non puoi installare, devi scaricare dal sito Web ufficiale tramite il manuale. (https://processing.org/reference/libraries/) Poiché il metodo di installazione manuale è molto complicato, lo discuteremo ulteriormente nell'altro capitolo.

Spiegazione del codice:

La libreria di suoni può funzionare correttamente una volta completata la preparazione. Copia il codice sopra, fai clic su ESEGUI, quindi funzionerà. Premere il tasto "P" per riprodurre la musica, "S" per interrompere la musica.

Se è abituato al programma, dobbiamo prima caricarlo. All'inizio, dobbiamo aggiungere una frase "import processing.sound.*". "import" è la parola chiave, che significa letteralmente caricamento. Aggiungi il nome della libreria dietro "import", quindi caricherà la libreria. La coda di solito segue un segno di "*", quindi caricherà tutte le classi relative alla libreria nel programma senza doverle aggiungere una per una manualmente.

Nella seconda frase, " SoundFile sound; " ha dichiarato un oggetto audio. SoundFile è simile a PImage.

All'interno dell'impostazione della funzione, " sound = new SoundFile(this, "1.mp3"); " viene utilizzato per creare un oggetto e definirne il percorso di lettura. Qui in realtà abbiamo già iniziato a utilizzare un nuovo concetto di Classe. In questo momento non ne discutiamo a fondo. Abbiamo solo bisogno di sapere che è un metodo di scrittura fisso e l'ultimo parametro è per riempire l'indirizzo della sorgente musicale.

Tra gli eventi keyPressed(), " sound.play() " e " sound.stop() " funzionano relativamente come effetto di play e stop. "." al centro indica una funzione membro che play e stop appartengono a oggetti audio. Possiamo considerare la funzione membro come la funzione inclusa nell'oggetto. Appartiene a questo oggetto, che è definito in anticipo. Successivamente, quando abbiamo bisogno di riprodurre più oggetti audio, dobbiamo solo aggiungere ".play()" dietro il nome della variabile relativa.

Le sorgenti audio devono essere archiviate in file di dati nello stesso catalogo di sketchfile (con suffisso pde). Se non ce n'è, puoi crearne uno manualmente.

Non dimenticare di scrivere la funzione draw. Anche se non hai disegnato alcuna grafica, è necessario riprodurre la musica con successo.

La procedura di cui sopra sembra piuttosto complessa, ma è necessario aggiungere solo diverse frasi di codice, quindi è possibile realizzare la funzione di riproduzione. È molto conveniente.

L'elaborazione supporta formati audio comuni come mp3, wav, ogg, ecc.

Passaggio 4: controllo della velocità della musica

I seguenti esempi inizieranno a diventare molto interessanti. L'elaborazione ha fornito alcune funzioni che possono controllare la velocità di riproduzione della musica. Allo stesso tempo, i toni cambieranno con la velocità di riproduzione della musica. Quando usiamo il mouse per controllare, genererà un effetto molto psichedelico.

Sito web video:

Esempio di codice (10-2):

[cceN_cpp theme="alba"] import processing.sound.*;

Suono file audio;

void setup() {

dimensione (640, 360);

sfondo(255);

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

}

disegno vuoto() {

velocità float = mouseX/(float)width * 3;

sound.rate(velocità);

float vol = mouseY/(float)altezza * 4;

sound.amp(vol);

}

void keyPressed() {

//Riprodurre l'audio

if (chiave == 'p') {

sound.play();

}

//Interrompi il suono

if (chiave == 's') {

sound.stop();

}

} [/cceN_cpp]

Codice Spiega:

La funzione.rate() controlla la velocità di riproduzione dell'audio. Il valore tra parentesi determina la velocità di riproduzione veloce e lenta. Quando il valore è 1, la velocità di riproduzione è normale. Quando è oltre 1, accelerare; mentre è inferiore a 1, quindi decelerare.

La funzione.amp() controlla il volume dell'audio. Il valore tra parentesi determina il valore del volume. Quando è 1, il valore del volume è normale. Quando è oltre 1, aumentare il volume; mentre è inferiore a 1, quindi diminuire il volume.

Qui abbiamo costruito due variabili locali speed e vol come parametri da caricare. Pertanto la coordinata orizzontale del mouse cambierà il tono della musica e la coordinata verticale cambierà il volume della musica.

Passaggio 5: riproduzione e arresto del video

In Elaborazione, il caricamento del video è simile al caricamento dell'audio. Devi prima scaricare la libreria video. (https://processing.org/reference/libraries/video/index.html)

Esempio di codice (10-3):

[cceN_cpp theme="alba"] import processing.video.*;

film film;

void setup() {

dimensione (640, 360);

sfondo(0);

mov = new Movie(this, "1.mov");

}

void movieEvent (filmato) {

mov.read();

}

disegno vuoto() {

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

}

tasto voidPremuto() {

if (chiave == 'p') {

mov.play();

}

if (chiave == 's') {

mov.stop();

}

if (chiave == 'd') {

mov.pause();

}

} [/cceN_cpp]

Schermata video:

Codice Spiega:

La prima frase " import processing.video.*; " viene utilizzata per caricare la libreria video.

La seconda frase " Movie mov; " viene utilizzata per dichiarare l'oggetto video. Tra questi, la funzione di " Movie " è simile a PImage.

Nella configurazione della funzione, l'effetto di " mov = new Movie(this, "1.mov"); " è creare un oggetto e definirne il percorso di lettura. L'ultimo parametro va compilato con l'indirizzo della sorgente video.

Dietro l'installazione, movieEvent rappresenta l'evento video. Viene utilizzato per aggiornare e leggere le informazioni video. "mov.read()" nell'evento significa leggere.

Fatta eccezione per la visualizzazione delle immagini, la funzione immagine può visualizzare anche il video. Possiamo considerare l'oggetto video come un'immagine dinamica. Il primo parametro, inseriamo il nome della variabile dell'oggetto video. Il secondo e il terzo parametro sono le coordinate orizzontale e verticale tracciate dal video. Il quarto e il quinto parametro determinano la lunghezza e la larghezza della visualizzazione video.

La funzione.play() significa giocare. La funzione.stop() significa stop e ripristinerà il video. Funzione.pause() significa pausa. Interromperà la riproduzione in corso, che continuerà fino a quando non verrà invocata la funzione.play().

Passaggio 6: controllo della velocità del video

Esempio di codice (10-4):

[cceN_cpp theme="alba"] import processing.video.*;

film film;

void setup() {

dimensione (640, 360);

sfondo(0);

mov = new Movie(this, "transit.mov");

}

void movieEvent (filmato) {

mov.read();

}

disegno vuoto() {

immagine(mov, 0, 0, larghezza, altezza);

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

mov.speed(newSpeed);

}

tasto voidPremuto() {

if (chiave == 'p') {

mov.play();

}

if (chiave == 's') {

mov.stop();

}

if (chiave == 'd') {

mov.pause();

}

}

[/cceN_cpp]

Codice Spiega:

La funzione.speed() può essere utilizzata per controllare la velocità di riproduzione del video. Quando il valore del parametro è 1, la velocità di riproduzione è normale. Quando il valore oltre 1, quindi accelerare; mentre è inferiore a 1, quindi decelerare.

Poiché abbiamo creato la variabile locale newSpeed e l'abbiamo importata nella funzione setSpeed(), la coordinata del mouse influenzerà direttamente la velocità di riproduzione del video.

Per ulteriori esempi sui video, puoi fare riferimento a Librerie - Video nella libreria dei casi.

Passaggio 7: elaborazione di eventi comuni

In precedenza, abbiamo introdotto solo l'evento keyPressed(). Verrà attivato dopo aver premuto la tastiera. Di seguito, introdurremo per te altri eventi comuni nell'elaborazione.

Gli usi degli eventi di cui sopra sono simili a keyPressed. Non hanno sequenza nella scrittura del codice. In altre parole, indipendentemente dall'evento che hai posizionato prima o dopo l'impostazione della funzione, ottieni lo stesso risultato. L'ordine di esecuzione è legato solo alla condizione di attivazione dell'evento stesso. Solo se la condizione è soddisfatta, verrà eseguita. Gli eventi di cui sopra sono tutti molto facili da capire. Devi solo fare un piccolo esperimento, quindi puoi afferrare rapidamente i loro usi.

Flusso dell'evento

Possiamo usare un esempio per conoscere l'ordine di esecuzione degli eventi.

Esempio di codice (10-5):

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

frameRate(2);

println(1);

}

disegno vuoto() {

println(2);

}

void mousePressed() {

println(3);

}

void mouseMoved() {

println(4);

}

void mouseReleased() {

println(5);

}

void keyPressed() {

println(6);

}

void keyReleased() {

println(7);

} [/cceN_cpp]

Codice Spiega:

Nella configurazione della funzione, la funzione frameRate() ha impostato la velocità operativa del programma su 2 fotogrammi al secondo. Abbassare il frame rate può aiutarci a osservare l'output nella console nel caso in cui gli eventi attivati vengano immediatamente spazzati via da nuovi dati.

Prova a muovere il mouse, fai clic con il mouse, rilascia il mouse e osserva il risultato dell'output. Scopri l'ordine di esecuzione dell'evento tramite println.

Ciò che vale la pena prestare attenzione è che le funzioni di disegno non possono essere scritte in altri eventi tranne il disegno della funzione o non possono essere visualizzate. Se vogliamo controllare il nascondimento e la visualizzazione dei componenti grafici attraverso eventi come keyPressed, possiamo considerare di costruire una variabile bool come mezzo.

Gli eventi verranno eseguiti in ordine. Solo dopo che tutto il codice nell'evento corrente è stato implementato, eseguirà il codice nell'evento successivo.

Passaggio 8: esempio completo: tastiera musicale

Combinando con gli eventi appena colti, possiamo aggiungere nuove interazioni al nostro programma. Successivamente, solo con pochi minuti, possiamo facilmente analogare una tastiera musicale.

Sito web video:

Esempio di codice (10-6):

[cceN_cpp theme="alba"] import processing.sound.*;

SoundFile sound1, sound2, sound3, sound4, sound5;

booleano chiave1, chiave2, chiave3, chiave4, chiave5;

void setup() {

dimensione (640, 360);

sfondo(255);

noStroke();

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

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

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

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

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

}

disegno vuoto() {

sfondo (255, 214, 79);

rectMode(CENTRO);

float w = larghezza * 0,1;

galleggiante h = altezza * 0,8;

se (tasto1) {

riempimento(255);

} altro {

riempire (238, 145, 117);

}

rect(larghezza/6, altezza/2, larghezza, altezza);

se (tasto2) {

riempimento(255);

} altro {

riempimento(246, 96, 100);

}

rect(larghezza/6 * 2, altezza/2, larghezza, altezza);

se (tasto3) {

riempimento(255);

} altro {

riempire (214, 86, 113);

}

rect(larghezza/6 * 3, altezza/2, larghezza, altezza);

se (tasto4) {

riempimento(255);

} altro {

riempire(124, 60, 131);

}

rect(larghezza/6 * 4, altezza/2, larghezza, altezza);

se (tasto5) {

riempimento(255);

} altro {

riempire(107, 27, 157);

}

rect(larghezza/6 * 5, altezza/2, larghezza, altezza);

}

tasto voidPremuto() {

if (chiave == 'a') {

sound1.play();

chiave1 = vero;

}

if (chiave == 's') {

sound2.play();

chiave2 = vero;

}

if (chiave == 'd') {

sound3.play();

chiave3 = vero;

}

if (chiave == 'f') {

sound4.play();

chiave4 = vero;

}

if (chiave == 'g') {

sound5.play();

chiave5 = vero;

}

}

void keyReleased() {

if (chiave == 'a') {

chiave1 = falso;

}

if (chiave == 's') {

chiave2 = falso;

}

if (chiave == 'd') {

chiave3 = falso;

}

if (tasto == 'f') {

chiave4 = falso;

}

if (chiave == 'g') {

chiave5 = falso;

}

} [/cceN_cpp]

Codice Spiega:

Dobbiamo creare più oggetti audio per leggere le relative informazioni sonore in modo da riprodurre suoni diversi quando vengono attivati tasti diversi.

Qui usiamo un nuovo evento keyReleased(). La funzione di questo evento è ripristinare il colore della tastiera al suo colore originale. Quando si rilascia il tasto, verrà attivato.

I 5 valori booleani dichiarati nell'head servono a rilevare lo stato della chiave.

Passaggio 9: esempio completo: tavolozza musicale 1

Oltre all'evento della tastiera, l'evento del mouse è una buona cosa che dobbiamo usarlo in modo flessibile. L'esempio seguente è per noi per creare una tavolozza musicale, tra cui abbiamo utilizzato due eventi relativi al mouse.

Sito web video:

Esempio di codice (10-7):

[cceN_cpp theme="alba"] import processing.sound.*;

SoundFile sound1, sound2, sound3, sound4, sound5;

isDragging booleano;

void setup() {

dimensione (640, 360);

sfondo (255, 214, 79);

noStroke();

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

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

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

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

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

}

disegno vuoto() {

if (isDragging) {

riempimento(107, 27, 157, 100);

ellisse(mouseX, mouseY, 16, 16);

}

}

void mouseDragged() {

isDragging = true;

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 = false;

} [/cceN_cpp]

Codice Spiega:

Speriamo che solo dopo aver premuto il mouse e trascinato, possiamo disegnare immagini. Quindi abbiamo bisogno di costruire una variabile booleana isDragging per ottenere lo stato corrente.

Quando si trascina il mouse, isDragging diventa vero valore in modo che le funzioni di disegno all'interno di Draw vengano eseguite. Lascerà tracce sullo schermo. Quando rilasciamo il mouse, isDragging diventa un valore falso. Quindi le funzioni di disegno nella funzione draw interromperanno l'esecuzione.

Abbiamo progettato diverse condizioni di attivazione nell'evento di trascinamento del mouse. Ad esempio, quando la coordinata orizzontale del mouse è compresa tra 100 e 105 pixel, la musica verrà riprodotta automaticamente. Questo rende lo schermo creato diverse stringhe invisibili. Solo se il mouse passa attraverso determinate aree, attiverà la relativa musica.

Passaggio 10: esempio completo: tavolozza musicale 2 (versione aggiornata)

L'effetto dell'esempio precedente è già abbastanza buono. Ma se lo osserviamo con attenzione, troveremo molti problemi. Ad esempio, quando il mouse si muove molto velocemente, lascerà un punto rotondo sullo schermo ogni volta che si muove. Non è una linea retta coerente. Nel frattempo, causa anche alcune perdite di musica. Mentre quando il mouse si muove molto lentamente, passando per la posizione in cui la coordinata orizzontale è tra 100 e 105, trasmetterà musica più volte in un tempo molto breve, il che ti dà la sensazione di essere bloccato. Tutti questi problemi, possiamo risolverli attraverso l'esempio seguente.

Puoi guardare i video nel link qui sotto:

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

Esempio di codice (10-8):

[cceN_cpp theme="alba"] import processing.sound.*;

SoundFile sound1, sound2, sound3, sound4, sound5;

isDragging booleano;

void setup() {

dimensione (640, 360);

sfondo (255, 214, 79);

noStroke();

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

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

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

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

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

}

disegno vuoto() {

if (isDragging) {

corsa (107, 27, 157, 100);

corsaPeso(10);

riga(mouseX, mouseY, pmouseX, pmouseY);

}

}

void mouseDragged() {

isDragging = true;

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 = false;

} [/cceN_cpp]

Codice Spiega:

Qui abbiamo usato due variabili pmouseX e pmouseY trasportate nel sistema di elaborazione stesso. Sono simili a mouseX e mouseY ma quello che hanno ottenuto sono le coordinate del mouse nell'ultimo fotogramma.

In Function draw, abbiamo usato la funzione line() per sostituire la funzione originale ellisse(). Questo rende la coordinata dell'ultimo frame collegata direttamente con la coordinata del frame corrente. Quindi possiamo disegnare linee rette o curve coerenti.

In caso mouseDragged, abbiamo progettato una nuova condizione di attivazione. Giudicando se la coordinata dell'ultimo fotogramma e quella corrente sono sullo stesso lato per sapere se una certa coordinata è attraversata. Prendiamo ad esempio questa condizione: " if ((mouseX - 100) * (pmouseX - 100) < 0) ". Tra questi, dal valore positivo e negativo derivato da " mouseX - 100 ", possiamo sapere se mouseX si trova a destra oa sinistra della coordinata orizzontale 100. Analogamente a "pmouseX - 100". Pertanto, quando i due punti davanti e dietro non sono sullo stesso lato, un positivo moltiplica un negativo, otterrà un nuovo numero negativo. Quindi la condizione di esecuzione è soddisfatta.

Quella sopra è un'espressione semplificata, che ha usato abilmente un certo algoritmo matematico: due moltiplicazioni negative creeranno un positivo. Puoi anche dividerlo in due situazioni da discutere separatamente. Tuttavia, è molto più complicato scrivere le condizioni di giudizio. Le condizioni di giudizio "if ((mouseX = 100) || (mouseX > 100 && pmouseX <= 100))" sono equivalenti alle condizioni determinanti del codice sorgente.

Passaggio 11: funzioni relative al controllo audio e video

Le funzioni sopra menzionate sono sufficienti per scenari di utilizzo generali. Se vuoi approfondire, qui ho raccolto per te alcune funzioni comuni relative ad audio e video. Puoi esplorare i suoi usi in base alle tue esigenze.

Per ulteriori informazioni, è possibile fare riferimento ai documenti dal sito Web ufficiale.

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

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

Questo articolo viene dal designer Wenzy.

Passaggio 12: letture relative:

Interessante guida alla programmazione per il progettista: elaborazione del tocco iniziale

Interessante guida alla programmazione per il designer: crea il tuo primo programma di elaborazione

Interessante guida alla programmazione per i designer: fai funzionare la tua immagine (parte prima)

Interessante guida alla programmazione per i designer: fai funzionare la tua immagine (seconda parte)

Interessante guida alla programmazione per il progettista - Dichiarazione di controllo del processo del programma - Loop

Guida alla programmazione interessante per il progettista - Controllo del processo del programma - Dichiarazione sulle condizioni (parte prima)

Interessante guida alla programmazione per il progettista - Controllo del processo del programma - Dichiarazione sulle condizioni (seconda parte)

Interessante guida alla programmazione per il progettista: funzioni personalizzate e ricorsione frattale

Interessante guida alla programmazione per il progettista: funzioni personalizzate e ricorsione frattale

Interessante guida alla programmazione dell'elaborazione per il designer: controllo del colore

Passaggio 13: fonte

Questo articolo è tratto da:

In caso di domande, è possibile contattare: [email protected].