Sadržaj:

Zanimljive upute za programiranje obrade za dizajnera-učitavanje medija i događaj: 13 koraka
Zanimljive upute za programiranje obrade za dizajnera-učitavanje medija i događaj: 13 koraka

Video: Zanimljive upute za programiranje obrade za dizajnera-učitavanje medija i događaj: 13 koraka

Video: Zanimljive upute za programiranje obrade za dizajnera-učitavanje medija i događaj: 13 koraka
Video: 🚀 RUTUBE i POINT. RUTUBA razvoj u 5 sati *BEZ VODE* [Next / React / Nest / PostgreSQL / Redux] 2024, Juli
Anonim
Zanimljive upute za programiranje obrade za dizajnera-učitavanje medija i događaj
Zanimljive upute za programiranje obrade za dizajnera-učitavanje medija i događaj

U obradu se može učitati mnogo vanjskih podataka, među kojima postoje tri vrste koje se vrlo često koriste. Odvojeno su slika, audio i video.

U ovom poglavlju ćemo govoriti o tome kako detaljno učitati audio i video zapise, kombinirajući ih sa događajima. Na kraju možete stvoriti vlastitu muzičku tastaturu ili muzičku paletu.

Korak 1: Pročitajte sliku

Prije nego što počnemo, osvrnimo se na način učitavanja slike.

Korak 2: Funkcije povezane sa slikom

Prije nego što upotrijebimo ove funkcije, moramo stvoriti slikovni objekt kroz PImage. Zatim možemo koristiti ove funkcije za definiranje svih vrsta svojstava slike.

Ne zaboravite pohraniti izvore slika u datoteku s podacima prije pokretanja programa.

Korak 3: Učitavanje muzike, reprodukcija i zaustavljanje

U nastavku vam počinjemo formalno predstavljati pozivanje na muziku. Vrlo slično učitavanju slike, morate najaviti audio objekt na početku. Možete pogledati donji primjer iz stvarne gramatike.

Primjer koda (10-1):

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

SoundFile zvuk;

void setup () {

veličina (640, 360);

pozadina (255);

zvuk = novi SoundFile (ovaj, "1.mp3");

}

void draw () {

}

void keyPressed () {

// Reproduciraj zvuk

if (ključ == 'p') {

sound.play ();

}

// Zaustavi zvuk

if (key == 's') {

sound.stop ();

}

} [/cceN_cpp]

Priprema:

Sama obrada ne nosi nikakvu biblioteku zvuka. Morate ga sami preuzeti. Stoga, prije nego što napišete svoj kod, bolje je da napravite sljedeće.

Dodavanje biblioteke u obradu. Evo uobičajene prakse. Na traci izbornika odaberite "Alat"- "Dodaj alat", a zatim prijeđite na "Biblioteke". Unesite ključne riječi biblioteke u kolonu za pretraživanje tako da ih možete direktno preuzeti i instalirati.

