Zanimive smernice za programiranje obdelave za oblikovalca-nalaganje medijev in dogodek: 13 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:08

V obdelavo se lahko naloži veliko zunanjih podatkov, med katerimi se zelo pogosto uporabljajo tri vrste. Ločeno so slike, zvok in video.

V tem poglavju se bomo pogovarjali o tem, kako podrobno naložiti zvok in video, skupaj z dogodki. Na koncu lahko ustvarite svojo glasbeno tipkovnico ali glasbeno paleto.

Korak: Preberite sliko

Preden začnemo, se ozrimo na način nalaganja slik.

2. korak: Funkcije, povezane s sliko

Preden uporabimo te funkcije, moramo ustvariti slikovni objekt s pomočjo PImage. Nato lahko s temi funkcijami definiramo vse vrste lastnosti slike.

Preden zaženete program, ne pozabite shraniti svojih slikovnih virov v podatkovno datoteko.

3. korak: Nalaganje glasbe, predvajanje in ustavitev

V nadaljevanju vam začnemo formalno predstavljati priklic glasbe. Zelo podobno kot nalaganje slik, avdio objekt morate prijaviti na začetku. Spodaj se lahko sklicujete na dejansko slovnico.

Primer kode (10-1):

[cceN_cpp theme = "dawn"] uvoz obdelava.zvok.*;

SoundFile zvok;

void setup () {

velikost (640, 360);

ozadje (255);

zvok = nov SoundFile (ta, "1.mp3");

}

void draw () {

}

void keyPressed () {

// Predvajaj zvok

if (key == 'p') {

sound.play ();

}

// Ustavi zvok

if (key == 's') {

sound.stop ();

}

} [/cceN_cpp]

Priprava:

Sama obdelava ne vsebuje zvočne knjižnice. Morate ga prenesti sami. Torej, preden napišete kodo, raje naredite naslednje.

Dodajanje knjižnice v obdelavo. Tukaj je običajna praksa. V menijski vrstici izberite »Orodje«- »Dodaj orodje« in nato preklopite na »Knjižnice«. V iskalni stolpec vnesite ključne besede knjižnice, da jih lahko neposredno prenesete in namestite.

