Tartalomjegyzék:

Érdekes feldolgozási programozási útmutató tervezőnek-média betöltése és esemény: 13 lépés
Érdekes feldolgozási programozási útmutató tervezőnek-média betöltése és esemény: 13 lépés

Videó: Érdekes feldolgozási programozási útmutató tervezőnek-média betöltése és esemény: 13 lépés

Videó: Érdekes feldolgozási programozási útmutató tervezőnek-média betöltése és esemény: 13 lépés
Videó: Weblapkészítés (HTML) alapjai 2024, November
Anonim
Érdekes feldolgozási programozási útmutató tervezőnek-média betöltése és esemény
Érdekes feldolgozási programozási útmutató tervezőnek-média betöltése és esemény

A feldolgozás sok külső adatot tölthet be, amelyek közül három nagyon gyakran használt típus létezik. Ezek külön -külön kép, hang és videó.

Ebben a fejezetben arról fogunk beszélni, hogyan lehet részletesen betölteni a hangot és a videót, kombinálva az eseményekkel. Végül létrehozhat saját zenei billentyűzetet vagy zenei palettát.

Lépés: Olvassa el a Képet

Mielőtt elkezdenénk, nézzünk vissza a képbetöltés módjára.

2. lépés: Képhez kapcsolódó funkciók

Mielőtt ezeket a funkciókat használnánk, létre kell hoznunk egy képobjektumot a PImage segítségével. Ezekkel a függvényekkel mindenféle képtulajdonságot definiálhatunk.

A program futtatása előtt ne felejtse el a képforrásokat adatfájlba tárolni.

3. lépés: Zene betöltése, lejátszás és leállítás

A következőkben hivatalosan elkezdjük bemutatni Önnek a zene meghívását. Nagyon hasonló a képek betöltéséhez, az elején egy audio objektumot kell deklarálnia. Hivatkozhat az alábbi példára a tényleges nyelvtanból.

Kód példa (10-1):

[cceN_cpp theme = "hajnal"] import feldolgozás.hang.*;

SoundFile hang;

void setup () {

méret (640, 360);

háttér (255);

hang = új SoundFile (ez, "1.mp3");

}

void draw () {

}

void keyPressed () {

// Hang lejátszása

if (kulcs == 'p') {

sound.play ();

}

// Hang leállítása

if (kulcs == 's') {

sound.stop ();

}

} [/cceN_cpp]

Készítmény:

Maga a feldolgozás nem tartalmaz hangkönyvtárat. Önnek kell letöltenie. Mielőtt tehát megírná a kódot, jobb, ha elvégzi az alábbi előkészületeket.

Könyvtár hozzáadása a feldolgozáshoz. Íme a gyakori gyakorlat. Válasszon a menüsorból az „Eszköz”- „Eszköz hozzáadása” menüpontban, majd lépjen a „Könyvtárak” elemre. Írja be a könyvtár kulcsszavait a keresési oszlopba, hogy közvetlenül letölthesse és telepíthesse.