Međutim, ako ovu funkciju koristimo u našoj zemlji (u Kini), ne možemo je preuzeti direktnim povezivanjem weba. Moramo pokrenuti VPN. Iako ga pokrenemo, bit će nestabilni uvjeti. Zato morate biti strpljivi da ga isprobate nekoliko puta. Ovo je najprikladniji način utovara. Ako ne možete instalirati, morate preuzeti sa službene web stranice prema priručniku. (https://processing.org/reference/libraries/) Budući da je metoda ručne instalacije vrlo komplicirana, o tome ćemo dalje govoriti u drugom poglavlju.

Šifra objasni:

Biblioteka zvuka može ispravno raditi nakon završetka pripreme. Kopirajte gornji kôd, kliknite Pokreni, tada će on raditi. Pritisnite tipku "P" za reprodukciju muzike, "S" za zaustavljanje muzike.

Ako se koristi za program, prvo ga moramo učitati. Na početku moramo dodati rečenicu "import processing.sound.*". "uvoz" je ključna riječ, što znači doslovno učitavanje. Dodajte naziv biblioteke iza "import", tada će učitati biblioteku. Rep obično slijedi oznaku "*", pa će učitati sve klase povezane s bibliotekom u program bez potrebe da ih dodaju jednu po jednu ručno.

U drugoj rečenici, "SoundFile sound;" deklarirao je audio objekt. SoundFile je sličan PImage -u.

U okviru postavljanja funkcije, "sound = new SoundFile (this," 1.mp3 ");" se koristi za kreiranje objekta i definiranje njegove putanje čitanja. Ovdje smo zapravo već počeli koristiti novi koncept klase. Trenutno o tome ne raspravljamo duboko. Moramo samo znati da je to fiksna metoda pisanja, a posljednji parametar je za popunjavanje adrese izvora muzike.

Među keyPressed () događajima, "sound.play ()" i "sound.stop ()" relativno funkcioniraju kao učinak reprodukcije i zaustavljanja. "." u sredini označava funkciju člana koja reprodukcija i zaustavljanje pripadaju audio objektima. Funkciju člana možemo smatrati funkcijom uključenom u objekt. Pripada ovom objektu, koji je prethodno definisan. Kasnije, kada moramo reproducirati više audio objekata, moramo samo dodati ".play ()" iza naziva relativne varijable.

Audio izvori pohranit će se u datoteku podataka pod istim katalogom datoteke sketch (sa sufiksom pde). Ako ga nema, možete ga ručno stvoriti.

Ne zaboravite napisati draw draw. Iako niste nacrtali grafiku, potrebno je uspješno reproducirati muziku.

Gornji postupak izgleda prilično složen, ali trebate dodati samo nekoliko rečenica koda, a zatim možete realizirati funkciju reprodukcije. Vrlo je zgodan.

Obrada podržava uobičajene audio formate poput mp3, wav, ogg itd.

Korak 4: Kontrola brzine muzike

Sljedeći primjeri počet će postajati vrlo zanimljivi. Obrada je pružila neke funkcije koje mogu kontrolirati brzinu reprodukcije muzike. Istovremeno, tonovi će se mijenjati sa brzinom reprodukcije muzike. Kad za kontrolu koristimo miša, on će generirati vrlo psihodelični učinak.

Video web stranica:

Primjer koda (10-2):

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

SoundFile zvuk;

void setup () {

veličina (640, 360);

pozadina (255);

zvuk = novi SoundFile (ovaj, "1.mp3");

}

void draw () {

brzina plovka = mouseX/(float) širina * 3;

brzina zvuka (brzina);

float vol = mouseY/(float) visina * 4;

sound.amp (vol);

}

void keyPressed () {

// Reproduciraj zvuk

if (ključ == 'p') {

sound.play ();

}

// Zaustavi zvuk

if (key == 's') {

sound.stop ();

}

} [/cceN_cpp]

Šifra Objasni:

Funkcija.rate () kontrolira brzinu reprodukcije zvuka. Vrijednost u zagradama određuje brzu i sporu brzinu reprodukcije. Kada je vrijednost 1, brzina reprodukcije je normalna. Kada je iznad 1, tada ubrzajte; dok je ispod 1, zatim usporite.

Funkcija.amp () kontroliše jačinu zvuka. Vrijednost u zagradama određuje vrijednost volumena. Kada je 1, vrijednost jačine zvuka je normalna. Kada je iznad 1, povećajte jačinu zvuka; dok je ispod 1, zatim smanjite glasnoću.

Ovdje smo izgradili dvije lokalne varijable speed i vol kao parametre za učitavanje. Stoga će horizontalna koordinata miša promijeniti muzički ton, a vertikalna koordinata će promijeniti jačinu muzike.

Korak 5: Video reprodukcija i zaustavljanje

U obradi, učitavanje videa je slično učitavanju zvuka. Prvo morate preuzeti videoteku. (https://processing.org/reference/libraries/video/index.html)

Primjer koda (10-3):

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

Movie mov;

void setup () {

veličina (640, 360);

pozadina (0);

mov = novi film (ovaj, "1.mov");

}

void movieEvent (Filmski film) {

mov.read ();

}

void draw () {

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

}

void keyPressed () {

if (ključ == 'p') {

mov.play ();

}

if (key == 's') {

mov.stop ();

}

if (ključ == 'd') {

mov.pause ();

}

} [/cceN_cpp]

Snimak ekrana videozapisa:

Šifra Objasni:

Prva rečenica "import processing.video.*;" Koristi se za učitavanje videoteke.

Druga rečenica "Movie mov;" koristi se za deklaraciju video objekta. Među njima, funkcija "Movie" je slična PImage -u.

U postavljanju funkcije, učinak "mov = new Movie (this," 1.mov ");" je stvaranje objekta i definiranje njegove putanje čitanja. Zadnji parametar popunjava se adresom video izvora.

Uostalom, movieEvent predstavlja video događaj. Koristi se za ažuriranje i čitanje video informacija. "mov.read ()" u slučaju da znači čitanje.

Osim za prikaz slika, funkcija funkcije može prikazati i video zapis. Video objekt možemo posmatrati kao dinamičku sliku. Prvi parametar, unosimo naziv varijable video objekta. Drugi i treći parametar su vodoravna i okomita koordinata koju iscrtava video zapis. Četvrti i petiti parametar određuju dužinu i širinu video prikaza.

Funkcija.play () znači igranje. Funkcija.stop () znači zaustavljanje i vratit će videozapis na zadano. Funkcija.pause () znači pauza. To će prekinuti trenutnu reprodukciju, koja će se nastaviti sve dok se ne pozove funkcija.play ().

Korak 6: Kontrola brzine videa

Primjer koda (10-4):

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

Movie mov;

void setup () {

veličina (640, 360);

pozadina (0);

mov = novi film (ovo, "transit.mov");

}

void movieEvent (Filmski film) {

mov.read ();

}

void draw () {

slika (mov, 0, 0, širina, visina);

float newSpeed = mouseX/(float) širina * 4;

mov.speed (newSpeed);

}

void keyPressed () {

if (ključ == 'p') {

mov.play ();

}

if (key == 's') {

mov.stop ();

}

if (ključ == 'd') {

mov.pause ();

}

}

[/cceN_cpp]

Šifra Objasni:

Funkcija.speed () se može koristiti za kontrolu brzine reprodukcije video zapisa. Kada je vrijednost parametra 1, brzina reprodukcije je normalna. Kada je vrijednost veća od 1, tada ubrzati; dok je ispod 1, zatim usporite.

Budući da smo izgradili lokalnu varijablu newSpeed i uvezli je u funkciju setSpeed (), koordinata miša će direktno utjecati na brzinu reprodukcije videozapisa.

Što se tiče više primjera o videu, možete se pozvati na Biblioteke - Video u biblioteci predmeta.

Korak 7: Obrada uobičajenih događaja

Ranije smo predstavili samo događaj keyPressed (). On će se aktivirati nakon pritiska na tastaturu. U nastavku ćemo za vas predstaviti druge uobičajene događaje u Obradi.

Upotreba gore navedenih događaja slična je keyPressed. Nemaju redoslijed u pisanju koda. Drugim riječima, bez obzira na to koji ste događaj postavili prije ili iza postavljanja funkcije, dobivate isti rezultat. Nalog izvršenja se odnosi samo na okidačko stanje samog događaja. Samo ako je uvjet ispunjen, tada će se izvršiti. Gore navedeni događaji su vrlo laki za razumijevanje. Morate samo napraviti mali eksperiment, pa možete brzo shvatiti njihovu upotrebu.

Tok događaja

Možemo koristiti primjer da znamo redoslijed izvođenja događaja.

Primjer koda (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]

Šifra Objasni:

U postavci funkcije, funkcija frameRate () je postavila brzinu rada programa na 2 kadra u sekundi. Smanjivanje broja sličica u sekundi može nam pomoći da promatramo izlaz u konzoli u slučaju da će pokrenuti događaji odmah biti premješteni novim podacima na stražnju stranu.

Pokušajte pomaknuti miš, kliknite mišem, otpustite miš i promatrajte izlazne rezultate. Upoznajte redoslijed izvođenja događaja putem println.

Ono na što valja obratiti pažnju je da se funkcije crtanja ne mogu upisivati u druge događaje osim crtanja funkcija, ili se ne mogu prikazati. Ako želimo kontrolirati skrivanje i prikaz grafičkih komponenti kroz događaje poput keyPressed, možemo razmisliti o izgradnji bool varijable kao medija.

Događaji će se izvoditi redom. Tek nakon što se implementira sav kôd u trenutnom događaju, izvršit će kôd u sljedećem događaju.

Korak 8: Sveobuhvatan primjer-muzička tastatura

U kombinaciji s novo shvaćenim događajima, možemo dodati nove interakcije u naš program. Zatim, samo za nekoliko minuta, lako možemo analogno upravljati muzičkom tastaturom.

Video web stranica:

Primjer koda (10-6):

[cceN_cpp theme = "dawn"] uvoz obrada.zvuk.*;

SoundFile zvuk1, zvuk2, zvuk3, zvuk4, zvuk5;

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

void setup () {

veličina (640, 360);

pozadina (255);

noStroke ();

sound1 = novi SoundFile (ovo, "do.wav");

sound2 = novi SoundFile (ovaj, "re.wav");

sound3 = novi SoundFile (ovaj, "mi.wav");

sound4 = novi SoundFile (ovaj, "fa.wav");

sound5 = novi SoundFile (ovaj, "so.wav");

}

void draw () {

pozadina (255, 214, 79);

rectMode (CENTAR);

plovak w = širina * 0,1;

plovak h = visina * 0,8;

if (ključ1) {

ispuniti (255);

} else {

ispuniti (238, 145, 117);

}

pravougaoni (širina/6, visina/2, š, v);

if (key2) {

ispuniti (255);

} else {

fill (246, 96, 100);

}

pravougaoni (širina/6 * 2, visina/2, š, v);

if (key3) {

ispuniti (255);

} else {

ispuniti (214, 86, 113);

}

pravougaoni (širina/6 * 3, visina/2, š, v);

if (key4) {

ispuniti (255);

} else {

ispuniti (124, 60, 131);

}

pravougaoni (širina/6 * 4, visina/2, š, v);

if (key5) {

ispuniti (255);

} else {

ispuni (107, 27, 157);

}

pravougaoni (širina/6 * 5, visina/2, š, v);

}

void keyPressed () {

if (key == 'a') {

sound1.play ();

key1 = true;

}

if (key == 's') {

sound2.play ();

key2 = true;

}

if (ključ == 'd') {

sound3.play ();

key3 = true;

}

if (key == 'f') {

sound4.play ();

key4 = true;

}

if (ključ == 'g') {

sound5.play ();

key5 = true;

}

}

void keyReleased () {

if (key == 'a') {

key1 = false;

}

if (key == 's') {

key2 = false;

}

if (ključ == 'd') {

key3 = false;

}

if (key == 'f') {

key4 = false;

}

if (ključ == 'g') {

key5 = false;

}

} [/cceN_cpp]

Šifra Objasni:

Moramo stvoriti više audio objekata za čitanje relativnih zvučnih informacija kako bismo reproducirali različite zvukove pri aktiviranju različitih tipki.

Ovdje koristimo novi key keyReleased (). Funkcija ovog događaja je vraćanje boje tastature u originalnu boju. Kada otpustite ključ, on će se aktivirati.

5 logičkih vrijednosti deklariranih u glavi koriste se za otkrivanje statusa ključa.

Korak 9: Opsežan primjer-muzička paleta 1

Osim događaja na tipkovnici, događaj miša je dobra stvar što ga moramo fleksibilno koristiti. Sljedeći primjer služi nam za stvaranje glazbene palete, među kojima smo koristili dva događaja vezana za miša.

Video web stranica:

Primjer koda (10-7):

[cceN_cpp theme = "dawn"] uvoz obrada.zvuk.*;

SoundFile zvuk1, zvuk2, zvuk3, zvuk4, zvuk5;

boolean isDragging;

void setup () {

veličina (640, 360);

pozadina (255, 214, 79);

noStroke ();

sound1 = novi SoundFile (ovo, "do.wav");

sound2 = novi SoundFile (ovaj, "re.wav");

sound3 = novi SoundFile (ovaj, "mi.wav");

sound4 = novi SoundFile (ovaj, "fa.wav");

sound5 = novi SoundFile (ovaj, "so.wav");

}

void draw () {

if (isDragging) {

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

Šifra Objasni:

Nadamo se da tek kad pritisnemo miš i povučemo je, možemo crtati slike. Zato moramo izgraditi logičku varijablu isDragging da bismo dobili trenutni status.

Prilikom povlačenja miša, isDragging postaje prava vrijednost tako da će se funkcije crtanja unutar Draw -a izvršavati. Ostavit će tragove na ekranu. Kada otpustimo miš, isDragging postaje lažna vrijednost. Tako će funkcije crtanja u funkciji draw zaustaviti izvršavanje.

Dizajnirali smo nekoliko okidačkih uvjeta u događaju povlačenja miša. Na primjer, kada je horizontalna koordinata miša između 100 i 105 piksela, muzika će se automatski reproducirati. Time se na ekranu stvara nekoliko nevidljivih nizova. Samo ako miš prođe kroz određena područja, pokrenut će se relativna muzika.

Korak 10: Sveobuhvatni primjer-Muzička paleta 2 (ažurirana verzija)

Učinak gornjeg primjera je već dovoljno dobar. Ali ako to pažljivo promatramo, pronaći ćemo mnogo problema. Na primjer, kada se miš kreće vrlo brzo, ostavljat će okruglu točku na ekranu svaki put kada se pomjeri. To nije koherentna ravna linija. U međuvremenu, to takođe uzrokuje curenje muzike. Dok se miš kreće vrlo sporo, prolazeći kroz položaj kada je horizontalna koordinata između 100 i 105, emitirat će muziku više puta u vrlo kratkom vremenu, što vam daje osjećaj da ste zaglavljeni. Sve ove probleme možemo riješiti primjerom u nastavku.

Video zapise možete pogledati na donjem linku:

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

Primjer koda (10-8):

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

SoundFile zvuk1, zvuk2, zvuk3, zvuk4, zvuk5;

boolean isDragging;

void setup () {

veličina (640, 360);

pozadina (255, 214, 79);

noStroke ();

sound1 = novi SoundFile (ovo, "do.wav");

sound2 = novi SoundFile (ovaj, "re.wav");

sound3 = novi SoundFile (ovaj, "mi.wav");

sound4 = novi SoundFile (ovaj, "fa.wav");

sound5 = novi SoundFile (ovaj, "so.wav");

}

void draw () {

if (isDragging) {

hod (107, 27, 157, 100);

strokeWeight (10);

linija (mouseX, mouseY, pmouseX, pmouseY);

}

}

void mouseDragged () {

isDragging = true;

if ((mišX - 100) * (pmouseX - 100) <0) {

sound1.play ();

}

if ((mišX - 200) * (pmouseX - 200) <0) {

sound2.play ();

}

if ((mišX - 300) * (pmouseX - 300) <0) {

sound3.play ();

}

if ((mišX - 400) * (pmouseX - 400) <0) {

sound4.play ();

}

if ((mišX - 500) * (pmouseX - 500) <0) {

sound5.play ();

}

}

void mouseReleased () {

isDragging = false;

} [/cceN_cpp]

Šifra Objasni:

Ovdje smo koristili dvije varijable pmouseX i pmouseY koje se nalaze u samom procesorskom sistemu. Oni su slični mouseX i mouseY, ali ono što su dobili su koordinate miša u zadnjem okviru.

U crtanju funkcija koristili smo funkcijski red () za zamjenu izvorne funkcije elipse (). Ovo čini koordinatu posljednjeg kadra direktno s koordinatom trenutnog okvira. Tako možemo nacrtati koherentne ravne linije ili krivulje.

U slučaju mouseDragged, osmislili smo novi uvjet pokretanja. Procjenom da li su koordinate zadnjeg okvira i trenutnog okvira na istoj strani da bi se znalo je li određena koordinata pređena. Uzmite ovaj uvjet kao primjer: "if ((mouseX - 100) * (pmouseX - 100) <0)". Među njima, iz pozitivne i negativne vrijednosti proizašle iz "mouseX - 100", možemo znati je li mouseX desno ili lijevo od vodoravne koordinate 100. Slično "pmouseX - 100". Stoga, kada dvije točke sprijeda i straga nisu na istoj strani, pozitiv množi negativ, dobit će novi negativni broj. Time je ispunjeni uslov ispunjen.

Gore navedeni je pojednostavljeni izraz koji je pametno upotrijebio određeni matematički algoritam-množenje dva negativa stvorit će pozitiv. Također ga možete podijeliti u dvije situacije za zasebnu raspravu. Međutim, mnogo je složenije pisati uvjete presude. Uvjeti prosudbe "if ((mouseX = 100) || (mouseX> 100 && pmouseX <= 100))" ekvivalentni su odlučujućim uvjetima izvornog koda.

Korak 11: Relativne funkcije o audio i video kontroli

Gore navedene funkcije dovoljne su za opće scenarije upotrebe. Ako želite duboko kopati, ovdje sam za vas prikupio neke uobičajene funkcije u vezi sa zvukom i videom. Možete istražiti njegovu upotrebu prema vašim potrebama.

Za više informacija možete se obratiti dokumentima sa službene web stranice.

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

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

Ovaj članak dolazi od dizajnera Wenzyja.

Korak 12: Relativna očitavanja:

Zanimljiv vodič za programiranje za dizajnera-obrada početnog dodira

Zanimljiv vodič za programiranje za dizajnera - kreirajte svoj prvi program za obradu

Zanimljiv vodič za programiranje za dizajnera-pokrenite svoju sliku (prvi dio)

Zanimljiv vodič za programiranje za dizajnera-pokrenite svoju sliku (drugi dio)

Zanimljiv vodič za programiranje za dizajnera- programska kontrola procesa- izjava petlje

Zanimljive programske upute za dizajnera-Kontrola programskog procesa-Izjava o stanju (prvi dio)

Zanimljivo programsko uputstvo za dizajnera-Kontrola programskog procesa-Izjava o stanju (drugi dio)

Zanimljive upute za programiranje za dizajnera-prilagođene funkcije i fraktalna rekurzija

Zanimljive upute za programiranje za dizajnera-prilagođene funkcije i fraktalna rekurzija

Zanimljive upute za programiranje obrade za dizajnera-kontrola boje

Korak 13: Izvor

Ovaj članak je sa:

Ako imate bilo kakvih pitanja, možete se obratiti na adresu [email protected].

Preporučuje se: