P5.JS ile veri görselleştirmeyi keşfedin

P5.JS, ünlü masaüstü yaratıcı kodlama ortamının işlenmesinin en son JavaScript uygulamasıdır. İşlemin gücünü ve kullanım kolaylığını alır ve tarayıcınıza koyar. Tuvalde çizmenize yardımcı olur, aynı zamanda Web sayfanızla da entegre ederek, 'kroki' dom'a cevap vermesine ve manipüle etmesine izin veriyor.

p5.js animasyonun baş ağrısından çok uzaklaşıyor ve Veri Görselleştirme Web'de ve iki basit işlevi kullanarak animasyonla başlamak ve çalıştırmak için süper basit hale getirir: kurulum() ve çizmek() .

Ancak, bu sadeliğin sınırlı olduğunu varsaymayın, çünkü kendi fonksiyonlarınızı oluşturarak ve toplum yaratan kütüphanelerin çoğuyla uzatarak uzun bir yoldan işlenebileceğiniz gibi.

Daha fazla web tasarım araçları ve tavsiye için, brilliant listemize bakın. ağ sağlayıcısı sağlayıcılar ve mükemmel seçtiğinizden emin olun Web Sitesi Oluşturucu ve Bulut depolama .

• Yaratıcı kodlamaya girmenin 6 yolu

Neden animasyonu sürmek için veri kullanıyorsunuz?

Tasarım ve animasyon 'sistemleri' oluşturma, farklı verileri besleyebileceğiniz bir dizi kural, parametre ve değişken aralıklarını tanımlamak anlamına gelir. Bir sistemin parametreleriyle oynama ve farklı veri girişi ile oynama, sistematik bir yaklaşımın tutarlılığı ile sınırsız çıktı varyasyonları oluşturabileceğiniz anlamına gelir.

Farklı veriler tamamen çeşitli görsel çıkışlar oluşturabilir ve harika bir hızlı hareket eden, zengin dokulu veriler sesdir. Bu tam olarak animasyonumuzda kullanacağımız şeydir.

Veri odaklı vs veri görselleştirme

Veri odaklı bir animasyon bir veri görselleştirme midir? Evet ve hayır. Animasyonunuz, verilerin sadece görselleştirme gibi görsel bir gösterimi olacaktır, ancak amaç geleneksel bir görselleştirmeninkinden farklıdır. Veri görselleştirme, izleyiciye verilere bir içgörü vermek için kullanılır, böylece grafik verilerin iletişiminin hizmetindedir.

Ancak, ilginç ve dokusal grafik varyasyonları oluşturmamızı sağlamak için verileri yaratıcı bir tohum olarak kullanacağız, bu nedenle veriler grafiğin hizmetindedir. Tabii ki, bir disiplin birbirine bağlanır ve diğerleriyle çapraz polinlenir ancak veri kullanırken kendi niyetinizi tanımak iyidir.

Ne yapacağız?

P5.js bize bir ses dosyasını analiz etmek için gelen verilere hızlı ve kolay erişim sağlar (bir MP3 gibi). Kullanıyor olacağız p5.fft Ses içindeki farklı frekansları (bas ve tiz) analiz etmek ve bu frekansın 'enerjiyi' veya genliğini görselleştirir.

Sesin 'şeklini' oynatırken 'şeklini' görebilmemiz için, sadece sesin mevcut genliğini göstermek istemiyoruz, ancak veri noktalarının bir 'tamponu' yakaladık. Bu, hareketli bir değer geçmişi göstermemizi sağlayacaktır.

Veri noktalarımızı göstermek için, merkezden ekranın dış kenarına bir dizi eşmerkezli yay oluştururuz. Ark uzunluğu verilerin genliğini temsil edecektir. Ayrıca, çizgi ağırlığı ve renk gibi verilerimiz için diğer görsel kodlamaları da kullanacağız.

Ne öğreneceksin?

Kod üzerinden çalışıyoruz:

• Yeni bir P5 kroki kurma
• Ses yükleme ve analiz
• Veri değerlerini boyut, şekil ve renk gibi görsel öğelere eşleme
• Çekilmek için sınıfları kullanarak, animasyonumuzun ve verilerin durumunu koruyun ve kodumuzu tekrar kullanılabilir hale getirin.

Dosyalar nerede?

Animasyon için dosyalar barındırılmaktadır. Açılma , başkalarının eskizlerini paylaşmak, keşfetmek ve çatlamak için harika bir platform. Sizin için de kodunuz için harika bir yer.

Ses verilerini kullanacağımız gibi, kroki için sürüklemek için bir MP3 dosyasına ihtiyacınız olacak. OpennProcessing'de yeni bir taslak kuracağız; Krokunun ses yükledikten sonra nasıl görüneceğini, verileri aldıktan ve basit bir 'veri şekli' çekeceğini budur:

