Zajímavé pokyny k programování pro návrháře-načítání médií a událost: 13 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:24

Do zpracování lze načíst spoustu externích dat, mezi nimiž jsou velmi často používány tři typy. Jsou to obraz, zvuk a video samostatně.

V této kapitole budeme hovořit o tom, jak načíst audio a video podrobně v kombinaci s událostmi. Nakonec si můžete vytvořit vlastní hudební klávesnici nebo hudební paletu.

Krok 1: Přečtěte si obrázek

Než začneme, podívejme se zpět na způsob načítání obrázku.

Krok 2: Funkce související s obrázkem

Než použijeme tyto funkce, musíme vytvořit obrazový objekt prostřednictvím PImage. Potom můžeme tyto funkce použít k definování všech druhů vlastností obrázku.

Před spuštěním programu nezapomeňte uložit zdroje obrázků do datového souboru.

Krok 3: Načítání hudby, přehrávání a zastavení

V následujícím textu vám začneme formálně představovat vzývání hudby. Velmi podobné načítání obrázků, musíte na začátku deklarovat zvukový objekt. Můžete se podívat na níže uvedený příklad ze skutečné gramatiky.

Příklad kódu (10-1):

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

SoundFile zvuk;

neplatné nastavení () {

velikost (640, 360);

pozadí (255);

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

}

void draw () {

}

void keyPressed () {

//Přehrát zvuk

if (key == 'p') {

sound.play ();

}

// Zastavit zvuk

if (key == 's') {

sound.stop ();

}

} [/cceN_cpp]

Příprava:

Samotné zpracování nenese žádnou zvukovou knihovnu. Musíte si to stáhnout sami. Než tedy napíšete kód, proveďte raději následující přípravy.

Přidat knihovnu do Zpracování. Zde je běžná praxe. Na panelu nabídek vyberte „Nástroj“- „Přidat nástroj“a poté přejděte na „Knihovny“. Zadejte klíčová slova knihovny do vyhledávacího sloupce, abyste si jej mohli přímo stáhnout a nainstalovat.

