Ghiduri interesante de programare pentru procesare pentru Designer - Încărcare media și eveniment: 13 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:46

Prelucrarea poate fi încărcată o mulțime de date externe, printre care există trei tipuri foarte frecvent utilizate. Sunt imagini, audio și video separat.

În acest capitol, vom vorbi despre cum să încărcați audio și video în detaliu, combinând cu evenimente. În cele din urmă, puteți crea propria tastatură sau paletă de muzică.

Pasul 1: Citiți imaginea

Înainte de a începe, să ne uităm înapoi la metoda de încărcare a imaginii.

Pasul 2: Funcții legate de imagine

Înainte de a utiliza aceste funcții, trebuie să creăm un obiect imagine prin PImage. Apoi putem folosi aceste funcții pentru a defini tot felul de proprietăți ale imaginii.

Nu uitați să stocați sursele de imagine într-un fișier de date înainte de a rula programul.

Pasul 3: Încărcare muzică, redare și oprire

În cele ce urmează, începem să vă introducem formal invocarea muzicii. Foarte similar cu încărcarea imaginii, trebuie să declarați un obiect audio la început. Puteți consulta exemplul de mai jos pentru gramatica actuală.

Exemplu de cod (10-1):

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

SoundFile sunet;

configurare nulă () {

dimensiune (640, 360);

fundal (255);

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

}

draw nul () {

}

tastă nulă Apăsat () {

// Redă sunetul

if (cheie == 'p') {

sound.play ();

}

// Opriți sunetul

if (cheie == 's') {

sound.stop ();

}

} [/cceN_cpp]

Pregătire:

Prelucrarea în sine nu conține nicio bibliotecă de sunet. Trebuie să-l descărcați singur. Deci, înainte de a vă scrie codul, ar fi bine să faceți următoarele pregătiri.

Adăugați bibliotecă la Procesare. Iată practica obișnuită. Alegeți din bara de meniu pentru „Instrument” - „Adăugați instrument”, apoi treceți la „Biblioteci”. Introduceți cuvintele cheie ale bibliotecii în coloana de căutare, astfel încât să o puteți descărca și instala direct.

Cu toate acestea, dacă folosim această funcție în țara noastră internă (în China), nu o putem descărca conectând direct webul. Trebuie să pornim VPN. Chiar dacă îl începem, vor exista condiții instabile. Deci, trebuie să aveți răbdare pentru a încerca de mai multe ori. Aceasta este cea mai convenabilă metodă de încărcare. Dacă nu puteți instala, trebuie să descărcați manual de pe site-ul oficial. (https://processing.org/reference/libraries/) Deoarece metoda de instalare manuală este foarte complicată, o vom discuta în continuare în celălalt capitol.

Cod Exaplain:

Biblioteca de sunete poate funcționa corect după finalizarea pregătirii. Faceți clic pe codul de mai sus, faceți clic pe RUN, apoi va funcționa. Apăsați tasta „P” pentru a reda muzică, „S” pentru a opri muzica.

Dacă este obișnuit cu programul, trebuie să îl încărcăm mai întâi. La început, trebuie să adăugăm o propoziție „import processing.sound. *”. „import” este cuvântul cheie, adică încărcarea literală. Adăugați numele bibliotecii în spatele „import”, apoi va încărca biblioteca. Coada urmează de obicei un semn de „*”, astfel va încărca toate clasele legate de bibliotecă în program fără a fi nevoie să le adăugați una câte una manual.

În a doua teză, „SoundFile sound;” a declarat un obiect audio. SoundFile este similar cu PImage.

În cadrul configurării funcției, "sunet = nou SoundFile (acesta," 1.mp3 ");" este utilizat pentru a crea un obiect și a defini calea de citire a acestuia. Aici am început deja să folosim un nou concept de clasă. În acest moment nu o discutăm profund. Trebuie doar să știm că este o metodă fixă de scriere și ultimul parametru este pentru completarea adresei sursei de muzică.

Dintre evenimentele keyPressed (), „sound.play ()” și „sound.stop ()” funcționează relativ ca efect al redării și stopului. "." în mijloc indică o funcție membru care redă și oprește aparține obiectelor audio. Putem considera funcția membru ca fiind funcția inclusă în obiect. Acesta aparține acestui obiect, care este definit în prealabil. Mai târziu, când trebuie să redăm mai multe obiecte audio, trebuie doar să adăugăm „.play ()” în spatele numelui variabilei relative.

Sursele audio vor fi stocate într-un fișier de date sub același catalog de schițe (cu sufix pde). Dacă nu există, puteți crea unul manual.

Nu uitați să scrieți desenul funcțional. Deși nu ați desenat nicio grafică, este necesar să redați muzică cu succes.

Procedura de mai sus pare destul de complexă, dar trebuie să adăugați doar câteva propoziții de cod, apoi puteți realiza funcția de redare. Este foarte convenabil.

Procesarea acceptă formate audio obișnuite precum mp3, wav, ogg etc.

Pasul 4: Controlul vitezei muzicii

Următoarele exemple vor începe să devină mult mai interesante. Procesarea a furnizat câteva funcții care pot controla viteza de redare a muzicii. În același timp, tonurile se vor schimba odată cu viteza de redare a muzicii. Când folosim mouse-ul pentru a controla, acesta va genera un efect foarte psihedelic.

Site-ul video:

Exemplu de cod (10-2):

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

SoundFile sunet;

configurare nulă () {

dimensiune (640, 360);

fundal (255);

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

}

draw nul () {

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

sound.rate (viteza);

float vol = mouseY / (float) înălțime * 4;

sound.amp (vol);

}

tastă nulă Apăsat () {

// Redă sunetul

if (cheie == 'p') {

sound.play ();

}

// Opriți sunetul

if (cheie == 's') {

sound.stop ();

}

} [/cceN_cpp]

Explicați codul:

Funcția.rate () controlează viteza de redare audio. Valoarea din paranteză determină viteza de redare rapidă și lentă. Când valoarea este 1, viteza de redare este normală. Când este peste 1, accelerați; în timp ce este sub 1, apoi decelerați.

Funcția.amp () controlează volumul audio. Valoarea din paranteză determină valoarea volumului. Când este 1, valoarea volumului este normală. Când este peste 1, creșteți volumul; în timp ce este sub 1, apoi micșorați volumul.

Aici am construit două variabile locale viteză și vol ca parametri care trebuie încărcați. Prin urmare, coordonata orizontală a mouse-ului va schimba tonul muzicii, iar coordonata verticală va schimba volumul muzicii.

Pasul 5: Redare video și oprire

În procesare, încărcarea video este similară cu încărcarea audio. Mai întâi trebuie să descărcați biblioteca video. (https://processing.org/reference/libraries/video/index.html)

Exemplu de cod (10-3):

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

Film mov;

configurare nulă () {

dimensiune (640, 360);

fundal (0);

mov = film nou (acesta, „1.mov”);

}

void movieEvent (film de film) {

mov.read ();

}

draw nul () {

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

}

tasta nulă Apăsat () {

if (cheie == 'p') {

mov.play ();

}

if (cheie == 's') {

mov.stop ();

}

if (cheie == 'd') {

mov.pause ();

}

} [/cceN_cpp]

Captură de ecran video:

Explicați codul:

Prima teză „import processing.video. *;” Este utilizată pentru a încărca biblioteca video.

A doua teză „Film mov;” este utilizată pentru a declara obiect video. Printre acestea, funcția „Film” este similară cu PImage.

În configurarea funcției, efectul "mov = new Movie (this," 1.mov ");" este de a crea obiect și de a defini calea de citire a acestuia. Ultimul parametru va fi completat cu adresa sursei video.

Configurarea Behine, movieEvent reprezintă un eveniment video. Este folosit pentru actualizarea și citirea informațiilor video. „mov.read ()”, în cazul respectiv, înseamnă citit.

Cu excepția afișării imaginilor, imaginea funcțională poate afișa și videoclipuri. Putem privi obiectul video ca pe o imagine dinamică. Primul parametru, îl completăm cu numele variabilei obiectului video. Al doilea și al treilea parametru sunt coordonatele orizontale și verticale trasate de videoclip. Al patrulea și al cincilea parametru decid lungimea și lățimea afișajului video.

Funcția.play () înseamnă joc. Funcția.stop () înseamnă oprire și va reseta videoclipul. Funcția.pause () înseamnă pauză. Acesta va întrerupe redarea curentă, care va continua până când funcția.play () este invocată.

Pasul 6: Controlul vitezei video

Exemplu de cod (10-4):

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

Film mov;

configurare nulă () {

dimensiune (640, 360);

fundal (0);

mov = film nou (acesta, „transit.mov”);

}

void movieEvent (film de film) {

mov.read ();

}

draw nul () {

imagine (mov, 0, 0, lățime, înălțime);

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

mov.speed (newSpeed);

}

tastă nulă Apăsat () {

if (cheie == 'p') {

mov.play ();

}

if (cheie == 's') {

mov.stop ();

}

if (cheie == 'd') {

mov.pause ();

}

}

[/cceN_cpp]

Explicați codul:

Funcția.speed () poate fi utilizată pentru a controla viteza de redare video. Când valoarea parametrului este 1, viteza de redare este normală. Când valoarea depășește 1, accelerați; în timp ce este sub 1, apoi deccelerează.

Deoarece am construit variabila locală newSpeed și am importat-o în funcția setSpeed (), coordonata mouse-ului va influența direct viteza de redare a videoclipului.

În ceea ce privește mai multe exemple despre videoclipuri, puteți consulta Bibliotecile - Video în biblioteca de cazuri.

Pasul 7: Procesarea evenimentelor comune

Anterior, am introdus doar evenimentul keyPressed (). Acesta va fi declanșat după apăsarea tastaturii. În cele ce urmează, vom introduce alte evenimente comune în Procesare pentru dvs.

Utilizările evenimentelor de mai sus sunt similare cu keyPressed. Nu au secvențe în scrierea codului. Cu alte cuvinte, indiferent de evenimentul pe care l-ați plasat înainte sau în spatele configurării funcției, obțineți același rezultat. Ordinea de execuție este legată numai de starea declanșatoare a evenimentului în sine. Numai dacă condiția este îndeplinită, atunci se va executa. Evenimentele de mai sus sunt foarte ușor de înțeles. Trebuie doar să faceți un mic experiment, apoi le puteți înțelege rapid uzanțele.

Fluxul evenimentului

Putem folosi un exemplu pentru a cunoaște ordinea de execuție a evenimentelor.

Exemplu de cod (10-5):

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

frameRate (2);

println (1);

}

draw nul () {

println (2);

}

void mousePressed () {

println (3);

}

void mouseMoved () {

println (4);

}

void mouseReleased () {

println (5);

}

tastă nulă Apăsat () {

println (6);

}

void keyReleased () {

println (7);

} [/cceN_cpp]

Explicați codul:

În configurarea funcției, funcția frameRate () a stabilit viteza de funcționare a programului la 2 cadre pe secundă. Reducerea ratei de cadre ne poate ajuta să observăm ieșirea din consolă în cazul în care evenimentele declanșate vor fi imediat periate de date noi în spate.

Încercați să mutați mouse-ul, faceți clic pe mouse, eliberați mouse-ul și observați rezultatul rezultatului. Cunoașteți ordinea de execuție a evenimentului prin println.

Ceea ce merită să acordați atenție este că funcțiile de desen nu pot fi scrise în alte evenimente, cu excepția desenului de funcții, sau nu pot fi afișate. Dacă dorim să controlăm ascunderea și afișarea componentelor grafice prin evenimente precum keyPressed, putem lua în considerare crearea variabilei bool ca mediu.

Evenimentele se vor executa în ordine. Numai după ce toate codurile din evenimentul curent sunt implementate, acesta va executa codul în evenimentul următor.

Pasul 8: Exemplu cuprinzător - Tastatură muzicală

Combinând cu evenimentele nou înțelese, putem adăuga noi interacțiuni la programul nostru. Apoi, doar cu câteva minute, putem analiza cu ușurință o tastatură muzicală.

Site-ul video:

Exemplu de cod (10-6):

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

SoundFile sound1, sound2, sound3, sound4, sound5;

cheie booleană1, cheie2, cheie3, cheie4, cheie5;

configurare nulă () {

dimensiune (640, 360);

fundal (255);

noStroke ();

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

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

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

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

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

}

draw nul () {

fundal (255, 214, 79);

rectMode (CENTER);

plutitor w = lățime * 0,1;

plutitor h = înălțime * 0,8;

dacă (cheia1) {

umplutură (255);

} altceva {

umplutură (238, 145, 117);

}

rect (lățime / 6, înălțime / 2, l, h);

dacă (cheia2) {

umplutură (255);

} altceva {

umplutură (246, 96, 100);

}

rect (lățime / 6 * 2, înălțime / 2, l, h);

dacă (cheia3) {

umplutură (255);

} altceva {

umplutură (214, 86, 113);

}

rect (lățime / 6 * 3, înălțime / 2, l, h);

dacă (cheia4) {

umplutură (255);

} altceva {

umplutură (124, 60, 131);

}

rect (lățime / 6 * 4, înălțime / 2, l, h);

dacă (cheia5) {

umplutură (255);

} altceva {

umplutură (107, 27, 157);

}

rect (lățime / 6 * 5, înălțime / 2, l, h);

}

tastă nulă Apăsat () {

if (cheie == 'a') {

sound1.play ();

cheie1 = adevărat;

}

if (cheie == 's') {

sound2.play ();

cheie2 = adevărat;

}

if (cheie == 'd') {

sound3.play ();

cheie3 = adevărat;

}

if (cheie == 'f') {

sound4.play ();

cheie4 = adevărat;

}

if (cheie == 'g') {

sunet5.play ();

cheie5 = adevărat;

}

}

void keyReleased () {

if (cheie == 'a') {

cheie1 = fals;

}

if (cheie == 's') {

cheie2 = fals;

}

if (cheie == 'd') {

cheie3 = fals;

}

if (cheie == 'f') {

cheie4 = fals;

}

if (cheie == 'g') {

cheie5 = fals;

}

} [/cceN_cpp]

Explicați codul:

Trebuie să creăm mai multe obiecte audio pentru a citi informațiile relative ale sunetului, astfel încât să redăm diferite sunete atunci când se declanșează diferite taste.

Aici folosim un nou eveniment keyReleased (). Funcția acestui eveniment este de a restabili culoarea tastaturii la culoarea originală. Când eliberați cheia, aceasta va fi declanșată.

Cele 5 valori booleene declarate în cap sunt utilizate pentru a detecta starea cheii.

Pasul 9: Exemplu cuprinzător - Paleta muzicală 1

În afară de evenimentul de la tastatură, evenimentul de la mouse este un lucru bun că trebuie să-l folosim flexibil. Următorul exemplu ne permite să creăm o paletă de muzică, printre care am folosit două evenimente legate de mouse.

Site-ul video:

Exemplu de cod (10-7):

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

SoundFile sound1, sound2, sound3, sound4, sound5;

boolean esteDragging;

configurare nulă () {

dimensiune (640, 360);

fundal (255, 214, 79);

noStroke ();

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

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

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

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

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

}

draw nul () {

if (isDragging) {

umplutură (107, 27, 157, 100);

elipsă (mouseX, mouseY, 16, 16);

}

}

void mouseDragged () {

isDragging = adevărat;

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) {

sunet5.play ();

}

}