Ve tamamlanan eskiz böyle görüneceği budur:

Alternatif olarak, p5.js çevrimiçi editörü veya sadece kendi projenizdeki kütüphaneyi dahil edin İndirme veya CDN ile .

01. Yeni bir kroki başlat

ÜCRETSİZ bir OpenProcessing hesabı alın ve profil sayfanızdan bir kroki oluştur'u tıklatın. Bu daha sonra P5.JS'nin yerleşik fonksiyonlarından ikisini içeren en temel çizimleri oluşturacaktır:

1. kurulum() - bu sadece bir kez çalışır ve yeni bir tuval kurmak için kullanılır
2. çizmek() - İşte her kareyi çalıştırmak istediğiniz kodu koyduğunuz yer burasıdır.

Bunu fark edeceksin arka fon() sadece kurulumda bir kez çağrılır. Bu, ekranı temizler, bu nedenle her kare ekranı temizlemek istiyorsanız, bunu başlangıcında ekleyin. çizmek() işlevi de.

Bulabileceğiniz örneklerden birkaçını kullanarak burada bazı kodlarla bir oyun yapın. p5.js sitesinde .

02. Ses verilerini kullanarak ilk kroki oluşturun

Bana git Örnek Marş Kroki .

Oynat düğmesine basın ve bir mp3 dosyasını tuval üzerine bırakmanızı isteyen bir metni göreceksiniz. Yüklemeyi bitirmek için birkaç saniye bekleyin ve ardından oynatmaya başlamak için tuvalleri tıklatın. Yüklediğiniz müzikteki bas genliği ile birlikte, farenizi takiben bir elips görmelisiniz.

Kodun çoğu yorumlandı, ancak birkaç anahtar öğeye bakalım:

Taslağın başında, önündeki kurulum() , bazı küresel değişkenler yarattık.

İçinde kurulum() Birkaç önemli çizgimiz var:

colorMode(HSB,360,100,100);

colormode () P5.JS'yi RGB ve HSB gibi farklı renk alanlarında çalışmak üzere ayarlamanızı ve kanalları gezmek için kullandığınız ölçeği yapılandırmanızı sağlar. Burada, HSB aralıklarını, varsayılan ayardan ziyade Photoshop'tan daha aşina olabileceğiniz değerlere ayarladık (0 - 255).

canvas.drop(gotFile);

Bu süper yardımcı P5.JS işlevi, tuvalimizdeki herhangi bir dosya bırakma olayını dinlememizi sağlar. Bir dosya bırakma olayı aldığımızda, GotFile () Doğru tip olup olmadığını kontrol etmek ve sesi analiz etmeye başlayın.

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

Burada bırakılan dosya verilerinizi bir içine çeviriyoruz. Ses dosyası . Ses dosyasına sahip olduğumuzda, aşağıdaki kodu kullanırız:

1. initsound () Yeni bir FFT örneği ayarlamak için (sesi analiz etmek için)
2. analizesound () Her çerçevenin mevcut ses bloğunu analiz etmek
3. getNewsounddatavalue () kullanmak fft.getenergy () Bize sesin mevcut genliğini verecek her çerçeve. Bu, varsayılan 0 ila 255 ila 0 ile 1 arasındaki varsayılan aralığından dönüştürülür.

İpucu: Verilerinizi 0 ila 1 aralığına dönüştürmek faydalıdır, çünkü verileri ölçek, hız ve renk gibi görsel parametrelere eşleştirirken daha kolay kullanabilirsiniz.

Draw () işlevine bakalım. Bu satır, bas frekansının mevcut genliği (0 ile 1 arasında) ister ve değişkeni atar. mydataval .

var myDataVal = getNewSoundDataValue(“bass”)

Bizim özel diyoruz getdatahsbcolor () Veri değerinizi ayrı ayrı tutma, doygunluk ve parlaklığa ve bize bir renge döndüren fonksiyon. Veriler ne kadar yüksek olursa, renk, renk tonu spektrumunda ve daha parlak ve daha doygun rengi boyunca hareket eder.

var myDataColor = getDataHSBColor(myDataVal);

Elips'umuzu çizmeden önce, 200 (PX) verilerimizle 200 (PX) çarparak bir boyut vermemiz gerekir. Öyleyse değer ne kadar yüksek olursa, elips daha büyük olur.

var myEllipseSize = 200 * myDataVal;

03. Paintbrush olarak ses verilerini kullanın.

Biraz eğlenceli, yorum yapın arka fon() arayın çizmek() İşlev ve ses reaktif elipsinizi boyamak için kullanabilirsiniz!

05. Eskizinizi tamamlayın

Bir frekans için bir veri elips çizimi harikadır, ancak şimdi hem bas hem de tiz için bir dizi veri yayını oluşturacağız. Ayrıca, sesin şeklini daha iyi görmemize yardımcı olacak önceki değerlerin bir tamponu çizeceğiz.

