Zaujímavé pokyny pre programovanie programovania pre návrhára-načítanie médií a udalosť: 13 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 12:00

Do spracovania je možné načítať množstvo externých údajov, medzi ktorými sú tri bežne používané typy. Sú oddelené od obrazu, zvuku a videa.

V tejto kapitole budeme hovoriť o tom, ako podrobne načítať zvuk a video v kombinácii s udalosťami. Nakoniec si môžete vytvoriť vlastnú hudobnú klávesnicu alebo hudobnú paletu.

Krok 1: Prečítajte si obrázok

Skôr ako začneme, pozrime sa na spôsob načítania obrázku.

Krok 2: Funkcie súvisiace s obrázkom

Predtým, ako použijeme tieto funkcie, musíme vytvoriť obrazový objekt prostredníctvom PImage. Potom môžeme tieto funkcie použiť na definovanie všetkých druhov vlastností obrazu.

Pred spustením programu nezabudnite uložiť zdroje obrázkov do dátového súboru.

Krok 3: Načítanie hudby, prehrávanie a zastavenie

V nasledujúcom texte vám začneme formálne predstavovať vzývanie hudby. Veľmi podobné načítaniu obrázkov, musíte na začiatku deklarovať zvukový objekt. Na skutočnú gramatiku sa môžete obrátiť na nižšie uvedený príklad.

Príklad kódu (10-1):

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

Zvuk súborového zvuku;

neplatné nastavenie () {

veľkosť (640, 360);

pozadie (255);

zvuk = nový SoundFile (tento, "1.mp3");

}

void draw () {

}

zrušiť stlačenie klávesu () {

//Prehrať zvuk

if (key == 'p') {

sound.play ();

}

// Zastavenie zvuku

if (key == 's') {

sound.stop ();

}

} [/cceN_cpp]

Príprava:

Samotné spracovanie nenesie žiadnu zvukovú knižnicu. Musíte si ho stiahnuť sami. Pred napísaním kódu teda urobte nasledujúce prípravy.

Pridať knižnicu do spracovania. Tu je bežná prax. Na paneli s ponukami vyberte položku „Nástroj“- „Pridať nástroj“a potom prejdite na položku „Knižnice“. Zadajte kľúčové slová knižnice do vyhľadávacieho stĺpca, aby ste si ju mohli priamo stiahnuť a nainštalovať.