void mouseReleased () {

isDragging = false;

} [/cceN_cpp]

Explicați codul:

Sperăm că numai atunci când am apăsat mouse-ul și l-am tras, vom putea desena imagini. Deci, trebuie să construim o variabilă booleană isDragging pentru a obține starea curentă.

Când trageți mouse-ul, dragarea devine adevărată valoare, astfel încât funcțiile de desenare din Draw vor fi executate. Va lăsa urme pe ecran. Când eliberăm mouse-ul, tragerea devine o valoare falsă. Deci, funcțiile de desenare în desenul funcțional vor opri executarea.

Am proiectat mai multe condiții de declanșare în evenimentul de tragere a mouse-ului. De exemplu, când coordonata orizontală a mouse-ului este între 100 și 105 pixeli, muzica va fi redată automat. Acest lucru face ca ecranul să creeze mai multe șiruri invizibile. Doar dacă mouse-ul trece prin anumite zone, va declanșa muzica relativă.

Pasul 10: Exemplu cuprinzător - Paleta muzicală 2 (versiune actualizată)

Efectul exemplului de mai sus este deja suficient de bun. Dar dacă îl urmărim cu atenție, vom găsi o mulțime de probleme. De exemplu, atunci când mouse-ul se mișcă foarte repede, va lăsa un punct rotund pe ecran de fiecare dată când se mișcă. Nu este o linie dreaptă coerentă. Între timp, provoacă și scurgeri de muzică. În timp ce atunci când mouse-ul se mișcă foarte încet, trecând prin poziția când coordonatele orizontale sunt între 100 și 105, acesta va difuza muzică de mai multe ori într-un timp foarte scurt, ceea ce vă oferă senzația de a fi blocat. Toate aceste probleme le putem rezolva prin exemplul de mai jos.