Ziyaret etmek Krokunun bu bitmiş versiyonu , çalıştırın ve sonra bir mp3 bırakın.

Artık ekranın ortasından çıkan bir dizi yay göreceksiniz. Yatay yaylar, basların görselleştirmeleridir ve dikey olanlar MP3'ün tribini alır.

Kod'a bakıldığında, kurulumun çoğunu görecek, yükleme, analiz etme ve verileri elde etme son taslakla aynıdır, böylece bunu görmezden gelebiliriz. Burada oldukça fazla kod var, bu yüzden daha önce olduğu gibi, sadece birkaç anahtar puanı seçelim.

Yayları doğrudan çekmek yerine çizmek() , aslında bazı özel sınıflar yaratıyoruz:

1. sınıf radialarc {} Bireysel ARC'nin veri değerini tutar ve arkı çizer
2. sınıf radialarcs {} 'Radialarc' örneklerinin koleksiyonumuzu yönetir

Her sınıf tanımı, bazı kilit değerler belirlediğimiz ve ayrıca sınıfın davranışını değiştirmemizi sağlayan parametrelerde geçen bir yapıcıya sahiptir. Şimdi onlara daha yakından bakalım.

RADIALARC {} sınıfı:

Bu, tek bir veri değeri tutan ve bir çift simetrik yay çizen sınıftır.

setvalue () ve Değer elde etmek() Bir arkın içine ve dışındaki verileri almamızı ve veri güncellemeleri olarak verileri ARC'nin dizimiz üzerinden itmemizi sağlayın. redrawfromdata () Ark yeniden hesaplamak ve yeniden çizmek için çağrılır.

Drawarc () kullanışlı p5.js işlevi diyoruz. ark () . Ark () trigonometriyi kendimizi yapmaktan daha hızlıdır, ancak arkımız için pozisyon, boyut ve çok fazla, bir başlangıç ​​ve bitiş açısı gibi birkaç değer geçirmemiz gerekiyor.

Bu açı, derecelerden ziyade 'radyanlarda' ölçülür. Radyalılar dereceler gibidir, ancak farklı bir ölçekte: 360 ° 2 x PI radyan ile aynıdır. P5.js için faydalı yerleşik sabitler var. Pi , Yarım_pi ve Çeyrek_pi vb.

Radialarcs {} sınıfı:

Bu, bir dizi oluşturan bir yönetim sınıfıdır. Radialarc {} verileri her birine ve dışına taşıyarak ve arkname çağırarak sınıfları ve güncel tutar. redrawfromdata () işlevi.

Başlatma Radialarcs () Tiz ve bas için sınıflar, bir göz atın kurulum() . İki yarattığımızı görebilirsiniz. Radialarcs () Örnekler ve ayrıca özel parametrelerimizde geçer.

Bu parametreler şunlardır: Arc sayısı, iç ve en dıştaki yayların boyutları, başlangıç ​​açısı, maksimum çizgi ağırlığı ve rengin ton aralığı. Bu özel sınıfları oluşturarak, kodumuzu yeniden kullanmamıza olanak tanır, ancak her bir örneği bireyi bu parametreleri geçerek de yapar.

Ark nesneleri başlatıldığında, her çerçeve arayacak updateradialarc () ve DrawRadialarcs () Ana P5 içinde çizmek() İşlev, animasyon nasıl güncellenir ve hareket eder.

06. Daha ileri alın

Burada bir sürü kodu kapladık ama temel olarak veri aldığımızı ve boyut, pozisyon, uzunluk, ağırlık ve renk gibi görsel elemanlara nasıl uygulandığımızı görebileceğinizi umuyorum.

Daha ileri gitmek için, yay sayısı, gruplar ve açılarla oynayın. Renk aralıklarını değiştirin ve farklı şekiller çizmek için yeni sınıflar oluşturun.

Bu örnekte sürekli akan ve hızlı bir kare hızı ile birleştiğinde verileri kullandık, animasyon yanılsamasını yaratır. Ancak, tüm veriler böyle değildir ve daha yavaş güncellenebilir. Daha yavaş veriler için, şekillerinizin animasyonunu akımları ve hedef boyutları arasındaki animasyonunu tıklayarak yine de pürüzsüz bir animasyon oluşturabilirsiniz.

Bir sonraki veri odaklı animasyonunuzda iyi şanslar!

Bu makale başlangıçta 320 sayısında yayınlandı. ağ , dünyanın web tasarımcıları ve geliştiricileri için en çok satan dergisi. Sayı 320 satın al burada veya abone olun .

İlgili Makaleler:

• CSS ile SVG'ye animasyon nasıl eklenir
• Uygulama tasarımı devrim yaratmaya ayarlanmış veri eğilimi
• 12 Büyük CSS Animasyon Kaynakları