- p5.js, kodlama öğrenmeye ve sanat üretmeye web üzerinde başlamayı mümkün kılan ücretsiz, açık kaynaklı bir JavaScript kütüphanesidir
- Sanatçılar, tasarımcılar, yeni başlayanlar ve eğitimciler dahil geniş bir kitleyi hedefler; projenin merkezinde kapsayıcı bir topluluk yer alır
- Rastgele yeni özellikler eklemektense, erişilebilirliği artırmaya katkı sağlayan özellikler için istisna tanıyan bir yaklaşım benimser
- Reference, örnekler, web editörü ve etkileşimli tanıtım videosu sayesinde animasyon, ses ve WebGL öğrenmeye ve üretmeye hemen başlanabilir
- İndirme, bağış, topluluğa katılım ve p5.js 2.0 beta bağlantıları tek bir yerde sunularak hem öğrenenler hem de katkı sağlayanlar için bir giriş noktası oluşturur
Kodlama ve sanat için p5.js
- p5.js, kodlama öğrenimi ve sanat üretimi için ücretsiz, açık kaynaklı bir JavaScript kütüphanesidir
- Sanatçılar, tasarımcılar, yeni başlayanlar ve eğitimciler dahil çeşitli kullanıcıları memnuniyetle karşılar
- Proje, kapsayıcı ve özen odaklı bir topluluk etrafında yürütülür
- Buna örnek olarak Kore'de 50 yaş üstüne yönelik Coding Club ile Nairobi ve NYC'deki atölyeler verilebilir
- Özellik ekleme politikası oldukça nettir
- Erişilebilirliği artıran özellikler dışında yeni özellik eklenmez
Öğrenmeye ve üretmeye başlama yolları
- Reference: p5.js kütüphanesi referans dokümantasyonu
- Examples: p5.js'i örneklerle öğrenme alanı
- Start Coding: Web üzerinde doğrudan kodlamaya başlamayı sağlayan p5.js editörü
- interactive video: animasyon, ses, WebGL, erişilebilirlik ve katkı yöntemlerini ele alan etkileşimli tanıtım videosu
- Download Library: p5.js kütüphanesini indirme
Topluluk ve katılım
- Community: p5.js topluluk etkinliklerini görmek için sayfa
- Donate: projeyi desteklemek için bağış bağlantısı
- p5.js 2.0 beta: yeni sürüm p5.js 2.0'ı görmek için ayrı beta sitesi
1 yorum
Hacker News görüşleri
Bu bağlantının şu anda HN'de öne çıkmasının ana nedeni muhtemelen p5.js'in yeni web sitesi
2023'te Sovereign Tech Fund, p5.js ekibine “p5.js dokümantasyon yapısını ve erişilebilirliğini iyileştirme” amacıyla 450 bin avroluk hibe verdi; şu anda görülen sonuç da bu yatırımdan çıkmış gibi görünüyor
Bana kalırsa bunun karşılığı alınmış. Sitede gezinmek ve arama yapmak çok daha kolay hale gelmiş, bilgiler de daha kullanışlı olmuş. Örneğin bir ekran okuyucuyla p5.js editörü ve canvas'ın nasıl kullanılacağını anlatan eski ve yeni dokümanları karşılaştırmaya değer
[1] - STF announcement/progress - https://p5js.org/events/stf-2024/
[2] - Using p5 with a screen reader (old version) - https://archive.p5js.org/learn/p5-screen-reader.html
[3] - How to Use the p5.js Web Editor with a Screen Reader (new) - https://p5js.org/tutorials/p5js-with-screen-reader/
[4] - Writing Accessible Canvas Descriptions (new) - https://p5js.org/tutorials/writing-accessible-canvas-descrip...
Yaklaşık 10 yıl önce de Processing kullanmıştım ve o zaman bile çok kolaydı; p5.js tarafında ise hata ya da eksik implementasyon bulmak da kolaydı. Neredeyse aynı şekilde port etmek mümkün oldu ama bire bir değildi, bazı API'leri öğrenmek gerekti
Performans açısından p5.js, d3 ya da three.js'e hiç yaklaşmıyor. Açıkçası 2024'te eğitim aracı olmanın dışında p5.js'in ne kadar anlamlı olduğunu sorguluyorum. Günümüzde web animasyonlarını modern CSS3 ve yardımcı kütüphanelerle yapmak daha kolay görünüyor; ücretsiz bir vektör uygulamasından CSS'e uzanan basit bir akış da mümkün gibi
Piksel düzeyinde hesaplama gerektiren işlerde de GPU'yu verimli kullanmanın kolay bir yolu yok. Bu yüzden 450 bin avroluk destek bana epey tuhaf geliyor; özellikle de çok popüler olmayan bir framework'e verilmiş olması daha da öyle
Yine de büyük ekranlardaki yerleşimi beğenmedim. Bağlantısı verilen [1] numaralı eğitim, sabit genişlikte sola yaslı paragraflardan oluşuyor; bu yüzden ekranın sağ yarısı boş kalıyor. Buna karşılık referans doküman özeti [2] gibi öğeler tüm ekrana dört sütun halinde yayılıyor; tarayıcı penceresi ekranın yarı genişliğine indirildiğinde sorun yok ama tam ekran olduğunda okumak zorlaşıyor
[1]: https://p5js.org/tutorials/p5js-with-screen-reader/
[2]: https://p5js.org/reference/
Yaklaşık 175 bin abonesi var; bu bültende yer alan bir bağlantının birkaç saat sonra HN ana sayfasına çıkması sık görülen bir durum. Gerçek bağlantıyı kanıtlamak neredeyse imkânsız ama bence ekosistem içinde linklerin yayılmasının eğlenceli yanlarından biri bu
Yeni site mobil için daha da optimize edilmiş ve yüksek yoğunluklu ekranlarda daha fazla içeriğin daha rahat okunmasını sağlıyor. p5.js'in yeniden ilgi görmesi gayet anlaşılır; buna bağlı olarak Coding Train videoları da kesinlikle izlemeye değer
ChatGPT, P5.js'i oldukça iyi biliyor; “bir sinüs dalgası çizen ve bir slider ile fazı ayarlayabildiğim bir P5 programı yaz” derseniz hemen oluşturuyor
ChatGPT ve P5.js ile, çevre üzerinde 5 kütlenin dengesini ayarlayan bir tasarım aracı yaptım; amaç harmonik kilitlenmeyi azaltan döner bir manyetik yay üretmekti
Beşgenin köşelerini sürükleyerek deneyebilirsiniz: https://editor.p5js.org/spDuchamp/full/zgtkE2xik
3D baskı sonucu: https://www.instagram.com/p/Cr4ZXGztY27/
Gerçekten çok güzel bir web sitesi. About bölümünde bunun Processing'in fikirlerini devam ettirdiği bilgisinin çıkarılmış olması şaşırtıcı
Artık p5.js, Processing'den daha ünlü hale gelmiş olabilir; hatta geçmişteki Processing'den bile daha bilinir durumda olabilir
Onun başlıca şikâyetlerinden biri, p5.js projesinin Processing Foundation üzerinde kontrol kurup Processing geliştirmesini geri plana itmesiydi
Web sayfasındaki bir canvas gibi bir alanda pikselleri manipüle ederek ilginç görsel deneyler üretmenin oldukça zor olduğu zamanlarda gerçekten mantıklı bir araçtı ve programlama deneyimi az olan sanatçılar için de okunabilir ve erişilebilir durumdaydı
Üniversitedeyken p5.js ile oynarken gerçekten çok eğlenmiştim; zamanında kendim de küçük bir hücresel otomat yapmıştım: https://ezhik.me/beyond184/
Tesadüfen, dijital sanata ilk ilgi duymamı sağlayan eser de p5.js kullanıyordu; sanki hesaplamaya yapılmış keyifli bir saygı duruşu gibiydi: https://baku89.com/work/ffff?lang=en https://animethemes.moe/anime/subete_ga_f_ni_naru_the_perfec...
Programcı olarak en zor şeylerden biri, ekrana ilk pikseli koymadan önce gereken boilerplate'i aşmaktır; p5.js bunu oldukça iyi çözüyor ve beni “yaratıcı kodlama”nın yaratıcı tarafına daha çok odaklandırıyor
“Gerçek büyük ölçekli yazılım geliştirme” için p5.js kullanmazdım ama sketch yapmak istediğimde ilk el attığım dijital araç bu
Bu kütüphaneyi birkaç yıl önce Daniel Shiffman sayesinde tanıdım
Videoları, programcı olarak gelişmem için vazgeçilmezdi
Oyunları hızlıca yapmak için oldukça iyi bir kütüphane
p5.js ile küçük bir su simülasyonu yaptım ve p5'in öğrenmesinin kolay olmasını gerçekten sevdim
[1]: https://github.com/trungdq88/summer
Aslen Java tabanlı olan Processing, birçok kütüphaneye ilham verdi
Bugünlerde popüler dillerin çoğunda bir dereceye kadar uyumlu bir kütüphane bulabiliyorsunuz
Yaz projesi olarak Racket için bir sürüm yazdım: https://docs.racket-lang.org/manual-sketching/
En büyük ilham kaynağım Daniel Shiffman'ın YouTube kanalı “The Coding Train” oldu. Görsel olarak ilgi çekici problemleri ve algoritmaları seçme konusunda çok iyi bir sezgisi var, ayrıca tutkusu da eşsiz
https://thecodingtrain.com/
p5.js'i profesyonel işlerde de epey kullandım ama şimdi kullanmayı düşünenlerin, foundation'ın kurucu ortaklarından birinin ve p5'in temelini oluşturan asıl Processing dilinin yaratıcısının başına ne geldiğini bilmesi iyi olur
https://news.ycombinator.com/item?id=37760363
Artık bildiklerimi bildiğim için Processing Foundation'ın çalışmalarını desteklemiş olmaktan pişmanım
Bu kadar çok yüksek performanslı grafik API'sinin olduğu bir dönemde, Processing/p5'in neden yıllardır büyük bir değişim olmadan durağan kaldığını şimdi anlayabiliyorum. Üzücü bir son
P5.js'i gerçekten seviyorum. Topluluğu OpenProcessing içinde kolayca görüntüleyebileceğiniz, kopyalayabileceğiniz ve değiştirebileceğiniz binlerce harika çalışma var
Ağırlıklı olarak Python kullanıyorum ama P5.js programlarını ufak ufak değiştirerek JavaScript öğrenmeme yardımcı oldu
[1] -- https://openprocessing.org/discover/#/trending
p5.js playground'unda tarayıcıda kod yazıp çalıştırabiliyorsunuz; ayrıca bir hesap oluşturup kod sketch'lerinizi kaydedebiliyorsunuz
https://editor.p5js.org/nonoesp/sketches/ruSYeEUEH