Jelajahi visualisasi data dengan p5.js

P5.JS adalah implementasi javascript terbaru dari pemrosesan lingkungan kode kreatif desktop yang terkenal. Dibutuhkan banyak kekuatan dan kemudahan penggunaan pemrosesan dan menempatkannya ke browser Anda. Ini membantu Anda menggambar kanvas tetapi juga terintegrasi dengan halaman web Anda, memungkinkan 'sketsa' Anda untuk merespons dan memanipulasi DOM.

p5.js. menghilangkan banyak sakit kepala animasi dan visualisasi data. Di web dan membuatnya sangat sederhana untuk bangun dan berjalan dengan animasi menggunakan dua fungsi sederhana: mempersiapkan() dan seri() .

Tetapi jangan berasumsi kesederhanaan ini membatasi, karena Anda dapat mengambil pemrosesan jauh dengan membuat fungsi Anda sendiri dan memperluasnya dengan banyak perpustakaan yang dibuat komunitas.

Untuk lebih banyak alat desain web dan saran, lihat daftar brilian kami hosting web. penyedia dan pastikan untuk memilih yang sempurna Pembangun Situs Web dan penyimpanan awan .

• 6 cara untuk masuk ke pengkodean kreatif

Mengapa menggunakan data untuk mendorong animasi?

Membuat desain dan sistem animasi 'berarti mendefinisikan seperangkat aturan, parameter dan rentang variabel di mana Anda dapat memberi makan data yang berbeda. Kemampuan untuk bermain dengan parameter suatu sistem dan memasukkan data yang berbeda berarti Anda dapat membuat variasi output tanpa batas dengan konsistensi pendekatan sistematis.

Data yang berbeda dapat membuat output visual yang benar-benar beragam dan sumber yang hebat dari data yang bergerak cepat, kaya bertekstur adalah audio. Itulah yang akan kita gunakan dalam animasi kita.

Visualisasi data yang digerakkan oleh data

Apakah animasi yang digerakkan oleh data visualisasi data? Iya dan tidak. Animasi Anda akan menjadi representasi visual dari data seperti visualisasi tetapi tujuannya berbeda dengan visualisasi tradisional. Visualisasi data digunakan untuk memberikan wawasan pemirsa ke dalam data, sehingga grafiknya adalah pada layanan komunikasi data.

Namun, kami akan menggunakan data sebagai benih kreatif untuk memungkinkan kami menghasilkan variasi grafis yang menarik dan tekstur, oleh karena itu datanya pada layanan grafik. Tentu saja, satu disiplin terkait saling terkait dan menyerbuki silang dengan yang lain tetapi baik untuk mengenali niat Anda sendiri saat menggunakan data.

Apa yang akan kita buat?

p5.js memberi kami akses cepat dan mudah ke data yang berasal dari menganalisis file suara (seperti mp3). Kami akan menggunakannya p5.fft. Untuk menganalisis frekuensi yang berbeda (bass dan treble) dalam audio saat dimainkan kembali dan memvisualisasikan 'energi' atau amplitudo frekuensi itu.

Agar kami dapat melihat 'bentuk' suara saat bermain, kami tidak hanya ingin menunjukkan amplitudo suara saat ini tetapi menangkap 'buffer' titik data. Ini akan memungkinkan kami untuk menunjukkan riwayat nilai yang bergerak.

Untuk menunjukkan poin data kami, kami akan membuat serangkaian busur konsentris dari tengah ke tepi luar layar. Panjang busur akan mewakili amplitudo data. Kami juga akan menggunakan encoding visual lainnya untuk data kami, seperti bobot garis dan warna.

Apa yang akan kita pelajari?

Bekerja melalui kode, kami akan membahas:

• Menyiapkan Sketsa P5 Baru
• Memuat dan menganalisis suara
• Memetakan nilai data ke elemen visual seperti ukuran, bentuk dan warna
• Menggunakan kelas untuk menggambar, menjaga keadaan animasi dan data kami dan membuat kode kami dapat digunakan kembali.

Di mana file?

File-file untuk animasi dihosting Openprocessing. , platform yang hebat untuk berbagi, menemukan dan memalsukan sketsa orang lain. Ini adalah tempat yang bagus untuk Anda kode juga.

Karena kami akan menggunakan data audio, Anda akan memerlukan file MP3 untuk menyeret ke dalam sketsa. Kami akan membuat sketsa baru pada openprocessing; Ini adalah bagaimana sketsa Anda akan terlihat begitu kami memuat audio, mendapatkan data dan menggambar 'bentuk data' sederhana:

Dan inilah cara sketsa yang lengkap akan terlihat:

