Panduan Pemrograman Pemrosesan yang Menarik untuk Desainer--Pemuatan Media dan Acara: 13 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:58

Pemrosesan dapat memuat banyak data eksternal, di antaranya ada tiga jenis yang sangat umum digunakan. Mereka adalah gambar, audio dan video secara terpisah.

Dalam bab ini, kita akan berbicara tentang cara memuat audio dan video secara mendetail, menggabungkannya dengan acara. Pada akhirnya, Anda dapat membuat keyboard musik atau palet musik Anda sendiri.

Langkah 1: Baca Gambar

Sebelum kita mulai, mari kita lihat kembali metode pemuatan gambar.

Langkah 2: Fungsi Terkait Gambar

Sebelum kita menggunakan fungsi-fungsi ini, kita perlu membuat objek gambar melalui PImage. Kemudian kita dapat menggunakan fungsi-fungsi ini untuk mendefinisikan semua jenis properti gambar.

Jangan lupa untuk menyimpan sumber gambar Anda ke dalam file data sebelum menjalankan program Anda.

Langkah 3: Pemuatan Musik, Putar & Hentikan

Berikut ini, kami mulai secara resmi memperkenalkan seruan musik kepada Anda. Sangat mirip dengan pemuatan gambar, Anda harus mendeklarasikan objek audio di awal. Anda dapat merujuk ke contoh di bawah ini dari tata bahasa yang sebenarnya.

Contoh Kode (10-1):

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

Suara File Suara;

batalkan pengaturan() {

ukuran (640, 360);

latar belakang (255);

suara = new SoundFile(ini, "1.mp3");

}

batal menggambar() {

}

batalkan tombolDitekan() {

//Memainkan suara

if (kunci == 'p') {

suara.play();

}

//Hentikan suara

if (kunci == 's') {

suara.stop();

}

} [/cceN_cpp]

Persiapan:

Pemrosesan itu sendiri tidak membawa perpustakaan suara apa pun. Anda perlu mengunduhnya sendiri. Jadi, sebelum menulis kode Anda, ada baiknya Anda melakukan persiapan berikut.

Tambahkan perpustakaan ke Pemrosesan. Berikut adalah praktik umum. Pilih dari bilah menu untuk "Alat"-- "Tambah Alat", lalu pindah ke "Perpustakaan". Masukkan kata kunci perpustakaan ke dalam kolom pencarian sehingga Anda dapat mengunduh dan menginstalnya secara langsung.