Če pa to funkcijo uporabljamo v domači državi (na Kitajskem), je ne moremo prenesti z neposredno povezavo s spletom. Zagnati moramo VPN. Čeprav bomo začeli, bodo nestabilni pogoji. Zato morate biti potrpežljivi, da poskusite večkrat. To je najprimernejši način nalaganja. Če ne morete namestiti, morate ročno prenesti z uradne spletne strani. (https://processing.org/reference/libraries/) Ker je način ročne namestitve zelo zapleten, bomo o njem nadalje razpravljali v drugem poglavju.

Pojasni kodo:

Knjižnica zvokov lahko deluje pravilno po končani pripravi. Kopirajte zgornjo kodo, kliknite RUN, potem bo delovala. Za predvajanje glasbe pritisnite tipko "P", za ustavitev predvajanja "S".

Če je vajen programa, ga moramo najprej naložiti. Na začetku moramo dodati stavek "import processing.sound.*". "uvoz" je ključna beseda, kar pomeni dobesedno nalaganje. Dodajte ime knjižnice za "import", nato bo knjižnica naložena. Rep običajno sledi oznaki "*", zato bo v program naložil vse razrede, povezane s knjižnico, ne da bi jih morali ročno dodajati enega za drugim.

V drugem stavku je "SoundFile sound;" razglasil avdio objekt. SoundFile je podoben PImage.

Pri nastavitvi funkcije se "sound = new SoundFile (this," 1.mp3 ");" uporablja za ustvarjanje predmeta in določanje njegove poti branja. Tu smo pravzaprav že začeli uporabljati nov koncept razreda. Trenutno o tem ne razpravljamo poglobljeno. Vedeti moramo le, da je to fiksna metoda pisanja in zadnji parameter je za polnjenje naslova glasbenega vira.

Med dogodki keyPressed () "sound.play ()" in "sound.stop ()" relativno delujeta kot učinek predvajanja in ustavitve. "." na sredini označuje funkcijo člana, ki predvaja in ustavi pripada avdio predmetom. Funkcijo člana lahko obravnavamo kot funkcijo, vključeno v objekt. Pripada temu objektu, ki je vnaprej opredeljen. Pozneje, ko moramo predvajati več zvočnih predmetov, moramo za imenom relativne spremenljivke dodati le ".play ()".

Zvočni viri se shranijo v podatkovno datoteko pod istim katalogom datoteke skice (s pripono pde). Če ga ni, ga lahko ustvarite ročno.

Ne pozabite napisati funkcije draw. Čeprav niste narisali nobene grafike, je potrebno uspešno predvajati glasbo.

Zgornji postopek se zdi precej zapleten, vendar morate dodati samo več stavkov kode, nato pa lahko uresničite funkcijo predvajanja. To je zelo priročno.

Obdelava podpira običajne zvočne formate, kot so mp3, wav, ogg itd.

4. korak: Nadzor hitrosti glasbe

Naslednji primeri bodo postali zelo zanimivi. Obdelava je zagotovila nekatere funkcije, ki lahko nadzorujejo hitrost predvajanja glasbe. Hkrati se bodo toni spreminjali s hitrostjo predvajanja glasbe. Ko za upravljanje uporabljamo miško, bo ta ustvarila zelo psihodelični učinek.

Video spletno mesto:

Primer kode (10-2):

[cceN_cpp theme = "dawn"] uvoz obdelava.zvok.*;

SoundFile zvok;

void setup () {

velikost (640, 360);

ozadje (255);

zvok = nov SoundFile (to, "1.mp3");

}

void draw () {

plavajoča hitrost = mouseX/(float) width * 3;

stopnja zvoka (hitrost);

float vol = mišY/višina (plavajoča) * 4;

zvok.amp (vol);

}

void keyPressed () {

// Predvajaj zvok

if (key == 'p') {

sound.play ();

}

// Ustavi zvok

if (key == 's') {

sound.stop ();

}

} [/cceN_cpp]

Koda Pojasni:

Funkcija.rate () nadzoruje hitrost predvajanja zvoka. Vrednost v oklepaju določa hitro in počasno hitrost predvajanja. Ko je vrednost 1, je hitrost predvajanja normalna. Ko je več kot 1, potem pospešite; medtem ko je pod 1, nato upočasnite.

Funkcija.amp () nadzoruje glasnost zvoka. Vrednost v oklepaju določa vrednost glasnosti. Ko je 1, je glasnost normalna. Ko je več kot 1, povečajte glasnost; medtem ko je pod 1, nato zmanjšajte glasnost.

Tukaj smo zgradili dve lokalni spremenljivki hitrost in vol kot parametre za nalaganje. Zato bo vodoravna koordinata miške spremenila glasbeni ton, navpična koordinata pa glasnost glasbe.

5. korak: Predvajanje videa in ustavitev

V obdelavi je nalaganje videa podobno nalaganju zvoka. Najprej morate prenesti videoteko. (https://processing.org/reference/libraries/video/index.html)

Primer kode (10-3):

[cceN_cpp theme = "dawn"] uvoz obdelava.video.*;

Filmski film;

void setup () {

velikost (640, 360);

ozadje (0);

mov = nov film (ta, "1.mov");

}

void movieEvent (filmski film) {

mov.read ();

}

void draw () {

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

}

void keyPressed () {

if (key == 'p') {

mov.play ();

}

if (key == 's') {

mov.stop ();

}

if (key == 'd') {

mov.pause ();

}

} [/cceN_cpp]

Posnetek zaslona videoposnetka:

Koda Pojasni:

Prvi stavek "import processing.video.*;" Se uporablja za nalaganje videoteke.

Drugi stavek "Movie mov;" se uporablja za razglasitev video predmeta. Med njimi je funkcija "Movie" podobna PImage.

Pri nastavitvi funkcije je učinek "mov = new Movie (this," 1.mov ");" ustvarjanje predmeta in določitev njegove poti branja. Zadnji parameter se izpolni z naslovom video vira.

Behine setup, movieEvent predstavlja video dogodek. Uporablja se za posodabljanje in branje video informacij. "mov.read ()" v primeru pomeni branje.

Razen za prikaz slik lahko funkcija slike prikaže tudi video. Video objekt lahko obravnavamo kot dinamično sliko. Prvi parameter, vnesemo ime spremenljivke video predmeta. Drugi in tretji parameter sta vodoravna in navpična koordinata, ki jo nariše video. Četrti in petiti parameter določata dolžino in širino video prikaza.

Funkcija.play () pomeni igro. Funkcija.stop () pomeni ustavitev in ponastavi videoposnetek. Funkcija.pause () pomeni premor. Prekinil bo trenutno predvajanje, ki se bo nadaljevalo, dokler se ne prikliče funkcija.play ().

6. korak: Nadzor hitrosti videa

Primer kode (10-4):

[cceN_cpp theme = "dawn"] uvoz obdelava.video.*;

Filmski film;

void setup () {

velikost (640, 360);

ozadje (0);

mov = nov film (ta, "transit.mov");

}

void movieEvent (filmski film) {

mov.read ();

}

void draw () {

slika (mov, 0, 0, širina, višina);

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]

Koda Pojasni:

Funkcijo.speed () lahko uporabite za nadzor hitrosti predvajanja videa. Ko je vrednost parametra 1, je hitrost predvajanja normalna. Ko vrednost preseže 1, potem pospešite; medtem ko je pod 1, nato pa počasi.

Ker smo zgradili lokalno spremenljivko newSpeed in jo uvozili v funkcijo setSpeed (), bo koordinata miške neposredno vplivala na hitrost predvajanja videa.

Za več primerov o videu se lahko obrnete na Knjižnice - Video v knjižnici primerov.

7. korak: Obdelava skupnih dogodkov

Prej smo uvedli samo dogodek keyPressed (). Sprožil se bo po pritisku tipkovnice. V nadaljevanju vam bomo predstavili druge skupne dogodke v obdelavi.

Uporaba zgornjih dogodkov je podobna keyPressed. Nimajo zaporedja pri pisanju kode. Z drugimi besedami, ne glede na dogodek, ki ste ga postavili pred ali za nastavitvijo funkcije, dobite enak rezultat. Naročilo izvedbe je povezano le s sprožilnim pogojem samega dogodka. Le če je pogoj izpolnjen, se bo izvršil. Zgornje dogodke je zelo enostavno razumeti. Narediti morate le majhen poskus, nato pa lahko hitro razumete njihovo uporabo.

Tok dogodka

Za primer poznavanja vrstnega reda izvedbe dogodkov lahko uporabimo primer.

Primer kode (10-5):

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

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]

Koda Pojasni:

Pri nastavitvi funkcije je funkcija frameRate () nastavila hitrost delovanja programa na 2 sličici na sekundo. Znižanje hitrosti sličic nam lahko pomaga opazovati izhod v konzoli v primeru, da bodo sprožene dogodke takoj premaknili novi podatki nazaj.

Poskusite premakniti miško, kliknite miško, spustite miško in opazujte izhodni rezultat. Spoznajte vrstni red izvedbe dogodka prek println.

Kar je vredno biti pozoren, je, da risalnih funkcij ni mogoče zapisati v druge dogodke, razen risanja funkcij, ali pa jih ni mogoče prikazati. Če želimo nadzirati skrivanje in prikaz grafičnih komponent z dogodki, kot je keyPressed, lahko razmislimo o izdelavi spremenljivke bool kot medija.

Dogodki se bodo izvajali po vrstnem redu. Šele potem, ko je vsa koda v trenutnem dogodku implementirana, bo kodo izvedla v naslednjem dogodku.

8. korak: Celovit primer-Glasbena tipkovnica

V kombinaciji z na novo dojetimi dogodki lahko v naš program dodamo nove interakcije. Nato, le v nekaj minutah, lahko preprosto analiziramo glasbeno tipkovnico.

Video spletno mesto:

Primer kode (10-6):

[cceN_cpp theme = "dawn"] uvoz obdelava.zvok.*;

SoundFile zvok1, zvok2, zvok3, zvok4, zvok5;

logični ključ1, ključ2, ključ3, ključ4, ključ5;

void setup () {

velikost (640, 360);

ozadje (255);

noStroke ();

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

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

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

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

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

}

void draw () {

ozadje (255, 214, 79);

rectMode (CENTER);

plovec w = širina * 0,1;

plovec h = višina * 0,8;

if (key1) {

napolni (255);

} drugo {

izpolni (238, 145, 117);

}

pravokotno (širina/6, višina/2, š, v);

if (key2) {

napolni (255);

} drugo {

izpolni (246, 96, 100);

}

pravokotno (širina/6 * 2, višina/2, š, v);

if (key3) {

napolni (255);

} drugo {

izpolni (214, 86, 113);

}

pravokotno (širina/6 * 3, višina/2, š, v);

if (key4) {

napolni (255);

} drugo {

napolni (124, 60, 131);

}

pravokotno (širina/6 * 4, višina/2, š, v);

if (key5) {

napolni (255);

} drugo {

izpolni (107, 27, 157);

}

pravokotno (širina/6 * 5, višina/2, š, v);

}

void keyPressed () {

if (key == 'a') {

sound1.play ();

key1 = res;

}

if (key == 's') {

sound2.play ();

ključ2 = res;

}

if (key == 'd') {

sound3.play ();

key3 = res;

}

if (key == 'f') {

sound4.play ();

key4 = res;

}

if (key == 'g') {

sound5.play ();

key5 = res;

}

}

void keyReleased () {

if (key == 'a') {

key1 = false;

}

if (key == 's') {

ključ2 = napačno;

}

if (key == 'd') {

key3 = false;

}

if (key == 'f') {

key4 = false;

}

if (key == 'g') {

key5 = false;

}

} [/cceN_cpp]

Koda Pojasni:

Za branje relativnih zvočnih informacij moramo ustvariti več zvočnih objektov, da lahko predvajamo različne zvoke, ko se sprožijo različne tipke.

Tukaj uporabljamo nov ključ dogodkaReleased (). Funkcija tega dogodka je obnoviti prvotno barvo tipkovnice. Ko spustite ključ, se bo sprožil.

5 logičnih vrednosti, navedenih v glavi, se uporabljajo za zaznavanje statusa ključa.

9. korak: Celovit primer-glasbena paleta 1

Poleg dogodka na tipkovnici je dogodek miške dobra stvar, da ga moramo prilagodljivo uporabljati. Naslednji primer je namenjen ustvarjanju glasbene palete, med katero smo uporabili dva dogodka, povezana z miško.

Video spletno mesto:

Primer kode (10-7):

[cceN_cpp theme = "dawn"] uvoz obdelava.zvok.*;

SoundFile zvok1, zvok2, zvok3, zvok4, zvok5;

logično isDragging;

void setup () {

velikost (640, 360);

ozadje (255, 214, 79);

noStroke ();

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

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

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

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

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

}

void draw () {

if (isDragging) {

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

Koda Pojasni:

Upamo, da lahko šele, ko pritisnemo miško in jo povlečemo, narišemo slike. Zato moramo zgraditi logično spremenljivko isDragging za pridobitev trenutnega stanja.

Ko povlečete miško, postane isDragging resnična vrednost, tako da se bodo v risbi izvajale funkcije risanja. Na zaslonu bo pustil sledi. Ko spustimo miško, isDragging postane napačna vrednost. Tako bodo funkcije risanja v funkciji draw ustavile izvajanje.

Oblikovali smo več sprožilnih pogojev v primeru vlečenja miške. Na primer, če je vodoravna koordinata miške med 100 in 105 slikovnimi pikami, se bo glasba predvajala samodejno. Tako zaslon ustvari več nevidnih nizov. Le če miška preide skozi določena območja, bo sprožila relativno glasbo.

10. korak: Celovit primer-Glasbena paleta 2 (posodobljena različica)

Učinek zgornjega primera je že dovolj dober. Če pa ga pozorno opazujemo, bomo našli veliko težav. Na primer, ko se miška zelo hitro premika, bo ob vsakem premikanju pustila okroglo točko na zaslonu. To ni skladna ravna črta. Medtem pa povzroči tudi nekaj uhajanja glasbe. Medtem ko se miška premika zelo počasi in prehaja skozi položaj, ko je vodoravna koordinata med 100 in 105, bo v zelo kratkem času večkrat predvajala glasbo, kar vam daje občutek, da ste obtičali. Vse te težave lahko rešimo s spodnjim primerom.

Videoposnetke si lahko ogledate na spodnji povezavi:

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

Primer kode (10-8):

[cceN_cpp theme = "dawn"] uvoz obdelava.zvok.*;

SoundFile zvok1, zvok2, zvok3, zvok4, zvok5;

logično isDragging;

void setup () {

velikost (640, 360);

ozadje (255, 214, 79);

noStroke ();

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

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

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

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

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

}

void draw () {

if (isDragging) {

kap (107, 27, 157, 100);

strokeWeight (10);

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

Koda Pojasni:

Tu smo uporabili dve spremenljivki pmouseX in pmouseY, ki ju nosimo v samem procesorskem sistemu. Podobni so mouseX in mouseY, vendar sta dobili koordinato miške v zadnjem kadru.

Pri risanju funkcij smo uporabili funkcijsko vrstico () za zamenjavo prvotne funkcije elipse (). Tako je koordinata zadnjega kadra neposredno povezana s koordinato trenutnega okvirja. Tako lahko narišemo skladne ravne črte ali krivulje.

V primeru mouseDragged smo oblikovali nov pogoj sprožitve. S presojo, ali sta koordinata zadnjega in trenutnega okvirja na isti strani, da bi ugotovili, ali je določena koordinata prečkana. Za primer vzemite ta pogoj: "if ((mouseX - 100) * (pmouseX - 100) <0)". Med njimi lahko iz pozitivne in negativne vrednosti, ki izhaja iz "mouseX - 100", ugotovimo, ali je mouseX desno ali levo od vodoravne koordinate 100. Podobno kot "pmouseX - 100". Ko torej dve točki spredaj in zadaj nista na isti strani, pozitiva pomnoži negativno, bo dobila novo negativno število. Tako je pogoj za izvedbo izpolnjen.

Zgoraj je poenostavljen izraz, ki je spretno uporabil določen matematični algoritem-dva negativa, ki se pomnožita, bosta ustvarila pozitivno. Razdelite ga lahko tudi v dve situaciji, o katerih lahko razpravljate ločeno. Vendar je veliko težje napisati sodne pogoje. Pogoji presoje "if ((mouseX = 100) || (mouseX> 100 && pmouseX <= 100))" so enakovredni pogojem določanja izvorne kode.

11. korak: Relativne funkcije o nadzoru zvoka in videa

Zgoraj omenjene funkcije zadostujejo za splošne scenarije uporabe. Če ga želite poglobiti, sem tukaj zbral nekaj skupnih funkcij v zvezi z zvokom in videom. Njegove uporabe lahko raziščete glede na svoje potrebe.

Za več informacij se lahko obrnete na dokumente z uradne spletne strani.

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

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

Ta članek prihaja od oblikovalca Wenzyja.

12. korak: Relativni odčitki:

Zanimiv programski vodnik za oblikovalca-obdelava začetnega dotika

Zanimiva programska navodila za oblikovalca - ustvarite svoj prvi program obdelave

Zanimiv programski vodnik za oblikovalca-zaženite svojo sliko (prvi del)

Zanimiv programski vodnik za oblikovalca-zaženite svojo sliko (drugi del)

Zanimive smernice za načrtovanje programov za oblikovalca- programski nadzor procesa- izjava o zanki

Zanimive programske smernice za oblikovalca-Nadzor programskega procesa-Izjava o stanju (prvi del)

Zanimive programske smernice za oblikovalca-Nadzor programskega procesa-Izjava o stanju (drugi del)

Zanimivo programsko vodilo za oblikovalca-funkcije po meri in fraktalna rekurzija

Zanimiva programska navodila za oblikovalca-funkcije po meri in fraktalna rekurzija

Zanimive smernice za programiranje obdelave za oblikovalca-nadzor barv

13. korak: Vir

Ta članek je iz:

Če imate kakršna koli vprašanja, se lahko obrnete na: [email protected].