Brian Curtis
0 
2037
315
JavaScript internetin dilidir. Ön uç gelişiminde onsuz çalışmak mümkün değildir. Özellikle yeni başlayanlar için çocuklar, dilin sözdizimine alışmak için zor olabilir.
Acemileri tamamlamak için, tarayıcıya yerel bir sunucu yüklemek ve çalıştırmak bile bir engel olabilir. Herhangi bir şey yüklemeden, JavaScript ile serin bir şey yapmanın bir yolu varsa? Yaratıcılık düşünülerek tasarlanmış bir kodlama kütüphanesi olan p5.js kodunu girin..
İşte bazı basit kodlama prensiplerini kullanarak ses reaktif bir animasyonlu robot kafası nasıl yapılır.
P5.js nedir??
P5.js kütüphanesi Los Angeles Based artist Lauren MacCarthy tarafından oluşturuldu. Yaratıcı ifade ve sanat için İşleme'ye benzer bir platform sağlamak üzere tasarlanmıştır. Temiz araçlar, yeni başlayanlar için mükemmel olması için iyi açıklanan eğitimler ve referans belgelerle birlikte gelir.
Animasyon, müzik, basit oyunlar ya da hatta harici donanıma bağlanıyor olun 8 İşleme ve Şaşırtmalı Donanım Projeleri ve p5.js 8 İşleme ve Şaşırtmalı Donanım Projeleri ve p5.js DIY elektroniği Arduino ve Raspberry Pi'den daha fazlasıdır. Bu bölümde, Processing ve p5.js ile yapabileceğiniz en harika projelerden bazıları! , p5.js yardımcı olabilir.
P5.js Düzenleyicisi
Başlamak için, tarayıcı pencerenizi açın ve p5.js web düzenleyicisine gidin. Başlamadan önce, isteğe bağlı iki adım vardır.
1. Eskizlerinizi kaydetmek için p5.js adresinde oturum açmış olmanız gerekir, bu nedenle bir hesap yapmanız tavsiye edilir. Kayıt olmak ücretsizdir ve isterseniz giriş yapmak için Google veya GitHub hesabınızı kullanabilirsiniz..
2. Sağ üst köşedeki ayarlar dişli tekerleğine tıklayın. Burada, hepiniz için karanlık tema sevenler için tema ve metin boyutunu değiştirebilirsiniz..
P5.js editörü aynı alanda kod editörü, konsol ve çıktı penceresini birleştirir. Şimdiye dek zaten sizin için kurulmuş iki fonksiyon var..
P5.js temelleri
Her p5.js taslağı iki element ile başlar. kurmak() işlev ve çekmek() işlevi. Daha önce bir Arduino programlamış olanlara, bu aşina olacak!
işlev kurulumu () createCanvas (500, 500); kurmak() fonksiyon programınızın başında çalışır. Bu durumda, kurulum 400 piksel kare tuval oluşturur. Bunu (500, 500) olarak değiştir çalışmak için biraz daha büyük bir alan için.
Kurulum yalnızca bir kez çalışır ve programınız için gereken değerleri ve programınızın başlangıç değerlerini oluşturmak için kullanılır.
işlev draw () background (220); çekmek() yöntem her kareye denir. Bu, Arduino'daki döngü işlevi veya Unity 3D'deki güncelleme işlevi gibi çalışır. Çiziminizde değişmesi gereken her şey burada olur. Şimdilik, arka plan her karede yeniden çiziliyor. En üstte iki simge göreceksiniz, oynayın ve durun. Click oyun.
Bu şimdiye kadar programdır - gri arkaplanlı 500 × 500 kanvas,
Şekil Oluşturma
P5.js'deki şekillerle çalışmak, mo.js web animasyonu dersinde kullanılan önceden belirlenmiş şekil nesnelerinden biraz farklıdır. Basit bir elips oluşturmak için bunu koddaki çekmek() yöntemi, hemen arkaplan rengini ayarladığınız yerin.
işlev draw () background (220); elips (250,250,50)elips() yöntem birkaç argüman alır. İlk ikisi, tuval üzerindeki X ve Y pozisyonları. Tuval 500 piksel genişliğinde olduğundan, bu iki değerin 250 olarak ayarlanması, elipsin ortasına yerleştirilmesini sağlar. Üçüncü argüman dairenin genişliği - bu durumda, 50 piksel.
Öyleyse bir arka planınız ve bir daireniz var, ama o kadar da iyi görünmüyor. Bunu düzeltmek için zaman.
Bazı Stil Eklemek
Arka plan rengini değiştirerek başlayın. Parantez içindeki sayı gri tonlamalı bir değeri temsil eder. Öyleyse, 0 siyah, ve 255 beyaz, aralarında farklı gri tonları var. Arka planı siyah yapmak için bu değeri 0 olarak değiştirin..
işlev draw () background (0); Elips (250,250,50); Şimdi play butonuna tıkladığınızda arka plan siyah olacaktır. Çevreye biraz renk vermek için RGB (kırmızı yeşil ve mavi) değerlerini ayrı ayrı etkilemek isteyeceğiz. Bu değerleri saklamak için betiğinizin üstünde (başlangıçta, kurulum işlevinden önce) bazı değişkenler oluşturun.
var r, g, b;Ayar fonksiyonunda, değerini r için 255, ve diğerlerine bir değer ver 0. Kombine RGB rengi parlak kırmızı olacak!
r = 255; g = 0; b = 0;Rengi daireye uygulamak için, ) (Dolgu daireyi çizmeden hemen önce draw yöntemini çağırın.
dolgu (R, G, B); Elips (250,250,50);Şimdi tıklayın oyun, ve siyah bir arka plan üzerinde kırmızı bir daire görmelisin.
Çevreyi yapmak iyi bir başlangıçtır, ancak etkileşim eklemek gerçekten ilginç hale geldiği yerdir!
Rengi Değiştirmek İçin Tıklayın
Bir fare tıklamasıyla çalıştırılacak kod eklemek, p5.js.'de oldukça kolaydır. Altında yeni bir işlev oluşturun. çekmek() yöntem.
mousePressed () işlevi r = rasgele (256); g = rasgele (256); b = rastgele (256); mousePressed () Fare basmalarını dinler ve parantez içindeki kodu uygular. Rastgele () işlev, 0 ile verilen bir sayı arasında rasgele bir değer döndürür. Bu durumda, her fare tuşuna basıldığında r, g ve b değerlerini 0 ile 255 arasında ayarlıyorsunuzdur.
Kodu tekrar çalıştırın ve fareyi birkaç kez tıklayın. Siz yaptığınız zaman, çember rengini değiştirmeli.
Şimdi animasyonunuz fare tıklamaları için reaktif, ancak kullanıcının sesini kullanma ne olacak?
Ses Kontrolünü Ayarlama
Sistem mikrofonunu kullanmak, p5.js ses kütüphanesi ile kolaydır. Komut dosyanızın en üstünde, adlı yeni bir değişken oluşturun. mikrofon.
var r, g, b; var mic;Bu satırları telefonunuza ekleyin. kurmak() Atama işlevi mikrofon ses girişine.
mic = new p5.AudioIn () mic.start (); Şimdi oynat'ı tıkladığınızda, yerleşik mikrofona erişmek için izin isteyen bir iletişim kutusu görüntülenir..
Click İzin vermek. Hangi tarayıcıyı kullandığınıza bağlı olarak, tercihinizi hatırlayabilir veya onaylayan bir kutuyu tıklatmanız gerekebilir. Şimdi mikrofon ayarlandı ve kullanmaya başlamanın zamanı geldi.
Hacime Göre Ölçeklendirme
Mikrofonun ses düzeyini programınızdaki bir değer olarak kullanmak için onu değişken olarak kaydetmeniz gerekir. Değiştir çekmek() Bu gibi görünmek için bir yöntem:
işlev draw () var micLevel = mic.getLevel (); Arka plan (0); dolgu (R, G, B); elips (250,250,50 + micLevel * 2000); Fonksiyonun başında, yeni bir değişken micLevel oluşturulur ve geçerli mikrofon genliğine atanır.
Elipsin sabit bir genişliği 50 pikseldi. Şimdi, her kareyi güncelleyen micLevel değerine eklenen 50 piksel minimum genişliktir. MicLevel'in çarptığı sayı, mikrofonunuzun hassasiyetine bağlı olarak değişecektir..
Daha yüksek değerler ile deneme - 5000 değer, ölçekte daha çarpıcı bir değişim yaratacaktır.!
Not: bu sizin için işe yaramazsa, mikrofonunuz doğru kurulmamış olabilir. Tarayıcı, sistemin varsayılan mikrofonunu kullanır; ses ayarlarınızı değiştirmeniz ve yenileştirmeniz gerekebilir..
Robot Yapımı
Artık robotu oluşturmak için gereken tüm araçlara sahipsiniz. İlk önce, yarattığınız elipsi hareket ettirin ve gözlerinizi yapmak için bir tane daha ekleyin..
elips (150, 150, 50 + micLevel * 2000); elips (350, 150, 100 + micLevel * 2000); “diş” Ekranın altından uzanan bir dizi dikdörtgen vardır. Unutmayın rect () yöntem sabit genişliği için ekstra bir parametre gerektirir.
rect (0, 500,100, -100 -micLevel * 5000); rect (400, 500, 100, -100 -micLevel * 5000); rect (100, 500,100, -100 -micLevel * 3000); rect (300, 500, 100, -100 -micLevel * 3000); rect (200, 500, 100, -100 -micLevel * 1000); Bu sefer sadece dişlerin yüksekliğinin değişmesini ve “gülümseyen” etkisi farklı hassasiyetlere sahip olmaları gerekir. Minimum yükseklik -100'dür (tuvalin altından gelir), bu nedenle micLevel de negatif bir sayı olmalıdır.
Oyuna tıkla, bitmiş bir robot yüzü görmelisin!
Bir kez daha, en iyi sonuçları elde etmek için çarpan numaralarınızı ince ayar yapmanız gerekebilir.
Son Dokunuşlar Ekleme
Gözlere daha da fazla öğrenci ekleyin elips() çağırır. Başka kullan ) (Dolgu onları beyaz yapmak için. Bunu ekle çekmek() yöntemi, aşağıda “diş” yeni yarattın.
(255) doldurmak; elips (150, 150, 20 + micLevel * 1000); elips (345, 150, 30 + micLevel * 1000); Son olarak, tüm parçaya küçük bir tanım vermek için, kurmak() fonksiyon
strokeWeight (5); Bu kadar!
Herhangi bir şey işe yaramadıysa, kodunuzu iyice kontrol edin ve gerekirse bu kılavuzdaki tam kodu p5 editöründe görebilirsiniz..
P5.js ile İlerleme
Bu başlangıç eğitimi, p5.js ile ilgili bazı temel kavramları kapsar ve yaratıcı olmanın ne kadar kolay olduğunu gösterir. Her zaman olduğu gibi, bu proje p5.js’nin yapabileceği her şeyin yüzeyini zar zor kırıyor.
Bir programcı ve JavaScript sözdizimi gibi düşünmeye alışık olduğunuzdan, p5.js ile sanat yaratmak için zaman harcamak iyi zaman harcar. Bunların hepsi gönülden dalmaya karar verirseniz ve gerçekten JavaScript öğrenirseniz, geliştirmeleri gereken önemli becerilerdir. 5 Top Udemy Kursu ile JavaScript'i Gerçekten Öğrenin 5 Top Udemy Kursu ile Gerçekten JavaScript'i Öğrenin JavaScript, web'in programlama dilidir. JavaScript öğrenmek için bir nedeniniz varsa, Udemy'den bu mükemmel beş kurs, kodlama yolculuğunuza başlamanız için uygun bir yer olabilir.. !