Atau, Anda juga bisa menggunakan P5.js editor online. atau sertakan saja perpustakaan di proyek Anda sendiri Melalui Unduh atau CDN .

01. Mulai sketsa baru

Dapatkan akun OpenProcessing gratis dan, dari halaman profil Anda, klik Buat sketsa. Ini kemudian akan menciptakan sketsa paling dasar yang berisi dua fungsi bawaan p5.js:

1. mempersiapkan() - Ini hanya berjalan sekali, dan digunakan untuk mengatur kanvas baru
2. seri() - di sinilah Anda menaruh kode yang ingin Anda jalankan setiap frame

Anda akan melihat bahwa Latar Belakang() hanya dipanggil sekali di set up. Ini membersihkan layar, jadi jika Anda ingin menghapus layar setiap frame, sertakan ini di awal seri() berfungsi juga.

Bermain dengan beberapa kode di sini, menggunakan beberapa contoh yang dapat Anda temukan Di situs p5.js .

02. Buat sketsa pertama menggunakan data audio

Pergi ke saya contoh sketsa starter. .

Tekan tombol putar dan Anda akan melihat beberapa teks yang meminta Anda untuk menjatuhkan file MP3 ke atas kanvas. Tunggu beberapa detik untuk menyelesaikan pengunggahan dan kemudian klik kanvas untuk memulai pemutaran. Anda harus melihat elips, mengikuti mouse Anda, yang menskala dan mengubah warna bersama dengan amplitudo bass dalam musik yang Anda unggah.

Banyak kode dikomentari tetapi mari kita lihat beberapa elemen kunci:

Tepat di awal sketsa, di depan mempersiapkan() , Kami telah membuat beberapa variabel global.

Dalam mempersiapkan() Kami memiliki beberapa baris penting:

colorMode(HSB,360,100,100);

Colormode () Memungkinkan Anda untuk mengatur P5.JS untuk bekerja dalam ruang warna yang berbeda seperti RGB dan HSB, serta mengkonfigurasi skala yang Anda gunakan untuk menavigasi saluran. Di sini kami telah mengatur Rentang HSB ke nilai-nilai Anda mungkin lebih terbiasa dengan Photoshop daripada pengaturan default (0 hingga 255).

canvas.drop(gotFile);

Fungsi P5.JS yang sangat membantu ini memungkinkan kami untuk mendengarkan acara drop file di kanvas kami. Ketika kami mendapatkan acara Drop File, kami menelepon gotfile () Untuk memeriksa apakah itu tipe yang benar dan mulailah menganalisis suara.

soundFile = new p5.SoundFile(file.data);

Di sini kita memutar data file kita yang jatuh menjadi SoundFile. . Ketika kami memiliki file suara, kami menggunakan kode berikut:

1. initsound () Untuk mengatur instance FFT baru (untuk menganalisis suara)
2. analysesound () Untuk menganalisis blok suara saat ini setiap frame
3. getnewsoundDatavalue () menggunakan fft.getEnergy () Setiap frame untuk memberi kita amplitudo suara saat ini. Ini dikonversi dari kisaran default 0 hingga 255 hingga 0 hingga 1.

Tip: Sangat membantu untuk mengkonversi data Anda ke kisaran 0 hingga 1 karena Anda dapat menggunakannya dengan lebih mudah saat memetakan data ke parameter visual seperti skala, kecepatan dan warna.

Mari kita lihat fungsi Draw (). Garis ini meminta amplitudo saat ini (antara 0 dan 1) frekuensi bass dan menetapkannya variabel MyDataval. .

var myDataVal = getNewSoundDataValue(“bass”)

Kami menyebut kebiasaan kami getdatahsbcolor () Fungsi yang memetakan nilai data kami secara terpisah ke rona, saturasi dan kecerahan dan mengembalikan kami warna. Semakin tinggi data, semakin jauh warna bergerak melintasi spektrum Hue dan warnanya lebih cerah dan lebih jenuh.

var myDataColor = getDataHSBColor(myDataVal);

Sebelum kita dapat menggambar elips kita, kita perlu memberikan ukuran, dengan mengalikan 200 (px) dengan nilai data kita. Jadi semakin tinggi nilainya, semakin besar elips.

var myEllipseSize = 200 * myDataVal;

03. Gunakan data audio sebagai kuas

Untuk bersenang-senang, komentar Latar Belakang() Hubungi di seri() Fungsi dan Anda dapat menggunakan Ellipse Reaktif Suara Anda untuk melukis!

05. Lengkapi sketsa Anda

Menggambar satu data elips untuk satu frekuensi sangat bagus tetapi sekarang kita akan membuat serangkaian data busur untuk bass dan treble. Kami juga akan menggambar buffer nilai sebelumnya untuk membantu kami dengan lebih baik melihat bentuk suara.