Pokud však tuto funkci používáme v naší domácí zemi (v Číně), nemůžeme ji stáhnout přímým připojením webu. Musíme spustit VPN. I když to spustíme, budou zde nestabilní podmínky. Musíte být tedy trpěliví a zkusit to několikrát. Toto je nejpohodlnější způsob načítání. Pokud nemůžete nainstalovat, musíte si stáhnout z oficiálních webových stránek ručně. (https://processing.org/reference/libraries/) Protože je způsob ruční instalace velmi komplikovaný, budeme se jím dále zabývat v jiné kapitole.

Kód Exaplain:

Po dokončení přípravy může zvuková knihovna správně fungovat. Zrušte výše uvedený kód, klikněte na SPUŠTIT a poté bude fungovat. Stisknutím klávesy „P“přehrajete hudbu, stisknutím „S“hudbu zastavíte.

Pokud je na program zvyklý, musíme jej nejprve načíst. Na začátek musíme přidat větu „import processing.sound.*“. „import“je klíčové slovo, což znamená načítání doslova. Přidejte název knihovny za „import“, poté načte knihovnu. Ocas obvykle sleduje značku „*“, takže načte všechny třídy související s knihovnou do programu, aniž byste je museli přidávat po jednom ručně.

Ve druhé větě „SoundFile sound;“byl vyhlášen zvukový objekt. SoundFile je podobný PImage.

V rámci nastavení funkcí se "sound = new SoundFile (this," 1.mp3 ");" používá k vytvoření objektu a definování jeho cesty pro čtení. Zde jsme již vlastně začali používat nový koncept Class. Právě teď o tom hluboce nediskutujeme. Stačí nám vědět, že se jedná o pevnou metodu zápisu a posledním parametrem je vyplnění adresy zdroje hudby.

Mezi událostmi keyPressed () relativně fungují „sound.play ()“a „sound.stop ()“jako efekt přehrávání a zastavení. "." uprostřed označuje členskou funkci, která hraje a zastavuje patří zvukovým objektům. Členskou funkci můžeme považovat za funkci obsaženou v objektu. Patří k tomuto objektu, který je definován předem. Později, když potřebujeme přehrát více zvukových objektů, musíme za relativní název proměnné přidat pouze „.play ()“.

Zdroje zvuku budou uloženy do datového souboru ve stejném katalogu sketchfile (s příponou pde). Pokud žádný neexistuje, můžete jej vytvořit ručně.

Nezapomeňte napsat kreslení funkcí. Přestože jste nenakreslili žádnou grafiku, je nutné úspěšně přehrávat hudbu.

Výše uvedený postup se zdá být poměrně složitý, ale musíte přidat pouze několik vět kódu, pak můžete realizovat funkci přehrávání. Je to velmi výhodné.

Zpracování podporuje běžné zvukové formáty jako mp3, wav, ogg atd.

Krok 4: Řízení rychlosti hudby

Následující příklady začnou být velmi zajímavé. Zpracování poskytlo některé funkce, které mohou řídit rychlost přehrávání hudby. Tóny se zároveň mění s rychlostí přehrávání hudby. Když použijeme myš k ovládání, bude to generovat velmi psychedelický efekt.

Web s videem:

Příklad kódu (10-2):

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

SoundFile zvuk;

neplatné nastavení () {

velikost (640, 360);

pozadí (255);

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

}

void draw () {

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

sound.rate (rychlost);

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

sound.amp (vol);

}

void keyPressed () {

//Přehrát zvuk

if (key == 'p') {

sound.play ();

}

// Zastavit zvuk

if (key == 's') {

sound.stop ();

}

} [/cceN_cpp]

Vysvětlení kódu:

Funkce.rate () řídí rychlost přehrávání zvuku. Hodnota v závorkách určuje rychlost a rychlost přehrávání. Když je hodnota 1, rychlost přehrávání je normální. Když je nad 1, pak zrychlete; zatímco je pod 1, pak zpomalte.

Funkce.amp () ovládá hlasitost zvuku. Hodnota v závorkách určuje hodnotu objemu. Když je 1, hodnota hlasitosti je normální. Když je nad 1, zvyšte hlasitost; dokud je nižší než 1, pak snižte hlasitost.

Zde jsme vytvořili dvě lokální proměnné speed a vol jako parametry, do kterých se mají načíst. Horizontální souřadnice myši proto změní hudební tón a svislá souřadnice změní hlasitost hudby.

Krok 5: Přehrávání videa a zastavení

Při zpracování je načítání videa podobné načítání zvuku. Nejprve si musíte stáhnout knihovnu videí. (https://processing.org/reference/libraries/video/index.html)

Příklad kódu (10-3):

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

Film mov;

neplatné nastavení () {

velikost (640, 360);

pozadí (0);

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

}

void movieEvent (Filmový film) {

mov.read ();

}

void draw () {

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

}

void keyPressed () {

if (key == 'p') {

mov.play ();

}

if (key == 's') {

mov.stop ();

}

if (key == 'd') {

mov.pause ();

}

} [/cceN_cpp]

Video snímek obrazovky:

Vysvětlení kódu:

První věta „import processing.video.*;“Slouží k načtení videotéky.

Druhá věta „Movie mov;“se používá k deklaraci objektu videa. Mezi nimi je funkce „filmu“podobná funkci PImage.

V nastavení funkcí má efekt „mov = new Movie (this,„ 1.mov “);“za následek vytvoření objektu a definování jeho cesty pro čtení. Poslední parametr vyplňte adresou zdroje videa.

Behine setup, movieEvent represents video event. Slouží k aktualizaci a čtení informací o videu. „mov.read ()“v případě znamená čtení.

Kromě zobrazení obrázků může funkční obrázek zobrazovat i video. Objekt videa můžeme považovat za dynamický obraz. První parametr, vyplníme název proměnné video objektu. Druhým a třetím parametrem jsou vodorovné a svislé souřadnice nakreslené videem. Čtvrtý a pátý parametr rozhodují o délce a šířce zobrazení videa.

Funkce.play () znamená hrát. Funkce.stop () znamená stop a resetuje video. Funkce.pause () znamená pauzu. Přeruší aktuální přehrávání, které bude pokračovat, dokud nebude vyvolána funkce.play ().

Krok 6: Řízení rychlosti videa

Příklad kódu (10-4):

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

Film mov;

neplatné nastavení () {

velikost (640, 360);

pozadí (0);

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

}

void movieEvent (Filmový film) {

mov.read ();

}

void draw () {

obrázek (mov, 0, 0, šířka, výška);

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

mov.speed (newSpeed);

}

void keyPressed () {

if (key == 'p') {

mov.play ();

}

if (key == 's') {

mov.stop ();

}

if (key == 'd') {

mov.pause ();

}

}

[/cceN_cpp]

Vysvětlení kódu:

Funkci.speed () lze použít k ovládání rychlosti přehrávání videa. Když je hodnota parametru 1, rychlost přehrávání je normální. Když hodnota přesáhne 1, zrychlete; dokud je nižší než 1, pak zpomalte.

Protože jsme vytvořili místní proměnnou newSpeed a importovali ji do funkce setSpeed (), souřadnice myši bude přímo ovlivňovat rychlost přehrávání videa.

Pokud jde o další příklady videa, můžete se obrátit na Knihovny - video v knihovně případů.

Krok 7: Zpracování běžných událostí

Dříve jsme zavedli pouze událost keyPressed (). Spustí se po stisknutí klávesnice. V následujícím textu vám představíme další běžné události ve Zpracování.

Využití výše uvedených událostí je podobné jako keyPressed. Při psaní kódu nemají žádnou sekvenci. Jinými slovy, bez ohledu na to, jakou událost jste umístili před nebo za nastavením funkce, získáte stejný výsledek. Exekuční příkaz se vztahuje pouze ke spouštěcí podmínce samotné události. Pouze pokud je podmínka splněna, spustí se. Události výše jsou velmi snadno pochopitelné. Stačí udělat malý experiment, pak můžete rychle pochopit jejich použití.

Tok událostí

Můžeme použít příklad, abychom znali pořadí provádění událostí.

Příklad kódu (10-5):

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

frameRate (2);

println (1);

}

void draw () {

println (2);

}

neplatné mousePressed () {

println (3);

}

void mouseMoved () {

println (4);

}

void mouseReleased () {

println (5);

}

void keyPressed () {

println (6);

}

void keyReleased () {

println (7);

} [/cceN_cpp]

Vysvětlení kódu:

V nastavení funkcí funkce frameRate () nastavila rychlost pracovní rychlosti programu na 2 snímky za sekundu. Snížení snímkové frekvence nám může pomoci sledovat výstup v konzole pro případ, že by spuštěné události byly okamžitě vymazány novými daty na zadní stranu.

Zkuste pohnout myší, kliknout myší, uvolnit myš a sledovat výsledek výstupu. Seznamte se s příkazem k provedení události prostřednictvím println.

Stojí za to věnovat pozornost tomu, že funkce kreslení nelze zapisovat do jiných událostí kromě kreslení funkcí, nebo je nelze zobrazit. Pokud chceme skrývat a zobrazovat grafické komponenty prostřednictvím událostí, jako je keyPressed, můžeme uvažovat o vytvoření proměnné bool jako média.

Události se budou spouštět v pořadí. Teprve poté, co jsou implementovány všechny kódy v aktuální události, spustí kód v další události.

Krok 8: Komplexní příklad-hudební klávesnice

V kombinaci s nově uchopenými událostmi můžeme do našeho programu přidat nové interakce. Dále, jen s několika minutami, můžeme snadno analogovat hudební klávesnici.

Web s videem:

Příklad kódu (10-6):

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

SoundFile zvuk1, zvuk2, zvuk3, zvuk4, zvuk5;

logický klíč1, klíč2, klíč3, klíč4, klíč5;

neplatné nastavení () {

velikost (640, 360);

pozadí (255);

noStroke ();

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

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

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

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

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

}

void draw () {

pozadí (255, 214, 79);

rectMode (CENTRUM);

float w = šířka * 0,1;

float h = výška * 0,8;

if (key1) {

výplň (255);

} else {

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

}

přímý (šířka/6, výška/2, š, v);

if (key2) {

výplň (255);

} else {

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

}

přímý (šířka/6 * 2, výška/2, š, v);

if (key3) {

výplň (255);

} else {

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

}

přímý (šířka/6 * 3, výška/2, š, v);

if (key4) {

výplň (255);

} else {

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

}

přímý (šířka/6 * 4, výška/2, š, v);

if (key5) {

výplň (255);

} else {

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

}

přímý (šířka/6 * 5, výška/2, š, v);

}

void keyPressed () {

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]

Vysvětlení kódu:

Potřebujeme vytvořit více zvukových objektů pro čtení relativních zvukových informací, abychom mohli při spuštění různých kláves přehrávat různé zvuky.

Zde používáme nový klíč událostiReleased (). Funkce této události je obnovit barvu klávesnice na původní barvu. Když klíč uvolníte, spustí se.

K detekci stavu klíče se používá 5 booleovských hodnot deklarovaných v hlavičce.

Krok 9: Komplexní příklad-hudební paleta 1

Kromě události na klávesnici je událost na myši dobrá věc, že ji musíme flexibilně používat. Následující příklad je pro nás, abychom vytvořili hudební paletu, mezi kterou jsme použili dvě události související s myší.

Web s videem:

Příklad kódu (10-7):

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

SoundFile zvuk1, zvuk2, zvuk3, zvuk4, zvuk5;

boolean isDragging;

neplatné nastavení () {

velikost (640, 360);

pozadí (255, 214, 79);

noStroke ();

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

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

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

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

sound5 = nový SoundFile (this, "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]

Vysvětlení kódu:

Doufáme, že pouze když jsme stiskli myš a přetáhli ji, můžeme kreslit obrázky. Abychom získali aktuální stav, musíme vytvořit logickou proměnnou isDragging.

Při tažení myší se isDragging stane skutečnou hodnotou, takže budou spuštěny kreslící funkce v Draw. Na obrazovce zanechá stopy. Když pustíme myš, isDragging se stane falešnou hodnotou. Funkce kreslení v kreslení funkcí tedy zastaví provádění.

Navrhli jsme několik spouštěcích podmínek v případě přetažení myší. Pokud je například horizontální souřadnice myši mezi 100 a 105 pixely, hudba se přehraje automaticky. Díky tomu obrazovka vytvořila několik neviditelných řetězců. Pouze pokud myš projde určitými oblastmi, spustí relativní hudbu.

Krok 10: Komplexní příklad-Music Palette 2 (aktualizovaná verze)

Účinek výše uvedeného příkladu je již dostatečně dobrý. Ale pokud to budeme pečlivě sledovat, najdeme spoustu problémů. Když se například myš pohybuje velmi rychle, při každém pohybu zanechá na obrazovce kulatý bod. Není to souvislá přímka. Mezitím to také způsobuje únik hudby. Zatímco když se myš pohybuje velmi pomalu, přičemž prochází pozicí, když je vodorovná souřadnice mezi 100 a 105, bude vysílat hudbu několikrát za velmi krátkou dobu, což vám dává pocit, že jste uvízli. Všechny tyto problémy můžeme vyřešit pomocí níže uvedeného příkladu.

Videa můžete sledovat v níže uvedeném odkazu:

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

Příklad kódu (10-8):

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

SoundFile zvuk1, zvuk2, zvuk3, zvuk4, zvuk5;

boolean isDragging;

neplatné nastavení () {

velikost (640, 360);

pozadí (255, 214, 79);

noStroke ();

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

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

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

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

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

}

void draw () {

if (isDragging) {

mrtvice (107, 27, 157, 100);

strokeWeight (10);

řádek (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]

Vysvětlení kódu:

Zde jsme použili dvě proměnné pmouseX a pmouseY nesené v samotném Processing systému. Jsou podobné mouseX a mouseY, ale to, co získali, jsou souřadnice myši v posledním snímku.

Ve funkci Draw jsme použili funkci line () k nahrazení původní funkce elipsa (). Tím se souřadnice posledního rámce spojí přímo se souřadnicí aktuálního rámce. Můžeme tedy kreslit souvislé rovné čáry nebo křivky.

V případě mouseDragged jsme navrhli novou podmínku spouštění. Posouzením, zda jsou souřadnice posledního rámce a aktuálního rámce na stejné straně, abychom zjistili, zda je určitá souřadnice překročena. Vezměte si tuto podmínku jako příklad: „if ((mouseX - 100) * (pmouseX - 100) <0)“. Mezi nimi, z kladné a záporné hodnoty vyplývající z „mouseX - 100“, můžeme vědět, zda je mouseX vpravo nebo vlevo od horizontálního kodinátu 100. Podobně jako u „pmouseX - 100“. Pokud tedy dva body vpředu a vzadu nejsou na stejné straně, kladné číslo znásobí záporné číslo, získá nové záporné číslo. Tím je splněna podmínka provedení.

Výše uvedené je zjednodušený výraz, který chytře použil určitý matematický algoritmus-násobení dvou negativ vytvoří pozitivum. Můžete také rozdělit na dvě situace a diskutovat samostatně. Mnohem složitější je však napsat podmínky úsudku. Podmínky posouzení „if ((mouseX = 100) || (mouseX> 100 && pmouseX <= 100))“jsou ekvivalentní určujícím podmínkám zdrojového kódu.

Krok 11: Relativní funkce ovládání zvuku a videa

Výše uvedené funkce jsou dostatečné pro obecné scénáře použití. Pokud se chcete hlouběji zabývat, zde jsem pro vás shromáždil některé běžné funkce týkající se zvuku a videa. Jeho použití můžete prozkoumat podle svých vlastních požadavků.

Další představení najdete v dokumentech z oficiálních webových stránek.

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

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

Tento článek pochází od návrháře Wenzyho.

Krok 12: Relativní hodnoty:

Zajímavé programovací pokyny pro návrháře-zpracování úvodního dotyku

Zajímavé programovací pokyny pro návrháře - vytvořte si svůj první zpracovatelský program

Zajímavé pokyny k programování pro návrháře-Nechte si udělat obrázek (část první)

Zajímavé pokyny k programování pro návrháře-Nechte si obrázek spustit (část druhá)

Zajímavé programovací pokyny pro návrháře- Řízení procesu programu- Prohlášení o smyčce

Zajímavé programovací pokyny pro návrháře-Řízení procesu programu-Prohlášení o podmínkách (část první)

Zajímavé programovací pokyny pro návrháře-Řízení procesu programu-Prohlášení o podmínkách (část druhá)

Zajímavé programovací pokyny pro návrháře-vlastní funkce a fraktální rekurze

Zajímavé programovací pokyny pro návrháře-vlastní funkce a fraktální rekurze

Zajímavé pokyny pro programování zpracování pro návrháře-ovládání barev

Krok 13: Zdroj

Tento článek pochází z:

Pokud máte nějaké dotazy, můžete kontaktovat ： [email protected].