Puteți viziona videoclipuri în linkul de mai jos:

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

Exemplu de cod (10-8):

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

SoundFile sound1, sound2, sound3, sound4, sound5;

boolean esteDragging;

configurare nulă () {

dimensiune (640, 360);

fundal (255, 214, 79);

noStroke ();

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

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

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

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

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

}

draw nul () {

if (isDragging) {

accident vascular cerebral (107, 27, 157, 100);

greutate accident vascular cerebral (10);

linie (mouseX, mouseY, pmouseX, pmouseY);

}

}

void mouseDragged () {

isDragging = adevărat;

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) {

sunet5.play ();

}

}

void mouseReleased () {

isDragging = false;

} [/cceN_cpp]

Explicați codul:

Aici am folosit două variabile pmouseX și pmouseY purtate în sistemul de procesare în sine. Acestea sunt similare cu mouseX și mouseY, dar ceea ce au obținut sunt coordonatele mouse-ului din ultimul cadru.

În funcția Draw, am folosit funcția line () pentru a înlocui funcția originală elipsă (). Acest lucru face ca coordonata ultimului cadru să fie conectată direct cu coordonata cadrului curent. Deci putem trage linii drepte sau curbe coerente.

În cazul mouseDragged, am proiectat o nouă condiție de declanșare. Judecând dacă coordonata ultimului cadru și a cadrului curent sunt în aceeași parte pentru a ști dacă o anumită coordonată este traversată. Luați această condiție ca exemplu: "if ((mouseX - 100) * (pmouseX - 100) <0)". Printre acestea, din valoarea pozitivă și negativă rezultată din „mouseX-100”, putem ști dacă mouseX este la dreapta sau la stânga coodinatului orizontal 100. Similar cu „pmouseX-100”. Prin urmare, atunci când cele două puncte din față și din spate nu sunt în aceeași parte, un pozitiv înmulțește un negativ, va obține un nou număr negativ. Astfel, condiția de execuție este îndeplinită.