Ak však túto funkciu používame v našej domácej krajine (v Číne), nemôžeme si ju stiahnuť priamym pripojením webu. Musíme spustiť VPN. Aj keď to začneme, budú tu nestabilné podmienky. Preto musíte byť trpezliví a vyskúšať to niekoľkokrát. Toto je najpohodlnejší spôsob načítania. Ak sa vám nedá nainštalovať, musíte ho stiahnuť z oficiálnych webových stránok manuálne. (https://processing.org/reference/libraries/) Pretože je spôsob manuálnej inštalácie veľmi komplikovaný, budeme sa mu ďalej venovať v ďalšej kapitole.

Kód Exaplain:

Zvuková knižnica môže po dokončení prípravy správne fungovať. Zrušte vyššie uvedený kód, kliknite na položku SPUSTIŤ a potom bude fungovať. Stlačením klávesu „P“prehrajte hudbu, stlačením „S“hudbu zastavte.

Ak je na program zvyknutý, musíme ho najskôr načítať. Na začiatok musíme pridať vetu „import processing.sound.*“. „import“je kľúčové slovo, čo znamená načítanie doslova. Pridajte názov knižnice za „import“a potom knižnicu načíta. Chvost obvykle nasleduje po značke „*“, takže do programu načíta všetky triedy súvisiace s knižnicou bez toho, aby ste ich museli ručne pridávať po jednej.

V druhej vete „SoundFile sound;“bol vyhlásený za zvukový objekt. SoundFile je podobný PImage.

V rámci nastavenia funkcií sa „sound = new SoundFile (this,“1.mp3”);“používa na vytvorenie objektu a definovanie jeho cesty čítania. Tu sme skutočne už začali používať nový koncept triedy. Teraz o tom podrobne nehovoríme. Stačí nám vedieť, že je to pevná metóda zápisu a posledný parameter je na vyplnenie adresy zdroja hudby.

Medzi udalosťami keyPressed () „sound.play ()“a „sound.stop ()“relatívne fungujú ako efekt prehrávania a zastavenia. "." v strede označuje členskú funkciu, ktorá prehráva a zastavuje, patrí zvukovým objektom. Členskú funkciu môžeme považovať za funkciu zahrnutú v objekte. Patrí k tomuto objektu, ktorý je definovaný vopred. Neskôr, keď potrebujeme prehrať viacero zvukových objektov, musíme za názov relatívnej premennej pridať iba „.play ()“.

Zvukové zdroje sa uložia do dátového súboru v rovnakom katalógu sketchfile (s príponou pde). Ak žiadny neexistuje, môžete ho vytvoriť ručne.

Nezabudnite napísať kreslenie funkcií. Napriek tomu, že ste nenakreslili žiadnu grafiku, je potrebné úspešne hrať hudbu.

Vyššie uvedený postup sa zdá byť dosť zložitý, ale stačí pridať iba niekoľko viet kódu, aby ste si mohli uvedomiť funkciu prehrávania. Je to veľmi výhodné.

Spracovanie podporuje bežné zvukové formáty, ako sú mp3, wav, ogg atď.

Krok 4: Ovládanie rýchlosti hudby

Nasledujúce príklady začnú byť veľmi zaujímavé. Spracovanie poskytlo niektoré funkcie, ktorými je možné ovládať rýchlosť prehrávania hudby. Tóny sa zároveň budú meniť s rýchlosťou prehrávania hudby. Keď použijeme myš na ovládanie, vyvolá to veľmi psychedelický efekt.

Web s videom:

Príklad kódu (10-2):

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

Zvuk súborového zvuku;

neplatné nastavenie () {

veľkosť (640, 360);

pozadie (255);

zvuk = nový SoundFile (tento, "1.mp3");

}

void draw () {

float speed = myšX/(float) width * 3;

sound.rate (rýchlosť);

float vol = myšY/(float) výška * 4;

sound.amp (vol);

}

zrušiť stlačenie klávesu () {

//Prehrať zvuk

if (key == 'p') {

sound.play ();

}

// Zastavenie zvuku

if (key == 's') {

sound.stop ();

}

} [/cceN_cpp]

Vysvetlenie kódu:

Funkcia.rate () riadi rýchlosť prehrávania zvuku. Hodnota v zátvorke určuje rýchlu a pomalú rýchlosť prehrávania. Keď je hodnota 1, rýchlosť prehrávania je normálna. Keď je viac ako 1, zrýchlite; kým je pod 1, potom spomaľte.

Funkcia.amp () ovláda hlasitosť zvuku. Hodnota v zátvorke určuje hodnotu objemu. Keď je 1, hodnota hlasitosti je normálna. Keď je viac ako 1, zvýšte hlasitosť; pokiaľ je nižšia ako 1, znížte hlasitosť.

Tu sme postavili dve lokálne premenné rýchlosť a objem ako parametre, do ktorých sa majú načítať. Horizontálne súradnice myši preto zmenia tón hudby a zvislé súradnice zmenia hlasitosť hudby.

Krok 5: Prehrávanie videa a zastavenie

Pri spracovaní je načítanie videa podobné načítaniu zvuku. Najprv si musíte stiahnuť videoknižnicu. (https://processing.org/reference/libraries/video/index.html)

Príklad kódu (10-3):

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

Filmový pohyb;

neplatné nastavenie () {

veľkosť (640, 360);

pozadie (0);

mov = nový film (tento, „1.mov“);

}

void movieEvent (Filmový film) {

mov.read ();

}

void draw () {

obrázok (mov, 0, 0, 640, 360);

}

zrušiť stlačenie klávesu () {

if (key == 'p') {

mov.play ();

}

if (key == 's') {

mov.stop ();

}

if (key == 'd') {

mov.pause ();

}

} [/cceN_cpp]

Snímka obrazovky videa:

Vysvetlenie kódu:

Prvá veta „import processing.video.*;“Sa používa na načítanie knižnice videa.

Druhá veta „Movie mov;“sa používa na deklarovanie objektu videa. Medzi nimi je funkcia „filmu“podobná funkcii PImage.

Pri nastavovaní funkcií má efekt „mov = new Movie (this,„ 1.mov “);“za následok vytvorenie objektu a definovanie jeho cesty čítania. Posledný parameter sa vyplní adresou zdroja videa.

Čo sa týka nastavenia, MovieEvent predstavuje video udalosť. Slúži na aktualizáciu a čítanie informácií o videu. „mov.read ()“v prípade znamená prečítané.

Okrem zobrazovania obrázkov môže funkčný obrázok zobrazovať aj video. Video objekt môžeme považovať za dynamický obraz. Prvý parameter, vyplníme názov premennej video objektu. Druhým a tretím parametrom sú horizontálne a vertikálne súradnice nakreslené videom. Štvrtý a päťdesiaty parameter rozhodujú o dĺžke a šírke zobrazenia videa.

Funkcia.play () znamená hrať. Funkcia.stop () znamená stop a resetuje video. Funkcia.pause () znamená pauzu. Preruší aktuálne prehrávanie, ktoré bude pokračovať, kým sa nevyvolá funkcia.play ().

Krok 6: Ovládanie rýchlosti videa

Príklad kódu (10-4):

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

Filmový pohyb;

neplatné nastavenie () {

veľkosť (640, 360);

pozadie (0);

mov = nový film (tento, „transit.mov“);

}

void movieEvent (Filmový film) {

mov.read ();

}

void draw () {

obrázok (mov, 0, 0, šírka, výška);

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

mov.speed (newSpeed);

}

zrušiť stlačenie klávesu () {

if (key == 'p') {

mov.play ();

}

if (key == 's') {

mov.stop ();

}

if (key == 'd') {

mov.pause ();

}

}

[/cceN_cpp]

Vysvetlenie kódu:

Na ovládanie rýchlosti prehrávania videa je možné použiť funkciu.speed (). Keď je hodnota parametra 1, rýchlosť prehrávania je normálna. Keď hodnota presiahne 1, zrýchlite; kým je pod 1, potom spomaľte.

Pretože sme vytvorili lokálnu premennú newSpeed a importovali ju do funkcie setSpeed (), súradnica myši bude priamo ovplyvňovať rýchlosť prehrávania videa.

Pokiaľ ide o ďalšie príklady videa, môžete sa obrátiť na knižnice - video v knižnici prípadov.

Krok 7: Spracovanie bežných udalostí

Predtým sme predstavili iba udalosť keyPressed (). Spustí sa po stlačení klávesnice. V nasledujúcom texte vám predstavíme ďalšie bežné udalosti v Processingu.

Použitie vyššie uvedených udalostí je podobné príkazu keyPressed. Pri písaní kódu nemajú žiadnu postupnosť. Inými slovami, bez ohľadu na to, akú udalosť ste vykonali pred alebo za nastavením funkcie, získate rovnaký výsledok. Vykonávací príkaz sa týka iba spúšťacej podmienky samotnej udalosti. Spustí sa iba vtedy, ak je podmienka splnená. Udalosti uvedené vyššie sú veľmi ľahko zrozumiteľné. Stačí urobiť malý experiment a potom môžete rýchlo pochopiť ich použitie.

Tok udalostí

Na poznanie poradia vykonávania udalostí môžeme použiť príklad.

Príklad kódu (10-5):

[cceN_cpp theme = "dawn"] neplatné nastavenie () {

frameRate (2);

println (1);

}

void draw () {

println (2);

}

prázdna mousePressed () {

println (3);

}

void mouseMoved () {

println (4);

}

void mouseReleased () {

println (5);

}

zrušiť stlačenie klávesu () {

println (6);

}

void keyReleased () {

println (7);

} [/cceN_cpp]

Vysvetlenie kódu:

V nastavení funkcií funkcia frameRate () nastavila rýchlosť pracovnej rýchlosti programu na 2 snímky za sekundu. Zníženie snímkovej frekvencie nám môže pomôcť pozorovať výstup v konzole v prípade, že spustené udalosti budú okamžite vymazané novými údajmi zozadu.

Skúste pohnúť myšou, kliknúť myšou, pustiť myš a sledovať výstupný výsledok. Zoznámte sa s príkazom na spustenie udalosti prostredníctvom println.

Čo stojí za to venovať pozornosť je, že kresliace funkcie nemožno zapisovať do iných udalostí okrem kreslenia funkcií, alebo ich nemožno zobrazovať. Ak chceme skrývanie a zobrazenie grafických komponentov ovládať prostredníctvom udalostí, ako je keyPressed, môžeme uvažovať o vytvorení premennej bool ako média.

Udalosti sa budú vykonávať v uvedenom poradí. Až potom, čo budú implementované všetky kódy v aktuálnej udalosti, spustí kód v nasledujúcej udalosti.

Krok 8: Komplexný príklad-hudobná klávesnica

V kombinácii s novo uchopenými udalosťami môžeme do nášho programu pridať nové interakcie. Ďalej, len s niekoľkými minútami, môžeme ľahko analógovať hudobnú klávesnicu.

Web s videom:

Príklad kódu (10-6):

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

SoundFile zvuk1, zvuk2, zvuk3, zvuk4, zvuk5;

logický kľúč 1, kľúč 2, kľúč 3, kľúč 4, kľúč 5;

neplatné nastavenie () {

veľkosť (640, 360);

pozadie (255);

noStroke ();

sound1 = nový SoundFile (tento, "do.wav");

sound2 = nový SoundFile (tento, "re.wav");

sound3 = nový SoundFile (tento, "mi.wav");

sound4 = nový SoundFile (tento, "fa.wav");

sound5 = nový SoundFile (tento, "so.wav");

}

void draw () {

pozadie (255, 214, 79);

rectMode (CENTRUM);

plavák w = šírka * 0,1;

plavák h = výška * 0,8;

if (key1) {

výplň (255);

} else {

výplň (238, 145, 117);

}

priamy (šírka/6, výška/2, š, v);

if (key2) {

výplň (255);

} else {

výplň (246, 96, 100);

}

priamy (šírka/6 * 2, výška/2, š, v);

if (key3) {

výplň (255);

} else {

výplň (214, 86, 113);

}

priame (šírka/6 * 3, výška/2, š, v);

if (key4) {

výplň (255);

} else {

výplň (124, 60, 131);

}

priamy (šírka/6 * 4, výška/2, š, v);

if (key5) {

výplň (255);

} else {

výplň (107, 27, 157);

}

priamy (šírka/6 * 5, výška/2, š, v);

}

zrušiť stlačenie klávesu () {

if (key == 'a') {

sound1.play ();

key1 = true;

}

if (key == 's') {

sound2.play ();

key2 = true;

}

if (key == 'd') {

sound3.play ();

key3 = true;

}

if (key == 'f') {

sound4.play ();

key4 = true;

}

if (key == 'g') {

sound5.play ();

key5 = true;

}

}

void keyReleased () {

if (key == 'a') {

key1 = false;

}

if (key == 's') {

key2 = false;

}

if (key == 'd') {

key3 = false;

}

if (key == 'f') {

key4 = false;

}

if (key == 'g') {

key5 = false;

}

} [/cceN_cpp]

Vysvetlenie kódu:

Potrebujeme vytvoriť viac zvukových objektov na čítanie relatívnych zvukových informácií, aby sme pri spustení rôznych klávesov mohli hrať rôzne zvuky.

Tu používame nový kľúč udalostiReleased (). Funkciou tejto udalosti je obnoviť farbu klávesnice na pôvodnú farbu. Po uvoľnení kľúča sa spustí.

Na zistenie stavu kľúča sa používa 5 booleovských hodnôt deklarovaných v hlave.

Krok 9: Komplexný príklad-Paleta hudby 1

Okrem klávesnice je udalosť na myši dobrá vec, že ju musíme používať flexibilne. Nasledujúci príklad je na to, aby sme vytvorili hudobnú paletu, medzi ktorou sme použili dve udalosti súvisiace s myšou.

Web s videom:

Príklad kódu (10-7):

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

SoundFile zvuk1, zvuk2, zvuk3, zvuk4, zvuk5;

boolean isDragging;

neplatné nastavenie () {

veľkosť (640, 360);

pozadie (255, 214, 79);

noStroke ();

sound1 = nový SoundFile (tento, "do.wav");

sound2 = nový SoundFile (tento, "re.wav");

sound3 = nový SoundFile (tento, "mi.wav");

sound4 = nový SoundFile (tento, "fa.wav");

sound5 = nový SoundFile (tento, "so.wav");

}

void draw () {

if (isDragging) {

výplň (107, 27, 157, 100);

elipsa (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]

Vysvetlenie kódu:

Dúfame, že iba keď stlačíme myš a potiahneme ju, môžeme kresliť obrázky. Na získanie aktuálneho stavu teda musíme vytvoriť booleovskú premennú isDragging.

Pri ťahaní myšou sa hodnota isDragging stane skutočnou hodnotou, takže sa budú vykonávať funkcie kreslenia v programe Draw. Na obrazovke zanechá stopy. Keď pustíme myš, isDragging sa stane falošnou hodnotou. Takže kresliace funkcie vo funkcii draw zastavia vykonávanie.

Navrhli sme niekoľko spúšťacích podmienok v prípade potiahnutia myši. Ak je napríklad horizontálna súradnica myši v rozmedzí 100 až 105 pixelov, hudba sa prehrá automaticky. Vďaka tomu obrazovka vytvorila niekoľko neviditeľných reťazcov. Relatívna hudba sa spustí iba vtedy, ak myš prejde určitými oblasťami.

Krok 10: Komplexný príklad-Music Palette 2 (aktualizovaná verzia)

Účinok vyššie uvedeného príkladu je už dostatočne dobrý. Ale ak to budeme pozorne sledovať, nájdeme veľa problémov. Keď sa napríklad myš pohybuje veľmi rýchlo, pri každom pohybe zanechá na obrazovke okrúhly bod. Nejde o súvislú priamku. Medzitým to tiež spôsobuje únik hudby. Aj keď sa myš pohybuje veľmi pomaly a prechádza pozíciou, keď je vodorovná súradnica v rozmedzí 100 až 105, bude vysielať hudbu niekoľkokrát za veľmi krátky čas, čo vám poskytne pocit zadrhnutia. Všetky tieto problémy môžeme vyriešiť pomocou nižšie uvedeného príkladu.

Videá si môžete pozrieť v nasledujúcom odkaze:

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

Príklad kódu (10-8):

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

SoundFile zvuk1, zvuk2, zvuk3, zvuk4, zvuk5;

boolean isDragging;

neplatné nastavenie () {

veľkosť (640, 360);

pozadie (255, 214, 79);

noStroke ();

sound1 = nový SoundFile (tento, "do.wav");

sound2 = nový SoundFile (tento, "re.wav");

sound3 = nový SoundFile (tento, "mi.wav");

sound4 = nový SoundFile (tento, "fa.wav");

sound5 = nový SoundFile (tento, "so.wav");

}

void draw () {

if (isDragging) {

zdvih (107, 27, 157, 100);

zdvihová hmotnosť (10);

riadok (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]

Vysvetlenie kódu:

Tu sme použili dve premenné pmouseX a pmouseY prenášané v samotnom systéme spracovania. Sú podobné myšiamX a myšiamY, ale získali súradnice myši v poslednom rámci.

V kreslení funkcií sme na nahradenie pôvodnej funkcie elipsa () použili funkčný riadok (). Vďaka tomu sa súradnica posledného rámca spojí so súradnicou aktuálneho rámca priamo. Môžeme teda nakresliť súvislé rovné čiary alebo krivky.

V prípade mouseDragged sme navrhli novú podmienku spustenia. Posúdením, či sú súradnice posledného rámca a aktuálneho rámca na tej istej strane, zistiť, či je určitá súradnica prekročená. Vezmite ako podmienku túto podmienku: „if ((mouseX - 100) * (pmouseX - 100) <0)“. Z toho, z pozitívnej a negatívnej hodnoty vyplývajúcej z „mouseX - 100“, môžeme vedieť, či je mouseX vpravo alebo vľavo od horizontálneho kodinátu 100. Podobne ako "pmouseX - 100". Preto keď dva body vpredu a vzadu nie sú na tej istej strane, kladné číslo znásobí záporné číslo, získa nové záporné číslo. Podmienka vykonania je teda splnená.

Vyššie uvedené je zjednodušený výraz, ktorý šikovne použil určitý matematický algoritmus-znásobením dvoch negatívov vznikne pozitívum. Môžete to tiež rozdeliť na dve situácie a diskutovať oddelene. Oveľa komplikovanejšie je však napísať podmienky rozsudku. Podmienky posúdenia „ak ((mouseX = 100) || (mouseX> 100 && pmouseX <= 100))“sú ekvivalentné určujúcim podmienkam zdrojového kódu.

Krok 11: Relatívne funkcie o ovládaní zvuku a videa

Vyššie uvedené funkcie sú dostatočné pre všeobecné scenáre použitia. Ak to chcete hĺbkovo preskúmať, zozbieral som tu pre vás niekoľko bežných funkcií týkajúcich sa zvuku a videa. Jeho použitie môžete preskúmať podľa vlastných požiadaviek.

Ak sa chcete bližšie zoznámiť, môžete sa obrátiť na dokumenty z oficiálnych webových stránok.

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

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

Tento článok pochádza od návrhára Wenzyho.

Krok 12: Relatívne hodnoty:

Zaujímavé programovacie pokyny pre návrhára-úvodný dotyk spracovania

Zaujímavé programovacie pokyny pre návrhára - vytvorte si svoj prvý program spracovania

Zaujímavé programovacie pokyny pre dizajnéra-urobte si predstavu (prvá časť)

Zaujímavé programovacie pokyny pre dizajnéra-urobte si predstavu (druhá časť)

Zaujímavé programovacie pokyny pre návrhár- riadenie procesu programu- vyhlásenie o slučke

Zaujímavé programovacie usmernenie pre návrhára-Riadenie procesu programu-Vyhlásenie o stave (časť prvá)

Zaujímavé programovacie pokyny pre návrhára-Riadenie procesu programu-Vyhlásenie o stave (časť druhá)

Zaujímavé programovacie pokyny pre návrhára-vlastné funkcie a fraktálna rekurzia

Zaujímavé programovacie pokyny pre návrhára-vlastné funkcie a fraktálna rekurzia

Zaujímavé pokyny pre programovanie programovania pre návrhára-ovládanie farieb

Krok 13: Zdroj

Tento článok pochádza z:

Ak máte akékoľvek otázky, môžete kontaktovať ： [email protected].