Namun, jika kami menggunakan fungsi ini di negara kami (di China), kami tidak dapat mengunduhnya dengan menghubungkan web secara langsung. Kita harus memulai VPN. Meskipun kita memulainya, akan ada kondisi yang tidak stabil. Jadi Anda harus bersabar untuk mencobanya beberapa kali. Ini adalah metode pemuatan yang paling nyaman. Jika Anda tidak dapat menginstal, Anda harus mengunduh dari situs web resmi secara manual. (https://processing.org/reference/libraries/) Karena cara instalasi manual sangat rumit, selanjutnya akan kita bahas di bab lain.

Kode Jelaskan:

Perpustakaan suara dapat bekerja dengan baik setelah persiapan selesai. Mengatasi kode di atas, klik RUN, maka akan beroperasi. Tekan tombol "P" untuk memutar musik, "S" untuk menghentikan musik.

Jika sudah terbiasa dengan program, kita perlu memuatnya terlebih dahulu. Di awal, kita harus menambahkan kalimat "import processing.sound.*". "impor" adalah kata kuncinya, yang berarti memuat secara harfiah. Tambahkan nama perpustakaan di belakang "impor", maka perpustakaan akan dimuat. Ekor biasanya mengikuti tanda "*", sehingga akan memuat semua kelas terkait perpustakaan ke dalam program tanpa harus menambahkannya satu per satu secara manual.

Pada kalimat kedua, " SoundFile sound; " telah mendeklarasikan objek audio. SoundFile mirip dengan PImage.

Dalam pengaturan fungsi, " sound = new SoundFile(this, "1.mp3"); " digunakan untuk membuat objek dan menentukan jalur bacanya. Disini sebenarnya kita sudah mulai menggunakan konsep baru Class. Saat ini kami tidak membahasnya secara mendalam. Kita hanya perlu mengetahui bahwa itu adalah metode penulisan yang tetap dan parameter terakhir adalah untuk mengisi alamat sumber musik.

Di antara event keyPressed(), " sound.play() " dan " sound.stop() " relatif berfungsi sebagai efek play dan stop. "." di tengah menunjukkan fungsi anggota yang memutar dan menghentikan milik objek audio. Kita dapat menganggap fungsi anggota sebagai fungsi yang termasuk dalam objek. Itu milik objek ini, yang didefinisikan sebelumnya. Kemudian, ketika kita perlu memutar beberapa objek audio, kita hanya perlu menambahkan ".play()" di belakang nama variabel relatif.

Sumber audio harus disimpan ke dalam file data di bawah katalog file sketsa yang sama (dengan akhiran pde). Jika tidak ada, Anda dapat membuatnya secara manual.

Jangan lupa untuk menulis function draw. Meskipun Anda tidak menggambar grafik apa pun, Anda perlu memainkan musik dengan sukses.

Prosedur di atas tampaknya cukup rumit, tetapi Anda perlu menambahkan beberapa kalimat kode saja, maka Anda dapat mewujudkan fungsi play. Hal ini sangat nyaman.

Pemrosesan mendukung format audio umum seperti mp3, wav, ogg, dll.

Langkah 4: Kontrol Kecepatan Musik

Contoh berikut akan mulai menjadi lebih menarik. Processing telah menyediakan beberapa fungsi yang dapat mengontrol kecepatan pemutaran musik. Pada saat yang sama, nada akan berubah seiring dengan kecepatan pemutaran musik. Ketika kita menggunakan mouse untuk mengontrol, itu akan menghasilkan efek yang sangat psychedelic.

Situs web video:

Contoh Kode (10-2):

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

Suara File Suara;

batalkan pengaturan() {

ukuran (640, 360);

latar belakang (255);

suara = new SoundFile(ini, "1.mp3");

}

batal menggambar() {

kecepatan float = lebar mouseX/(float) * 3;

sound.rate(kecepatan);

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

suara.amp(vol);

}

batalkan tombolDitekan() {

//Memainkan suara

if (kunci == 'p') {

suara.play();

}

//Hentikan suara

if (kunci == 's') {

suara.stop();

}

} [/cceN_cpp]

Kode Jelaskan:

Fungsi.rate() mengontrol kecepatan pemutaran audio. Nilai dalam kurung menentukan cepat dan lambatnya kecepatan bermain. Ketika nilainya 1, kecepatan bermainnya normal. Ketika melebihi 1, maka akselerasi; saat di bawah 1, lalu melambat.

Fungsi.amp() mengontrol volume audio. Nilai dalam kurung menentukan nilai volume. Ketika 1, nilai volume normal. Ketika melebihi 1, maka tingkatkan volume; saat di bawah 1, lalu kurangi volumenya.

Di sini kami telah membangun dua variabel lokal kecepatan dan vol sebagai parameter yang akan dimuat. Oleh karena itu koordinat horizontal mouse akan mengubah nada musik, dan koordinat vertikal akan mengubah volume musik.

Langkah 5: Putar dan Berhenti Video

Dalam Pemrosesan, pemuatan video mirip dengan pemuatan audio. Anda harus mengunduh perpustakaan video terlebih dahulu. (https://processing.org/reference/libraries/video/index.html)

Contoh Kode (10-3):

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

Film bergerak;

batalkan pengaturan() {

ukuran (640, 360);

latar belakang(0);

mov = Film baru(ini, "1.mov");

}

void movieEvent(Film film) {

mov.baca();

}

batal menggambar() {

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

}

batalkan tombolDitekan() {

if (kunci == 'p') {

mov.play();

}

if (kunci == 's') {

mov.stop();

}

if (kunci == 'd') {

mov.jeda();

}

} [/cceN_cpp]

Tangkapan Layar Video:

Kode Jelaskan:

Kalimat pertama " import processing.video.*; " digunakan untuk memuat pustaka video.

Kalimat kedua " Movie mov; " digunakan untuk mendeklarasikan objek video. Di antaranya, fungsi " Movie " mirip dengan PImage.

Dalam pengaturan fungsi, efek dari " mov = new Movie(this, "1.mov"); " adalah membuat objek dan menentukan jalur bacanya. Parameter terakhir diisi dengan alamat sumber video.

Di belakang penyiapan, movieEvent mewakili peristiwa video. Ini digunakan untuk memperbarui dan membaca informasi video. "mov.read()" dalam acara berarti membaca.

Selain untuk menampilkan gambar, fungsi gambar juga dapat menampilkan video. Kita dapat menganggap objek video sebagai gambar yang dinamis. Parameter pertama, kita isi dengan nama variabel dari objek video. Parameter kedua dan ketiga adalah koordinat horizontal dan vertikal yang digambar oleh video. Parameter keempat dan kelima menentukan panjang dan lebar tampilan video.

Fungsi.play() berarti bermain. Fungsi.stop() berarti berhenti, dan itu akan mengatur ulang video. Fungsi.pause() berarti jeda. Ini akan mengganggu pemutaran saat ini, yang akan berlanjut hingga fungsi.play() dipanggil.

Langkah 6: Kontrol Kecepatan Video

Contoh Kode (10-4):

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

Film bergerak;

batalkan pengaturan() {

ukuran (640, 360);

latar belakang(0);

mov = Film baru(ini, "transit.mov");

}

void movieEvent(Film film) {

mov.baca();

}

batal menggambar() {

gambar(mov, 0, 0, lebar, tinggi);

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

mov.speed(Kecepatan baru);

}

batalkan tombolDitekan() {

if (kunci == 'p') {

mov.play();

}

if (kunci == 's') {

mov.stop();

}

if (kunci == 'd') {

mov.jeda();

}

}

[/cceN_cpp]

Kode Jelaskan:

Fungsi.speed() dapat digunakan untuk mengontrol kecepatan pemutaran video. Ketika nilai parameter adalah 1, kecepatan bermain normal. Bila nilainya melebihi 1, maka akselerasi; saat di bawah 1, lalu melambat.

Karena kita telah membangun variabel lokal newSpeed dan mengimpornya ke dalam fungsi setSpeed(), koordinat mouse akan mempengaruhi kecepatan pemutaran video secara langsung.

Adapun contoh lebih lanjut tentang video, Anda dapat merujuk ke Perpustakaan - Video di perpustakaan kasus.

Langkah 7: Memproses Acara Umum

Sebelumnya, kami hanya memperkenalkan event keyPressed(). Ini akan dipicu setelah keyboard ditekan. Berikut ini, kami akan memperkenalkan acara umum lainnya di Processing untuk Anda.

Penggunaan event di atas mirip dengan keyPressed. Mereka tidak memiliki urutan dalam penulisan kode. Dengan kata lain, tidak peduli acara mana yang Anda tempatkan sebelum atau di belakang pengaturan fungsi, Anda mendapatkan hasil yang sama. Perintah eksekusi hanya terkait dengan kondisi pemicu dari peristiwa itu sendiri. Hanya jika kondisi terpenuhi, maka akan dieksekusi. Peristiwa di atas semuanya sangat mudah dipahami. Anda hanya perlu melakukan percobaan kecil, maka Anda dapat dengan cepat memahami penggunaannya.

Alur Acara

Kita dapat menggunakan contoh untuk mengetahui urutan eksekusi acara.

Contoh Kode (10-5):

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

frameRate(2);

println(1);

}

batal menggambar() {

println(2);

}

kosong mouseDitekan() {

println(3);

}

batal mouseDipindahkan() {

println(4);

}

void mouseReleased() {

println(5);

}

batalkan tombolDitekan() {

println(6);

}

void kunciDirilis() {

println(7);

} [/cceN_cpp]

Kode Jelaskan:

Dalam pengaturan fungsi, fungsi frameRate() telah mengatur tingkat kecepatan operasi program menjadi 2 frame per detik. Menurunkan frame rate dapat membantu kami mengamati output di konsol jika peristiwa yang dipicu akan segera disikat oleh data baru ke belakang.

Coba gerakkan mouse Anda, klik mouse, lepaskan mouse dan amati hasil outputnya. Kenali urutan eksekusi acara melalui println.

Yang perlu diperhatikan adalah fungsi menggambar tidak dapat dituliskan ke dalam peristiwa lain kecuali fungsi menggambar, atau tidak dapat ditampilkan. Jika kita ingin mengontrol persembunyian dan tampilan komponen grafis melalui event seperti keyPressed, kita dapat mempertimbangkan untuk membangun variabel bool sebagai media.

Acara akan dijalankan secara berurutan. Hanya setelah semua kode di acara saat ini diimplementasikan, itu akan mengeksekusi kode di acara berikutnya.

Langkah 8: Contoh Komprehensif--Keyboard Musik

Menggabungkan dengan peristiwa yang baru dipahami, kita dapat menambahkan interaksi baru ke program kita. Selanjutnya, hanya dengan beberapa menit, kita dapat menganalogikan keyboard musik dengan mudah.

Situs web video:

Contoh Kode (10-6):

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

SoundFile suara1, suara2, suara3, suara4, suara5;

kunci boolean1, kunci2, kunci3, kunci4, kunci5;

batalkan pengaturan() {

ukuran (640, 360);

latar belakang (255);

tidak ada Stroke();

sound1 = new SoundFile(ini, "do.wav");

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

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

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

sound5 = new SoundFile(ini, "so.wav");

}

batal menggambar() {

latar belakang (255, 214, 79);

rectMode(PUSAT);

float w = lebar * 0,1;

float h = tinggi * 0,8;

jika (kunci1) {

isi(255);

} lain {

isi(238, 145, 117);

}

rect(lebar/6, tinggi/2, w, h);

jika (kunci2) {

isi(255);

} lain {

isi(246, 96, 100);

}

rect(lebar/6 * 2, tinggi/2, w, h);

jika (kunci3) {

isi(255);

} lain {

isi(214, 86, 113);

}

rect(lebar/6 * 3, tinggi/2, w, h);

jika (kunci4) {

isi(255);

} lain {

isi(124, 60, 131);

}

rect(lebar/6 * 4, tinggi/2, w, h);

jika (kunci5) {

isi(255);

} lain {

isi(107, 27, 157);

}

rect(lebar/6 * 5, tinggi/2, w, h);

}

batalkan tombolDitekan() {

if (kunci == 'a') {

suara1.play();

kunci1 = benar;

}

if (kunci == 's') {

suara2.play();

kunci2 = benar;

}

if (kunci == 'd') {

suara3.play();

kunci3 = benar;

}

if (kunci == 'f') {

suara4.play();

kunci4 = benar;

}

if (kunci == 'g') {

suara5.play();

kunci5 = benar;

}

}

void kunciDirilis() {

if (kunci == 'a') {

kunci1 = salah;

}

if (kunci == 's') {

kunci2 = salah;

}

if (kunci == 'd') {

kunci3 = salah;

}

if (kunci == 'f') {

kunci4 = salah;

}

if (kunci == 'g') {

kunci5 = salah;

}

} [/cceN_cpp]

Kode Jelaskan:

Kita perlu membuat beberapa objek audio untuk membaca informasi suara relatif sehingga dapat memainkan suara yang berbeda ketika tombol yang berbeda dipicu.

Di sini kita menggunakan event baru keyReleased(). Fungsi dari event ini adalah mengembalikan warna keyboard ke warna aslinya. Saat melepaskan kunci, itu akan dipicu.

5 nilai boolean yang dideklarasikan di kepala digunakan untuk mendeteksi status kunci.

Langkah 9: Contoh Komprehensif - Palet Musik 1

Selain acara keyboard, acara mouse adalah hal yang baik bahwa kita harus menggunakannya secara fleksibel. Contoh berikut adalah bagi kita untuk membuat palet musik, di antaranya kita telah menggunakan dua acara terkait mouse.

Situs web video:

Contoh Kode (10-7):

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

SoundFile suara1, suara2, suara3, suara4, suara5;

boolean adalahMenyeret;

batalkan pengaturan() {

ukuran (640, 360);

latar belakang (255, 214, 79);

tidak ada Stroke();

sound1 = new SoundFile(ini, "do.wav");

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

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

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

sound5 = new SoundFile(ini, "so.wav");

}

batal menggambar() {

if (menyeret) {

isi(107, 27, 157, 100);

elips(mouseX, mouseY, 16, 16);

}

}

void mouseDragged() {

isMenyeret = benar;

if (mouseX > 100 && mouseX < 105) {

suara1.play();

}

if (mouseX > 200 && mouseX < 205) {

suara2.play();

}

if (mouseX > 300 && mouseX < 305) {

suara3.play();

}

if (mouseX > 400 && mouseX < 405) {

suara4.play();

}

if (mouseX > 500 && mouseX < 505) {

suara5.play();

}

}

void mouseReleased() {

isMenyeret = salah;

} [/cceN_cpp]

Kode Jelaskan:

Kami berharap hanya ketika kami menekan mouse dan menyeretnya, kami dapat menggambar. Jadi kita perlu membangun variabel boolean isDragging untuk mendapatkan status saat ini.

Saat menyeret mouse, isDragging menjadi nilai sebenarnya sehingga fungsi menggambar di dalam Draw akan dijalankan. Ini akan meninggalkan jejak di layar. Saat kita melepaskan mouse, isDragging menjadi nilai palsu. Jadi fungsi menggambar dalam fungsi menggambar akan menghentikan eksekusi.

Kami telah merancang beberapa kondisi pemicu dalam acara menyeret mouse. Misalnya, ketika koordinat horizontal mouse berada di antara 100 dan 105 piksel, musik akan diputar secara otomatis. Ini membuat layar membuat beberapa string yang tidak terlihat. Hanya jika mouse melewati area tertentu, itu akan memicu musik relatif.

Langkah 10: Contoh Komprehensif--Palette Musik 2 (Versi Diperbarui)

Efek dari contoh di atas sudah cukup baik. Tetapi jika kita perhatikan dengan seksama, kita akan menemukan banyak masalah. Misalnya, ketika mouse bergerak sangat cepat, ia akan meninggalkan titik bulat di layar setiap kali bergerak. Ini bukan garis lurus yang koheren. Sementara itu, itu juga menyebabkan beberapa kebocoran musik. Sementara ketika mouse bergerak sangat lambat, melewati posisi ketika koordinat horizontal berada di antara 100 dan 105, itu akan menyiarkan musik beberapa kali dalam waktu yang sangat singkat, yang memberi Anda perasaan macet. Semua masalah tersebut dapat kita selesaikan melalui contoh di bawah ini.

Anda dapat menonton video di tautan di bawah ini:

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

Contoh Kode (10-8):

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

SoundFile suara1, suara2, suara3, suara4, suara5;

boolean adalahMenyeret;

batalkan pengaturan() {

ukuran (640, 360);

latar belakang (255, 214, 79);

tidak ada Stroke();

sound1 = new SoundFile(ini, "do.wav");

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

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

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

sound5 = new SoundFile(ini, "so.wav");

}

batal menggambar() {

if (menyeret) {

pukulan (107, 27, 157, 100);

strokeBerat(10);

baris(mouseX, mouseY, pmouseX, pmouseY);

}

}

void mouseDragged() {

isMenyeret = benar;

if ((mouseX - 100) * (pmouseX - 100) < 0) {

suara1.play();

}

if ((mouseX - 200) * (pmouseX - 200) < 0) {

suara2.play();

}

if ((mouseX - 300) * (pmouseX - 300) < 0) {

suara3.play();

}

if ((mouseX - 400) * (pmouseX - 400) < 0) {

suara4.play();

}

if ((mouseX - 500) * (pmouseX - 500) < 0) {

suara5.play();

}

}

void mouseReleased() {

isMenyeret = salah;

} [/cceN_cpp]

Kode Jelaskan:

Di sini kita telah menggunakan dua variabel pmouseX dan pmouseY yang dibawa dalam sistem Pemrosesan itu sendiri. Mereka mirip dengan mouseX dan mouseY tetapi yang mereka dapatkan adalah koordinat mouse di frame terakhir.

Di Function draw, kami telah menggunakan function line() untuk menggantikan fungsi asli elips(). Hal ini membuat koordinat frame terakhir terhubung dengan koordinat frame saat ini secara langsung. Jadi kita bisa menggambar garis lurus atau kurva yang koheren.

Dalam acara mouseDragged, kami telah merancang kondisi pemicu baru. Melalui penilaian apakah koordinat frame terakhir dan frame saat ini berada di sisi yang sama untuk mengetahui apakah koordinat tertentu dilintasi. Ambil kondisi ini sebagai contoh: " if ((mouseX - 100) * (pmouseX - 100) < 0) ". Diantaranya, dari nilai positif dan negatif yang dihasilkan dari " mouseX - 100 ", kita dapat mengetahui apakah mouseX berada di sebelah kanan atau kiri dari koordinat horizontal 100. Begitu pula dengan "pmouseX - 100". Oleh karena itu, ketika dua titik di depan dan belakang tidak pada sisi yang sama, positif dikalikan dengan negatif, maka akan mendapatkan angka negatif baru. Dengan demikian kondisi eksekusi terpenuhi.

Di atas adalah ekspresi yang disederhanakan, yang dengan cerdik menggunakan algoritma matematika tertentu--Dua perkalian negatif akan menghasilkan positif. Anda juga dapat membaginya menjadi dua situasi untuk didiskusikan secara terpisah. Namun, jauh lebih rumit untuk menulis kondisi penilaian. Kondisi penilaian "jika ((mouseX = 100) || (mouseX > 100 && pmouseX <= 100))" setara dengan kondisi penentuan kode sumber.

Langkah 11: Fungsi Relatif Tentang Kontrol Audio&Video

Fungsi yang disebutkan di atas cukup untuk skenario penggunaan umum. Jika Anda ingin menggalinya lebih dalam, di sini saya telah mengumpulkan beberapa fungsi umum terkait audio dan video untuk Anda. Anda dapat menjelajahi penggunaannya sesuai dengan kebutuhan Anda sendiri.

Untuk pengenalan lebih lanjut, Anda dapat merujuk ke dokumen dari situs web resmi.

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

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

Artikel ini berasal dari desainer Wenzy.

Langkah 12: Pembacaan Relatif:

Panduan Pemrograman yang Menarik untuk Desainer--Memproses Sentuhan Awal

Panduan Pemrograman Menarik untuk Desainer–Buat Program Pemrosesan Pertama Anda

Panduan Pemrograman yang Menarik untuk Desainer--Dapatkan Gambar Anda Berjalan (Bagian Satu)

Panduan Pemrograman yang Menarik untuk Desainer--Dapatkan Gambar Anda Berjalan (Bagian Kedua)

Panduan Pemrograman yang Menarik untuk Perancang–Pernyataan Kontrol Proses Program-Loop

Panduan Pemrograman yang Menarik untuk Desainer--Kontrol Proses Program--Pernyataan Kondisi (Bagian Satu)

Panduan Pemrograman yang Menarik untuk Desainer--Kontrol Proses Program--Pernyataan Kondisi (Bagian Kedua)

Panduan Pemrograman yang Menarik untuk Desainer--Fungsi Kustom dan Rekursi Fraktal

Panduan Pemrograman yang Menarik untuk Desainer--Fungsi Kustom dan Rekursi Fraktal

Panduan Pemrograman Pemrosesan yang Menarik untuk Desainer--Kontrol Warna

Langkah 13: Sumber

Artikel ini dari:

Jika Anda memiliki pertanyaan, Anda dapat menghubungi： [email protected].