Bir gün geçirmek
Brendan Dawes
yerinde
Londra'yı oluştur
ve nasıl keşfedin
Veri Dawesome
. Bu bütün gün atölyesinde, her gün bizi çevreleyen verileri nasıl alacağınızı ve işleme ve p5.js kullanan güzel bir şeye dönüştüreceğini açıklayacaktır.
Şimdi kitap
K!
p5.js
gücünü getirmek için tasarlanmış bir kütüphanedir
İşleme
Web'e. Sanatçıları, tasarımcıları ve eğitimcileri programlama dünyasına tanıtmayı, aynı zamanda Devs ve mühendisleri görsel sanatlara getirmek için çok yönlü araçlar sunmayı amaçlamaktadır.
Dalışın ve ilk 'kroki' yapalım. Amacımız, basit bir görüntüyü animasyonlu yıldızların alanına dönüştüren bir çizim aracı oluşturmaktır. İlk önce, birkaç küresel değişken tanımlayacağız ve
kurulum()
işlevi. p5'lerin
kurulum()
Kroki yüklendiğinde, bir kez çalıştırılır, bu nedenle başlatma işlemini yapmak için ideal bir yer.
var hintimage, skyimage, yıldız = [];
İşlev Kurulumu () {...}
İçimizde
kurulum
İşlev, bir tuval oluşturacağız ve fare imlecini gizleyeceğiz, böylece kendimizi çizebiliriz. Varsayılan olarak, P5 şekiller etrafında bir anahat ekler - bu durumda strokları devre dışı bırakmak istiyoruz.
Createcanvas (800.500);
nocursor ();
nostroke ();
Arka plan görüntüsü - bu gece gökyüzü sahnesi animasyonumuz için ayar sağlar
Sonra, bir çift görüntü yükleyeceğiz. Biri arka plan olarak hizmet edecek - bu durumda, bir gece gökyüzü sahnesi. Diğeri 'ipucu' imajı olacak - nihai tasarımımızın siyah ve beyaz tasarımına dayanacak. Fikir, yıldızların çoğunu, arka plan sahnemizdeki tasarımı yeniden oluşturmak için, ipucu imajımızdaki siyah piksellerin üzerine çoğunu koymaktır. Bu görüntüleri P5'in metin ve çizim araçlarıyla oluşturmak kolay olur, ancak kısalık uğruna statik varlıkları kullanacağız.
Bu onun için
kurulum()
K! Başka bir önemli işlev
çizmek()
. Animasyonlar için yardımcı olan ve zaman içinde öğeleri ekleyen sürekli bir döngüde denir.
Fonksiyon Çizimi () {...}
Çekiliş fonksiyonu içinde, ilk görevimiz tuvali arka plan görüntüsüyle doldurmaktır. P5 arasında tuvali otomatik olarak temizlemez
çizmek()
Aramalar, bu yüzden bunu her kareyi yapmamız gerekiyor ya da bazı garip birikim etkileri ile sonuçlanacağız. Tuval üzerine yüklü bir görüntü koymak için kullanın
görüntü ()
İşlev ve konumlandırma için x ve y koordinatları verin.
Görüntü (Skyimage, 0, 0);
Sonra, mevcut fare yerini alacağız ve bir P5 olarak saklayacağız.
yaratıcı ()
. Bu nesne, uzayda noktalarla başa çıkmak için kullanışlı işlevlerle birlikte gelir, ancak çoğunlukla sadece bir kap olarak kullanıyoruz.
Var pozisyonu = Createvector (Mousex, Mousey);
Yeni saklanan fare pozisyonumuzu kullanarak imlecimizi çizebiliriz. Çizim rengini ile ayarlayacağız
doldurun ()
RGB değerlerini geçerek ve kullanın
elips()
Fare konumunda bir daire çizmek için.
Sadece fareyi bastırırken yeni yıldızlar çizmek istiyoruz, bu yüzden P5'lerin kontrol edelim
mouseispressed
devam etmeden önce. Fare altındaysa, bir sonraki yıldızımızın bitmesi için iyi bir yer hesaplamamız gerekiyor. Bunu özel bir işlevle yapacağız.
findpixel ()
, daha sonra tanımlayacağız.
Bir hedefimiz olduğunda, özel bir yıldız nesnesinin yeni bir örneği oluşturacağız (daha aşağıda) ve onu yıldız dizimizin sonuna iteceğiz. 2.000'in üzerinde yıldızla sonuçlanırsak, en yaşlı olanları atmaya başlayacağız.
if (fareispressed) {
var hedefi = findpixel ();
var yıldız = yeni yıldız (pozisyon, hedef);
Stars.Push (yıldız);
eğer (Stars.Length & Gt; 2000) Stars.Shift ();
}
Sonunda, yıldızların arasından döneceğiz ve arayın
Güncelleme()
ve
çizmek()
her birinde. Bu yöntemlerle daha sonra dalacağız.
için (var i = 0; i & lt; stars.length; i ++) {
yıldızlar [i] .update ();
yıldızlar [i] .draw ();
}
Yardımcı fonksiyonlar
Şimdi
kurulum()
ve
çizmek()
Oldukça, yardımcı fonksiyonlar ve nesneler üzerinde çalışacağız. İlk önce, her yeni yıldız için dinlenme pozisyonunu bulan bir işlevi tanımlayacağız. Tek yapmamız gereken, ipucu görüntüsünde bazı rastgele pikselleri kontrol etmek, kullanarak
almak()
siyah ya da beyaz olup olmadığını görmek için.
Aslında sadece kırmızı değerlerine bakmak zorundayız, çünkü her iki durumda da RGB değerleri eşleşir. Beyaz olmayan bir piksel bulursak, iade edeceğiz çünkü tasarımımızı vurduk. Değilse, sadece kontrol edilen son piksel döneceğiz ve rastgele bir yıldız olarak hizmet edeceğiz.
fonksiyon findpixel () {
var x, y;
için (var i = 0; i & 15; i ++) {
x = kat (rastgele (hintimage.width));
y = kat (rastgele (hintimage.height));
eğer (kırmızı (kırmızı (hintimage.get (x, y)) ve lt; 255);
}
geri dönüş yaratıcısı (x, y);
}
Gidiş, özel yıldız nesnemizdir. Basitçe söylemek gerekirse, her yıldız hakkında bilgi depolayan ve ayrıca onları güncellemek ve çizmek için bir araç sunmak istiyoruz. Javascript, geleneksel anlamda sınıflar oluşturmanın bir yolunu sağlamaz, ancak bir fonksiyon tanımlayarak ve kendi ihtiyaçlarımız için genişleterek aynı sonucu elde edebiliriz.
Her yıldız, beraberlik döngüsüzde oluşturulan her yeni yıldız için çağrılan bir 'Yapıcı İşlevi' olarak tanımlayacağımız birkaç mülke (başlangıç pozisyonu, nihai konumu ve rastgele üretilen bir çap) var.
Sonra ekleyeceğiz
Güncelleme()
P5.Vector'ün kullanacağı Yıldız yöntemi
lerp ()
Bir yıldızın mevcut ve hedef pozisyonları arasında yeni bir konumu hesaplamak için. Bu durumda, her çekiliş için kalan mesafenin yüzde dört'i hareket ettiriyoruz, bu da bize kolayca kolayca etkiler.
Süslü olmak istiyorsak, burada bazı fiziği de simüle edebiliriz, ama şimdilik buna basit tutacağız.
star.prototype.update = fonksiyon () {
this.position = p5.vector.lerp (
bu pozisyon,
Bu .Target,
0.04
);
};
Çizim Yıldızları
Sonunda yıldızın
çizmek()
Yöntem aslında yıldızı tuvale çizer. Bir kez daha kullanıyoruz
doldurun ()
ve
elips()
, bu sefer arayacağız
doldurun ()
Gri tonlamalı bir değer ve şeffaflık için bir alfa değeri ile.
Her çerçeve, doğrusal enterpolasyon bize mevcut yıldız pozisyonu ile hedef arasındaki yol boyunca yeni bir nokta verir.
Yıldızları bir pırıltı vermek için, alfa değeri P5'ler kullanılarak belirlenir.
gürültü, ses()
işlevi. Bu, belirtilen koordinatlar için Perlin Gürültü değerini döndürür, yani pürüzsüz, sıvı rasgele sayı dizisi alırsınız. Üçüncü parametre için, mekansal bir değer yerine zaman temelli bir değer geçiriyoruz, böylece gürültü zaman içinde canlandıracak.
Star.Prototype.draw = Function () {
var alfa = gürültü (
this.target.x,
Bu .Target.y,
Millis () / 1000.0
);
dolgu (255, alfa * 255);
elips(
this.position.x, this.position.y,
this.diameter, this.diameter
);
};
Bu bizim ilk krokumuz için! Yeni yıldızların görünmesini ve ipucu görüntüsüne uyduğunu görmek için tıklayın ve sürükleyin.
Sıradaki ne?
Buradan, P5.dom eklentisini kullanarak değişkenleri kontrol etmek için bazı HTML öğeleri ekleyebilir veya kullanan görsellere ses ekleyebilirsiniz.
P5.Sound
.
Sadece p5.js ile mümkün olan şeyin yüzeyini ve yolda yeni özelliklerle, sabırsızlıkla beklemek daha çok şey var. İyi eğlenceler!