Cele de mai sus sunt o expresie simplificată, care a folosit în mod inteligent un anumit algoritm matematic - Doi negativi înmulțiți vor crea un pozitiv. De asemenea, îl puteți împărți în două situații pentru a discuta separat. Cu toate acestea, este mult mai complicat să scrii condiții de judecată. Condițiile de judecată „if ((mouseX = 100) || (mouseX> 100 && pmouseX <= 100))” este echivalentă cu condițiile determinante ale codului sursă.

Pasul 11: Funcții relative despre controlul audio și video

Funcțiile menționate mai sus sunt suficiente pentru scenarii de utilizare generale. Dacă doriți să o săpați adânc, aici am colectat câteva funcții comune legate de audio și video pentru dvs. Puteți explora utilizările sale în funcție de propriile cerințe.

Pentru mai multe introduceri, puteți consulta documentele de pe site-ul oficial.

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

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

Acest articol vine de la designerul Wenzy.

Pasul 12: Citiri relative:

Ghid de programare interesant pentru proiectant - Prelucrarea atingerii inițiale

Îndrumări de programare interesante pentru designer - Creați primul program de procesare

Îndrumări de programare interesante pentru designer - Pune-ți fotografia în funcțiune (prima parte)

Îndrumări de programare interesante pentru designer - Executați imaginea (partea a doua)

Ghid de programare interesant pentru proiectant - Controlul procesului de program - Declarație de buclă

Îndrumări de programare interesante pentru proiectant - Controlul procesului de program - Declarație de stare (prima parte)

Îndrumări de programare interesante pentru proiectant - Controlul procesului de program - Declarație de stare (partea a doua)

Ghid de programare interesant pentru Designer - Funcții personalizate și recursivitate fractală

Ghid de programare interesant pentru Designer - Funcții personalizate și recursivitate fractală

Ghiduri interesante de programare a procesării pentru Designer - Controlul culorilor

Pasul 13: Sursă

Acest articol provine de la:

Dacă aveți întrebări, puteți contacta ： [email protected].