Ha azonban ezt a funkciót saját országunkban (Kínában) használjuk, akkor nem tudjuk letölteni a web közvetlen csatlakoztatásával. El kell indítanunk a VPN -t. Annak ellenére, hogy elkezdjük, instabil körülmények lesznek. Tehát türelmesnek kell lennie, hogy többször kipróbálja. Ez a legkényelmesebb betöltési módszer. Ha nem tudja telepíteni, akkor kézzel kell letöltenie a hivatalos webhelyről. (https://processing.org/reference/libraries/) Mivel a manuális telepítési módszer nagyon bonyolult, ezt a másik fejezetben tárgyaljuk tovább.

Exaplain kód:

A hangkönyvtár megfelelően tud működni az előkészítés befejezése után. Adja meg a fenti kódot, kattintson a FUTÁS gombra, majd működni fog. Nyomja meg a "P" gombot a zene lejátszásához, az "S" gombot a zene leállításához.

Ha megszokta a programot, először be kell töltenünk. Az elején hozzá kell adnunk egy "import feldolgozás.hang.*" Mondatot. "import" a kulcsszó, szó szerint betöltést jelent. Adja hozzá a könyvtár nevét az "import" mögé, majd betölti a könyvtárat. A farok általában a "*" jelet követi, így a könyvtárhoz kapcsolódó összes osztályt betölti a programba anélkül, hogy egyesével kézzel kellene hozzáadnia őket.

A második mondatban a "SoundFile sound;" hangobjektumot deklarált. A SoundFile hasonló a PImage -hez.

A függvénybeállításon belül a "sound = new SoundFile (ez," 1.mp3 ");" egy objektum létrehozására és olvasási útvonalának meghatározására szolgál. Itt valójában már elkezdtük használni az új fogalomosztályt. Jelenleg nem foglalkozunk vele mélyen. Csak tudnunk kell, hogy ez egy rögzített írásmód, és az utolsó paraméter a zenei forrás címének kitöltésére szolgál.

A keyPressed () események között a "sound.play ()" és a "sound.stop ()" viszonylag a lejátszás és a leállítás hatásaként működik. "". középen a tag funkciót jelzi, amely lejátszás és leállítás audio objektumokhoz tartozik. A tagfüggvényt az objektumban szereplő függvénynek tekinthetjük. Ehhez az objektumhoz tartozik, amelyet előre definiáltak. Később, amikor több audioobjektumot kell lejátszanunk, csak a ".play ()" -t kell hozzáadnunk a relatív változó neve mögött.

A hangforrásokat ugyanabban a vázlatfájl -katalógusban (pde utótaggal) kell tárolni az adatfájlban. Ha nincs ilyen, manuálisan létrehozhat egyet.

Ne felejtse el írni a függvény rajzolását. Bár nem rajzolt semmilyen grafikát, a zene sikeres lejátszása szükséges.

A fenti eljárás meglehetősen bonyolultnak tűnik, de csak több mondatnyi kódot kell hozzáadnia, akkor megvalósíthatja a lejátszási funkciót. Nagyon kényelmes.

A feldolgozás támogatja a gyakori hangformátumokat, például mp3, wav, ogg stb.

4. lépés: Zenei sebességszabályozás

A következő példák nagyon érdekessé válnak. A feldolgozás bizonyos funkciókat biztosított, amelyek szabályozhatják a zene lejátszási sebességét. Ugyanakkor a hangok a zene lejátszásának sebességével együtt változnak. Ha az egeret használjuk a vezérléshez, az nagyon pszichedelikus hatást generál.

Videó webhely:

Kód példa (10-2):

[cceN_cpp theme = "hajnal"] import feldolgozás.hang.*;

SoundFile hang;

void setup () {

méret (640, 360);

háttér (255);

hang = új SoundFile (ez, "1.mp3");

}

void draw () {

lebegési sebesség = egérX/(úszó) szélesség * 3;

hang.ráta (sebesség);

float vol = mouseY/(float) magasság * 4;

sound.amp (vol.);

}

void keyPressed () {

// Hang lejátszása

if (kulcs == 'p') {

sound.play ();

}

// Állítsa le a hangot

if (kulcs == 's') {

sound.stop ();

}

} [/cceN_cpp]

Kód magyarázata:

A.rate () függvény szabályozza a hanglejátszás sebességét. A zárójelben szereplő érték határozza meg a gyors és lassú lejátszási sebességet. Ha az érték 1, a lejátszási sebesség normális. Ha 1 -nél nagyobb, akkor gyorsítson; míg 1 alatt van, majd lassítson.

Az.amp () funkció vezérli a hangerőt. A zárójelben lévő érték határozza meg a kötet értékét. Ha 1, akkor a hangerő normális. Ha 1 -nél nagyobb, növelje a hangerőt; amíg 1 alatt van, akkor csökkentse a hangerőt.

Itt két sebesség- és térfogatváltozót építettünk be paraméterekként, amelyeket be kell tölteni. Ezért az egér vízszintes koordinátája megváltoztatja a zenei hangot, a függőleges koordináta pedig a zene hangerejét.

5. lépés: Videolejátszás és leállítás

A feldolgozás során a videó betöltése hasonló az audio betöltéshez. Először le kell töltenie a videótárat. (https://processing.org/reference/libraries/video/index.html)

Kód példa (10-3):

[cceN_cpp theme = "dawn"] import feldolgozás.video.*;

Film mov;

void setup () {

méret (640, 360);

háttér (0);

mov = új film (ez, "1.mov");

}

void movieEvent (Filmfilm) {

mov.read ();

}

void draw () {

kép (mov, 0, 0, 640, 360);

}

void keyPressed () {

if (kulcs == 'p') {

mov.play ();

}

if (kulcs == 's') {

mov.stop ();

}

if (kulcs == 'd') {

mov.pause ();

}

} [/cceN_cpp]

Videó képernyőkép:

Kód magyarázata:

Az első mondat "import processing.video.*;" A videótár betöltésére szolgál.

A második mondat "Movie mov;" a videóobjektum deklarálására szolgál. Közülük a "Film" funkciója hasonló a PImage -hez.

A függvénybeállításban a "mov = new Movie (ez," 1.mov ");" hatása objektum létrehozása és olvasási útvonalának meghatározása. Az utolsó paramétert a videóforrás címével kell kitölteni.

Behine beállítása, a movieEvent a videoeseményt képviseli. A videó információk frissítésére és olvasására szolgál. A "mov.read ()" ebben az esetben olvasást jelent.

A képmegjelenítés kivételével a funkciókép képes videót is megjeleníteni. A videobjektumot dinamikus képnek tekinthetjük. Az első paraméter a videóobjektum változónevének kitöltése. A második és harmadik paraméter a videó által rajzolt vízszintes és függőleges koordináta. A negyedik és az ötödik paraméter határozza meg a videó megjelenítésének hosszát és szélességét.

A.play () függvény játékot jelent. A.stop () függvény leállítást jelent, és visszaállítja a videót. A.pause () függvény szünetet jelent. Megszakítja az aktuális lejátszást, ami addig folytatódik, amíg a.play () függvényt meg nem hívják.

6. lépés: Videó sebességszabályozás

Kód példa (10-4):

[cceN_cpp theme = "dawn"] import feldolgozás.video.*;

Film mov;

void setup () {

méret (640, 360);

háttér (0);

mov = új film (ez, "tranzit.mov");

}

void movieEvent (Filmfilm) {

mov.read ();

}

void draw () {

kép (mov, 0, 0, szélesség, magasság);

float newSpeed = egérX/(úszó) szélesség * 4;

mov.speed (newSpeed);

}

void keyPressed () {

if (kulcs == 'p') {

mov.play ();

}

if (kulcs == 's') {

mov.stop ();

}

if (kulcs == 'd') {

mov.pause ();

}

}

[/cceN_cpp]

Kód magyarázata:

A.speed () függvénnyel szabályozható a videolejátszás sebessége. Ha a paraméter értéke 1, a lejátszási sebesség normális. Ha az érték meghaladja az 1 -et, akkor gyorsítson; míg 1 alatt van, majd lassítson.

Mivel építettük a newSpeed helyi változót, és importáltuk a setSpeed () függvénybe, az egér koordinátája közvetlenül befolyásolja a videó lejátszási sebességét.

Ami a videóval kapcsolatos további példákat illeti, tekintse meg a Könyvtárak - Videó az esetkönyvtárban részt.

7. lépés: A gyakori események feldolgozása

Korábban csak a keyPressed () eseményt vezettük be. A billentyűzet megnyomása után aktiválódik. A következőkben a Feldolgozás más gyakori eseményeit mutatjuk be Önnek.

A fenti események használata hasonló a keyPressed -hez. Nincs kódsoruk a kódírásban. Más szóval, függetlenül attól, hogy melyik eseményt helyezte el a funkció beállítása előtt vagy mögött, ugyanazt az eredményt kapja. A végrehajtási parancs csak az esemény kiváltó feltételéhez kapcsolódik. Csak akkor teljesül, ha a feltétel teljesül. A fenti események nagyon könnyen érthetők. Csak egy kis kísérletet kell elvégeznie, majd gyorsan felfoghatja a használatukat.

Eseményfolyamat

Példa segítségével ismerhetjük az események végrehajtási sorrendjét.

Kód példa (10-5):

[cceN_cpp theme = "dawn"] érvénytelen beállítás () {

frameRate (2);

println (1);

}

void draw () {

println (2);

}

void mousePressed () {

println (3);

}

void mouseMoved () {

println (4);

}

void mouseReleased () {

println (5);

}

void keyPressed () {

println (6);

}

void keyReleased () {

println (7);

} [/cceN_cpp]

Kód magyarázata:

A funkcióbeállításban a frameRate () a program működési sebességét 2 képkocka / másodperc értékre állította be. A képkockasebesség csökkentése segíthet nekünk megfigyelni a kimenetet a konzolban, arra az esetre, ha a kiváltott eseményeket azonnal új adatok borítják a hátlapra.

Próbálja meg mozgatni az egeret, kattintson az egérre, engedje el az egeret, és figyelje meg a kimeneti eredményt. Ismerje meg az eseményvégrehajtási parancsot a println segítségével.

Amire érdemes figyelni, az az, hogy a rajzfüggvényeket nem lehet más eseményekbe írni, kivéve a függvény rajzolását, vagy nem jeleníthető meg. Ha a billentyűzethez hasonló eseményeken keresztül szeretnénk szabályozni a grafikus komponensek elrejtését és megjelenítését, akkor fontolóra vehetjük a bool változó építését közepesnek.

Az események sorrendben fognak végrehajtódni. Csak az aktuális esemény összes kódjának végrehajtása után hajtja végre a kódot a következő eseményben.

8. lépés: Átfogó példa-Zenei billentyűzet

Az újonnan felfogott eseményekkel kombinálva új interakciókkal bővíthetjük programunkat. Ezután csak néhány perc alatt könnyen analógizálhatunk egy zenei billentyűzetet.

Videó webhely:

Kód példa (10-6):

[cceN_cpp theme = "hajnal"] import feldolgozás.hang.*;

SoundFile hang1, hang2, hang3, hang4, hang5;

logikai kulcs1, kulcs2, kulcs3, kulcs4, kulcs5;

void setup () {

méret (640, 360);

háttér (255);

noStroke ();

sound1 = új SoundFile (ez, "do.wav");

sound2 = új SoundFile (ez, "re.wav");

sound3 = új SoundFile (ez, "mi.wav");

sound4 = új SoundFile (ez, "fa.wav");

sound5 = új SoundFile (ez, "so.wav");

}

void draw () {

háttér (255, 214, 79);

rectMode (CENTER);

úszó w = szélesség * 0,1;

úszó h = magasság * 0,8;

if (kulcs1) {

kitöltés (255);

} más {

kitöltés (238, 145, 117);

}

rect (szélesség/6, magasság/2, w, h);

if (kulcs2) {

kitöltés (255);

} más {

kitöltés (246, 96, 100);

}

rect (szélesség/6 * 2, magasság/2, w, h);

if (kulcs3) {

kitöltés (255);

} más {

kitöltés (214, 86, 113);

}

rect (szélesség/6 * 3, magasság/2, w, h);

if (kulcs4) {

kitöltés (255);

} más {

kitöltés (124, 60, 131);

}

rect (szélesség/6 * 4, magasság/2, w, h);

if (5. kulcs) {

kitöltés (255);

} más {

kitöltés (107, 27, 157);

}

rect (szélesség/6 * 5, magasság/2, w, h);

}

void keyPressed () {

if (kulcs == 'a') {

sound1.play ();

kulcs1 = igaz;

}

if (kulcs == 's') {

sound2.play ();

kulcs2 = igaz;

}

if (kulcs == 'd') {

sound3.play ();

kulcs3 = igaz;

}

if (kulcs == 'f') {

sound4.play ();

key4 = igaz;

}

if (kulcs == 'g') {

sound5.play ();

key5 = igaz;

}

}

void keyReleased () {

if (kulcs == 'a') {

kulcs1 = hamis;

}

if (kulcs == 's') {

kulcs2 = hamis;

}

if (kulcs == 'd') {

kulcs3 = hamis;

}

if (kulcs == 'f') {

kulcs4 = hamis;

}

if (kulcs == 'g') {

key5 = hamis;

}

} [/cceN_cpp]

Kód magyarázata:

Több audioobjektumot kell létrehoznunk, hogy elolvashassuk a relatív hanginformációkat, hogy különböző hangokat játsszunk le, amikor különböző billentyűk működnek.

Itt egy új eseménykulcsot használunkReleased (). Ennek az eseménynek az a feladata, hogy visszaállítsa a billentyűzet színét az eredeti színére. A kulcs elengedésekor aktiválódik.

A fejben megadott 5 logikai érték a kulcs állapotának észlelésére szolgál.

9. lépés: Átfogó példa-Zenei paletta 1

A billentyűs esemény mellett az egéresemény jó dolog, ha rugalmasan kell használnunk. A következő példa egy zenei paletta létrehozását jelenti számunkra, amely közül két egérrel kapcsolatos eseményt használtunk.

Videó webhely:

Kód példa (10-7):

[cceN_cpp theme = "hajnal"] import feldolgozás.hang.*;

SoundFile hang1, hang2, hang3, hang4, hang5;

logikai isDragging;

void setup () {

méret (640, 360);

háttér (255, 214, 79);

noStroke ();

sound1 = új SoundFile (ez, "do.wav");

sound2 = új SoundFile (ez, "re.wav");

sound3 = új SoundFile (ez, "mi.wav");

sound4 = új SoundFile (ez, "fa.wav");

sound5 = új SoundFile (ez, "so.wav");

}

void draw () {

if (isDragging) {

kitöltés (107, 27, 157, 100);

ellipszis (mouseX, mouseY, 16, 16);

}

}

void mouseDragged () {

isDragging = igaz;

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

} [/cceN_cpp]

Kód magyarázata:

Reméljük, hogy csak akkor tudjuk rajzolni, ha lenyomtuk az egeret és elhúztuk. Tehát létre kell hoznunk az isDragging logikai változót, hogy megkapjuk az aktuális állapotot.

Az egér húzása közben az isDragging valódi értékké válik, így a Draw rajzolási funkciói végrehajtásra kerülnek. Nyomokat hagy a képernyőn. Amikor elengedjük az egeret, az isDragging hamis értékké válik. Tehát a függvényrajzoló rajzfunkciók leállítják a végrehajtást.

Számos kiváltó körülményt terveztünk az egér húzása esetén. Például, ha az egér vízszintes koordinátája 100 és 105 képpont között van, a zene automatikusan lejátszódik. Ezáltal a képernyő több láthatatlan karakterláncot hozott létre. Csak ha az egér áthalad bizonyos területeken, akkor aktiválja a relatív zenét.

10. lépés: Átfogó példa-2. zenei paletta (frissített verzió)

A fenti példa hatása már elég jó. De ha alaposan megnézzük, sok problémát találunk. Például, ha az egér nagyon gyorsan mozog, akkor minden mozdulatkor kerek pontot hagy a képernyőn. Ez nem koherens egyenes. Közben némi zenei szivárgást is okoz. Míg amikor az egér nagyon lassan mozog, áthalad a pozíción, amikor a vízszintes koordináta 100 és 105 között van, akkor nagyon rövid időn belül többször is zenét sugároz, ami megrekedt érzést kelt. Mindezen problémák megoldhatók az alábbi példán keresztül.

Az alábbi linken megtekintheti a videókat:

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

Kód példa (10-8):

[cceN_cpp theme = "hajnal"] import feldolgozás.hang.*;

SoundFile hang1, hang2, hang3, hang4, hang5;

logikai isDragging;

void setup () {

méret (640, 360);

háttér (255, 214, 79);

noStroke ();

sound1 = új SoundFile (ez, "do.wav");

sound2 = új SoundFile (ez, "re.wav");

sound3 = új SoundFile (ez, "mi.wav");

sound4 = új SoundFile (ez, "fa.wav");

sound5 = új SoundFile (ez, "so.wav");

}

void draw () {

if (isDragging) {

ütés (107, 27, 157, 100);

strokeSúly (10);

line (mouseX, mouseY, pmouseX, pmouseY);

}

}

void mouseDragged () {

isDragging = igaz;

if ((egérX - 100) * (pmouseX - 100) <0) {

sound1.play ();

}

if ((egérX - 200) * (pmouseX - 200) <0) {

sound2.play ();

}

if ((egérX - 300) * (pmouseX - 300) <0) {

sound3.play ();

}

if ((egérX - 400) * (pmouseX - 400) <0) {

sound4.play ();

}

if ((egérX - 500) * (pmouseX - 500) <0) {

sound5.play ();

}

}

void mouseReleased () {

isDragging = hamis;

} [/cceN_cpp]

Kód magyarázata:

Itt két változót használtunk, a pmouseX és a pmouseY, amelyeket magában a feldolgozórendszerben hordozunk. Hasonlóak az mouseX -hez és az mouseY -hez, de amit kaptak, az az egér koordinátája az utolsó képkockában.

A Funkció rajzolásban a () függvényvonalat használtuk az eredeti ellipszis () helyett. Ezáltal az utolsó képkocka koordinátája közvetlenül kapcsolódik az aktuális keret koordinátájához. Tehát koherens egyeneseket vagy görbéket rajzolhatunk.

Az mouseDragged esetén új aktiválási feltételt terveztünk. Annak megítélésével, hogy az utolsó keret és az aktuális keret koordinátái ugyanazon az oldalon vannak -e, hogy megtudja, átlép -e egy bizonyos koordinátát. Vegyük példának ezt a feltételt: "if ((mouseX - 100) * (pmouseX - 100) <0)". Közülük az "mouseX - 100" pozitív és negatív értékéből megtudhatjuk, hogy az mouseX a 100 vízszintes coodinate jobb vagy bal oldalán található -e. A "pmouseX - 100" -hoz hasonlóan. Ezért, ha az elülső és a hátsó két pont nem ugyanazon az oldalon található, a pozitív megszorozza a negatívot, új negatív számot kap. Így a végrehajtási feltétel teljesül.

A fenti egy leegyszerűsített kifejezés, amely ügyesen alkalmazott egy bizonyos matematikai algoritmust-Két negatív szorzás pozitív eredményt hoz létre. Azt is fel lehet osztani két helyzetre, hogy külön megvitassák. Az ítélkezési feltételek megírása azonban sokkal bonyolultabb. Az "if ((mouseX = 100) || (mouseX> 100 && pmouseX <= 100))" megítélési feltételek egyenértékűek a forráskód meghatározó feltételeivel.

11. lépés: Relatív funkciók az audio- és videóvezérlésről

A fent említett funkciók elegendőek az általános használati forgatókönyvekhez. Ha mélyre akarja ásni, itt összegyűjtöttem néhány közös funkciót az audio és a videó vonatkozásában. Felhasználási lehetőségeit saját igényei szerint fedezheti fel.

Bővebb bemutatkozáshoz hivatkozhat a hivatalos weboldal dokumentumaira.

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

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

Ez a cikk Wenzy tervezőtől származik.

12. lépés: Relatív értékek:

Érdekes programozási útmutató tervezőnek-Az első érintés feldolgozása

Érdekes programozási útmutató tervezőnek - Készítse el első feldolgozó programját

Érdekes programozási útmutató tervezőnek-Futtassa a képet (első rész)

Érdekes programozási útmutató tervezőnek-Futtassa a képet (második rész)

Érdekes programozási útmutató tervezőnek- programfolyamat-vezérlés- huroknyilatkozat

Érdekes programozási útmutató tervezőnek-Programfolyamat-vezérlés-Állapotnyilatkozat (első rész)

Érdekes programozási útmutató tervezőnek-Programfolyamat-vezérlés-Állapotnyilatkozat (második rész)

Érdekes programozási útmutató tervezőnek-Egyedi funkciók és fraktál rekurzió

Érdekes programozási útmutató tervezőnek-Egyedi funkciók és fraktál rekurzió

Érdekes feldolgozási programozási útmutató tervezőnek-színszabályozás

13. lépés: Forrás

Ez a cikk innen származik:

Ha bármilyen kérdése van, vegye fel a kapcsolatot a : [email protected] címen.

Ajánlott: