p5.js - Pustaka JavaScript open-source untuk coding dan pembuatan seni

 (p5js.org)
3 poin oleh GN⁺ 2024-08-04 | 1 komentar | Bagikan ke WhatsApp
  • p5.js adalah pustaka JavaScript open-source gratis yang memungkinkan siapa pun mulai belajar coding dan membuat seni di web
  • Ditujukan secara luas untuk seniman, desainer, pemula, dan pendidik, dengan komunitas yang inklusif sebagai pusat proyek
  • Alih-alih terus menambah fitur baru, proyek ini mengambil arah dengan pengecualian untuk fitur yang berkontribusi pada peningkatan aksesibilitas
  • Tersedia Reference, contoh, editor web, dan video pengantar interaktif sehingga pengguna bisa langsung mulai belajar dan membuat animasi, audio, serta WebGL
  • Unduhan, donasi, partisipasi komunitas, hingga akses untuk melihat p5.js 2.0 beta terhubung di satu tempat, menjadi titik masuk bagi pembelajar maupun kontributor

p5.js untuk coding dan seni

  • p5.js adalah pustaka JavaScript open-source gratis untuk belajar coding dan membuat seni
  • Menyambut beragam pengguna seperti seniman, desainer, pemula, dan pendidik
  • Proyek ini dijalankan dengan komunitas yang inklusif dan berorientasi pada kepedulian sebagai pusatnya
    • Ada contoh kegiatan seperti Coding Club untuk peserta berusia 50 tahun ke atas di Korea, serta lokakarya di Nairobi dan NYC
  • Kebijakan penambahan fiturnya cukup jelas
    • Kecuali untuk fitur yang meningkatkan aksesibilitas, fitur baru tidak ditambahkan

Jalur untuk mulai belajar dan berkarya

  • Reference: dokumentasi referensi pustaka p5.js
  • Examples: ruang untuk mempelajari p5.js melalui contoh
  • Start Coding: editor p5.js untuk langsung mulai coding di web
  • interactive video: video pengantar interaktif yang membahas animasi, audio, WebGL, aksesibilitas, dan cara berkontribusi
  • Download Library: unduh pustaka p5.js

Komunitas dan partisipasi

  • Community: halaman untuk melihat aktivitas komunitas p5.js
  • Donate: jalur donasi untuk mendukung proyek
  • p5.js 2.0 beta: situs beta terpisah untuk melihat versi baru p5.js 2.0

Bacaan terkait

1 komentar

 
GN⁺ 2024-08-04
Komentar Hacker News

  • Alasan utama tautan ini naik di HN sekarang tampaknya adalah situs web baru p5.js
    Pada 2023, Sovereign Tech Fund memberi tim p5.js hibah 450 ribu euro untuk “memperbaiki struktur dokumentasi dan aksesibilitas p5.js”, dan hasil yang terlihat sekarang tampaknya berasal dari investasi itu
    Secara pribadi, menurut saya ada hasilnya. Navigasi dan pencarian situs jauh lebih mudah, dan informasinya juga lebih berguna. Misalnya, layak membandingkan dokumentasi lama dan baru tentang cara memakai editor p5.js dan canvas dengan screen reader
    [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...

    • Baru-baru ini saya membuat satu iklan digital sepenuhnya dengan Processing lalu mencoba memindahkannya ke p5.js; meski p5.js mulai mengejar, Processing masih jauh lebih mudah dipakai untuk bekerja
      Sekitar 10 tahun lalu pun saya memakai Processing dan saat itu sudah sangat mudah, sementara di p5.js cukup mudah menemukan bug atau implementasi yang belum ada. Porting hampir bisa dibuat sama, tetapi tidak 1:1 dan sebagian API harus dipelajari
      Dari sisi performa, p5.js sama sekali tidak mendekati d3 atau three.js. Jujur, pada 2024 saya bertanya-tanya seberapa bermakna p5.js selain sebagai alat edukasi. Animasi web masa kini tampaknya lebih mudah dibuat dengan CSS3 modern dan library pendukung, dan alur sederhana dari aplikasi vektor gratis ke CSS juga tampaknya memungkinkan
      Bahkan untuk pekerjaan yang memerlukan kalkulasi per piksel, tidak ada cara mudah untuk memakai GPU secara efisien. Jadi dukungan 450 ribu euro terasa cukup aneh, apalagi dialokasikan ke framework yang tidak terlalu populer
    • Bagus bahwa situs lama tetap bisa dilihat di https://archive.p5js.org/
      Namun saya kurang suka tata letaknya di layar besar. Tutorial yang ditautkan [1] berupa paragraf rata kiri dengan lebar tetap, sehingga separuh kanan layar kosong. Sebaliknya, elemen seperti ringkasan dokumen referensi [2] melebar menjadi 4 kolom di seluruh layar; saat jendela browser diperkecil menjadi setengah lebar layar masih oke, tetapi saat dimaksimalkan jadi sulit dibaca
      [1]: https://p5js.org/tutorials/p5js-with-screen-reader/
      [2]: https://p5js.org/reference/
    • Kemarin JavaScript Weekly juga menampilkannya dengan cukup menonjol
      Pelanggannya sekitar 175 ribu orang, jadi tautan yang dimasukkan di sana cukup sering naik ke halaman depan HN beberapa jam kemudian. Hampir mustahil membuktikan keterkaitan sebenarnya, tetapi menurut saya ini salah satu hal menarik dari penyebaran tautan di dalam ekosistem
    • Situs lama juga sudah bagus dan sudah responsif di mobile
      Situs baru lebih dioptimalkan untuk mobile, dan membuat lebih banyak konten lebih nyaman dibaca di layar berkepadatan tinggi. Wajar jika p5.js kembali mendapat perhatian, dan video-video Coding Train terkait juga sama-sama layak ditonton

  • ChatGPT cukup mengenal P5.js, jadi kalau diminta “buatkan program P5 yang menggambar gelombang sinus dan memungkinkan fase diatur dengan slider”, ia langsung membuatkannya
    Dengan ChatGPT dan P5.js saya membuat alat desain untuk menyeimbangkan 5 massa di keliling lingkaran, untuk membuat bow magnetik rotari yang mengurangi harmonic locking
    Kalian bisa mencoba menyeret titik-titik sudut pentagon: https://editor.p5js.org/spDuchamp/full/zgtkE2xik
    Hasil cetak 3D: https://www.instagram.com/p/Cr4ZXGztY27/

    • Menarik, ini dipakai untuk apa?
    • Ini membuat saya membayangkan LLM terus memprogram konten baru dalam game untuk membuat game dengan generasi prosedural

  • Situs webnya benar-benar cantik. Agak mengejutkan bahwa bagian About menghilangkan informasi bahwa ini meneruskan ide Processing
    Mungkin sekarang p5.js sudah lebih terkenal daripada Processing, atau lebih terkenal daripada Processing pada masa lalu

    • Karena ada perpecahan antara Ben Fry dan Processing Foundation, kemungkinan alasannya politis
      Salah satu keluhan utamanya adalah bahwa proyek p5.js mengambil alih Processing Foundation dan mengurangi pengembangan Processing
    • Saya sangat menyukai proce55ing sebagai bahasa mini
      Pada masa ketika cukup sulit memanipulasi piksel di tempat seperti canvas dalam halaman web untuk membuat eksperimen visual yang menarik, itu adalah alat yang sangat masuk akal, dan juga mudah dibaca serta mudah diakses bagi seniman dengan pengalaman pemrograman yang sedikit

  • Saat kuliah, saya sangat menikmati bermain-main dengan p5.js, dan dulu juga pernah membuat automata seluler kecil sendiri: https://ezhik.me/beyond184/
    Kebetulan, karya yang pertama kali membuat saya tertarik pada seni digital—semacam penghormatan yang menyenangkan untuk komputasi—juga menggunakan p5.js: https://baku89.com/work/ffff?lang=en https://animethemes.moe/anime/subete_ga_f_ni_naru_the_perfec...
    Salah satu hal tersulit sebagai programmer adalah melewati boilerplate sebelum bisa menaruh piksel pertama di layar, dan p5.js menyelesaikan hal itu dengan cukup baik, sehingga membuat kita lebih fokus pada aspek kreatif dari “creative coding”
    Saya tidak akan memakai p5.js untuk “pengembangan software besar yang sesungguhnya”, tetapi saat ingin membuat sketsa, ini adalah alat digital pertama yang saya raih

  • Saya mengenal library ini beberapa tahun lalu berkat Daniel Shiffman
    Video-videonya sangat penting dalam perkembangan saya sebagai programmer

  • Ini library yang cukup bagus untuk membuat game dengan cepat
    Saya membuat simulasi air kecil dengan p5.js, dan saya sangat menyukai betapa mudahnya mempelajari p5
    [1]: https://github.com/trungdq88/summer

  • Processing, yang awalnya berbasis Java, telah menginspirasi banyak library
    Saat ini, di sebagian besar bahasa populer, Anda bisa menemukan library yang kompatibel sampai batas tertentu
    Sebagai proyek musim panas, saya menulis versi untuk Racket: https://docs.racket-lang.org/manual-sketching/
    Inspirasi terbesar saya adalah channel YouTube Daniel Shiffman, “The Coding Train”. Ia punya insting untuk memilih masalah dan algoritma yang menarik secara visual, dan antusiasmenya juga tak tertandingi
    https://thecodingtrain.com/

  • Saya sudah banyak memakai p5.js juga untuk pekerjaan profesional, tetapi jika sekarang ada yang ingin menggunakannya, sebaiknya mengetahui apa yang terjadi pada salah satu pendiri foundation sekaligus pencipta bahasa Processing asli yang menjadi dasar p5
    https://news.ycombinator.com/item?id=37760363
    Setelah mengetahui apa yang saya ketahui sekarang, saya menyesal pernah mendukung pekerjaan Processing Foundation

    • Processing Foundation tampaknya sudah menjadi seperti Mozilla Foundation
    • Melihat ini, banyak hal jadi masuk akal
      Di era ketika ada begitu banyak API grafis berkinerja tinggi, saya jadi paham mengapa Processing/p5 terasa mandek tanpa perubahan besar selama bertahun-tahun. Akhir yang menyedihkan

  • Saya sangat menyukai P5.js. Di komunitas OpenProcessing, ada ribuan karya keren yang mudah dilihat, digandakan, dan dimodifikasi
    Saya terutama memakai Python, tetapi mengutak-atik program P5.js sedikit demi sedikit membantu saya belajar JavaScript
    [1] -- https://openprocessing.org/discover/#/trending

  • Di playground p5.js, Anda bisa menulis dan menjalankan kode di browser, dan juga membuat akun untuk menyimpan sketsa kode
    https://editor.p5js.org/nonoesp/sketches/ruSYeEUEH