Mengunjungi versi jadi ini dari sketsa , jalankan dan kemudian jatuhkan mp3 di atasnya.

Anda sekarang akan melihat serangkaian ARC yang muncul dari tengah layar. ARC horizontal adalah visualisasi bass dan yang vertikal memilih treble of the mp3.

Melihat kode, Anda akan melihat banyak pengaturan, memuat, menganalisis, dan mendapatkan data sama dengan sketsa terakhir, sehingga kita dapat mengabaikannya. Ada sedikit kode di sini jadi, seperti sebelumnya, mari kita pilih beberapa poin utama.

Alih-alih menggambar busur langsung di seri() , Kami sebenarnya membuat beberapa kelas khusus:

1. kelas radialarc {} memegang nilai data ARC individu dan menggambar busur
2. kelas radialarcs {} mengelola kumpulan instance 'radialarc' kami

Setiap definisi kelas memiliki konstruktor di mana kami menetapkan beberapa nilai kunci dan juga lewat parameter yang memungkinkan kami mengubah perilaku kelas. Mari kita lihat lebih dekat pada mereka sekarang.

Kelas radialarc {}:

Ini adalah kelas yang memiliki nilai data tunggal dan menarik sepasang busur simetris.

setValue () dan GetValue () Memungkinkan kami untuk mendapatkan data masuk dan keluar dari busur dan mendorong data melalui array busur kami sebagai pembaruan data. redrawfromdata () dipanggil untuk menghitung ulang dan menggambar ulang busur.

drawarc () adalah tempat kami menyebut fungsi P5.JS yang praktis busur() . Busur() lebih cepat daripada melakukan trigonometri sendiri tetapi kita perlu meneruskannya beberapa nilai seperti posisi, ukuran dan, yang terpenting, sudut awal dan akhir untuk busur kita.

Sudut itu diukur dalam 'Radian' daripada derajat. Radian seperti gelar tetapi pada skala yang berbeda: 360 ° sama dengan radian 2 x pi. P5.js memiliki konstanta bawaan yang berguna untuk Pi , Half_pi. dan Quarter_pi. dll.

Kelas radialarcs {}:

Ini adalah kelas manajemen yang menciptakan array kami Radialac {} kelas dan memperbarui mereka dengan memindahkan data masuk dan keluar dari masing-masing dan memanggil busur redrawfromdata () fungsi.

Untuk menginisialisasi Radialarcs () kelas untuk treble dan bass, lihat mempersiapkan() . Anda dapat melihat bahwa kami membuat dua Radialarcs () contoh dan juga lewat dalam parameter khusus kami.

Parameter tersebut adalah: Jumlah busur, ukuran busur bagian dalam dan terluar, sudut awal, berat garis maksimal dan rentang warna Hue. Dengan membuat kelas khusus ini, ia memungkinkan kita untuk menggunakan kembali kode kita tetapi juga membuat setiap instance individu dengan meneruskannya parameter ini.

Setelah benda busur diinisialisasi, setiap frame akan menelepon Updateradialarcs () dan DrawRadialarcs () dalam p5 utama seri() Fungsi, yaitu bagaimana pembaruan dan gerakan animasi.

06. Butuh lebih jauh

Kami telah membahas banyak kode di sini tetapi secara fundamental saya harap Anda dapat melihat bagaimana kami mengambil data dan menerapkannya pada elemen visual seperti ukuran, posisi, panjang, berat, dan warna.

Untuk melangkah lebih jauh, bermain-main dengan jumlah busur, kelompok, dan sudut. Ubah rentang warna dan buat kelas baru untuk menggambar berbagai bentuk.

Dalam contoh ini kami menggunakan data yang terus mengalir dan, ditambah dengan kecepatan bingkai cepat, ia menciptakan ilusi animasi. Namun, tidak semua data seperti itu dan dapat memperbarui lebih lambat. Untuk data yang lebih lambat, Anda masih dapat membuat animasi yang lancar dengan 'tweening' animasi bentuk Anda antara arus mereka dan dimensi target mereka.

Semoga beruntung dengan animasi yang digerakkan oleh data Anda berikutnya!

Artikel ini awalnya diterbitkan dalam masalah 320 dari bersih , majalah terlaris di dunia untuk desainer dan pengembang web. Beli Masalah 320. di sini atau berlangganan di sini .

Artikel terkait:

• Cara menambahkan animasi ke SVG dengan CSS
• Tren Data diatur untuk Merevolusi Desain Aplikasi
• 12 Sumber Daya Animasi CSS Great