- p5.js là thư viện JavaScript mã nguồn mở miễn phí, giúp bắt đầu học lập trình và sáng tạo nghệ thuật trên web
- Hướng tới nhiều đối tượng như nghệ sĩ, nhà thiết kế, người mới bắt đầu và nhà giáo dục, với cộng đồng hòa nhập là trung tâm của dự án
- Thay vì tăng thêm tính năng một cách vô tội vạ, dự án chọn hướng chỉ ngoại lệ cho những tính năng góp phần cải thiện khả năng tiếp cận
- Có Reference, ví dụ, trình biên tập web và video giới thiệu tương tác để có thể bắt đầu ngay việc học và sáng tạo với animation, audio và WebGL
- Từ tải xuống, quyên góp, tham gia cộng đồng đến xem p5.js 2.0 beta, mọi lối vào đều được nối tại một nơi, trở thành điểm khởi đầu cho cả người học lẫn người đóng góp
p5.js cho lập trình và nghệ thuật
- p5.js là thư viện JavaScript mã nguồn mở miễn phí dành cho việc học lập trình và sáng tạo nghệ thuật
- Chào đón nhiều nhóm người dùng khác nhau như nghệ sĩ, nhà thiết kế, người mới bắt đầu và nhà giáo dục
- Dự án được vận hành xoay quanh một cộng đồng hòa nhập và đề cao sự quan tâm, hỗ trợ lẫn nhau
- Có các ví dụ hoạt động như Coding Club dành cho người từ 50 tuổi trở lên tại Hàn Quốc, cùng các workshop ở Nairobi và NYC
- Chính sách bổ sung tính năng khá rõ ràng
- Ngoại trừ các tính năng giúp nâng cao khả năng tiếp cận, dự án không thêm tính năng mới
Con đường bắt đầu học và sáng tạo
- Reference: tài liệu tham chiếu thư viện p5.js
- Examples: nơi học p5.js thông qua các ví dụ
- Start Coding: trình biên tập p5.js để bắt đầu viết mã ngay trên web
- interactive video: video giới thiệu tương tác về animation, audio, WebGL, khả năng tiếp cận và cách đóng góp
- Download Library: tải xuống thư viện p5.js
Cộng đồng và tham gia
- Community: trang xem các hoạt động cộng đồng của p5.js
- Donate: kênh quyên góp để hỗ trợ dự án
- p5.js 2.0 beta: trang beta riêng để xem phiên bản mới p5.js 2.0
1 bình luận
Ý kiến trên Hacker News
Có vẻ lý do chính liên kết này đang lên HN lúc này là vì website mới của p5.js
Năm 2023, Sovereign Tech Fund đã cấp cho đội ngũ p5.js 450.000 euro tài trợ với mục đích “cải thiện cấu trúc tài liệu và khả năng tiếp cận của p5.js”, và kết quả đang thấy hiện nay có vẻ đến từ khoản đầu tư đó
Cá nhân tôi thấy có hiệu quả. Việc điều hướng và tìm kiếm trên site dễ hơn nhiều, thông tin cũng hữu ích hơn. Chẳng hạn, đáng để so sánh tài liệu cũ và mới về cách dùng trình chỉnh sửa p5.js và canvas với trình đọc màn hình
[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...
Tôi cũng từng dùng Processing khoảng 10 năm trước và khi đó nó đã rất dễ dùng; còn trong p5.js thì cũng dễ bắt gặp bug hoặc phần triển khai còn thiếu. Có thể port gần như tương tự, nhưng không phải 1:1 và vẫn phải học một số API
Về hiệu năng, p5.js hoàn toàn không gần với d3 hay three.js. Thành thật mà nói, tôi tự hỏi đến năm 2024 thì p5.js còn có ý nghĩa đến mức nào ngoài vai trò công cụ giáo dục. Hoạt ảnh web ngày nay có vẻ dễ làm hơn bằng CSS3 hiện đại cùng các thư viện bổ trợ, và cũng có thể có một luồng đơn giản từ ứng dụng vector miễn phí sang CSS
Ngay cả với các tác vụ cần tính toán theo từng pixel, cũng không có cách dễ dàng để dùng GPU hiệu quả. Vì vậy khoản tài trợ 450.000 euro nghe khá lạ, nhất là khi nó được dành cho một framework không quá phổ biến
Tuy nhiên tôi không thích bố cục trên màn hình lớn. Tutorial được liên kết [1] là các đoạn văn căn trái với chiều rộng cố định, khiến nửa bên phải màn hình bị trống. Ngược lại, những phần như tổng quan tài liệu tham chiếu [2] lại giãn thành 4 cột trên toàn màn hình; khi thu cửa sổ trình duyệt còn nửa màn hình thì ổn, nhưng khi phóng to tối đa thì khó đọc
[1]: https://p5js.org/tutorials/p5js-with-screen-reader/
[2]: https://p5js.org/reference/
Bản tin đó có khoảng 175.000 người đăng ký, nên các liên kết được đưa vào đó thường vài giờ sau sẽ lên trang nhất HN. Gần như không thể chứng minh mối liên hệ thực tế, nhưng tôi xem đó là một trong những điều thú vị về cách liên kết lan truyền trong hệ sinh thái
Site mới được tối ưu hơn cho di động, và giúp đọc nhiều nội dung hơn trên màn hình mật độ cao. Việc p5.js được chú ý trở lại là hoàn toàn xứng đáng, và các video Coding Train liên quan cũng đáng xem tương tự
ChatGPT biết P5.js khá tốt, nên nếu bảo “hãy viết một chương trình P5 vẽ sóng sin và cho phép điều chỉnh pha bằng slider” thì nó tạo ra ngay
Tôi đã dùng ChatGPT và P5.js để tạo một công cụ thiết kế cân bằng 5 khối lượng trên một đường tròn, nhằm làm một cây vĩ kéo từ tính dạng quay giảm hiện tượng khóa hài
Có thể kéo các đỉnh của ngũ giác: https://editor.p5js.org/spDuchamp/full/zgtkE2xik
Thành phẩm in 3D: https://www.instagram.com/p/Cr4ZXGztY27/
Website thật sự rất đẹp. Tôi khá bất ngờ khi phần About lại bỏ nội dung rằng đây là thứ kế thừa ý tưởng của Processing
Có lẽ giờ p5.js đã nổi tiếng hơn Processing, hoặc thậm chí nổi tiếng hơn Processing ngày trước
Một trong những bất mãn chính của ông ấy là dự án p5.js đã chiếm lĩnh Processing Foundation và thu hẹp việc phát triển Processing
Vào thời mà việc thao tác pixel trong những nơi như canvas trên webpage để tạo các thử nghiệm thị giác thú vị còn khá khó, nó thật sự là một công cụ hợp lý, đồng thời dễ đọc và dễ tiếp cận với các nghệ sĩ ít kinh nghiệm lập trình
Hồi đại học, tôi đã rất vui khi nghịch p5.js, và trước đây còn tự làm một cellular automaton nhỏ: https://ezhik.me/beyond184/
Thật tình cờ, tác phẩm đầu tiên khiến tôi quan tâm đến nghệ thuật số — giống như một lời tri ân thú vị dành cho điện toán — cũng dùng p5.js: https://baku89.com/work/ffff?lang=en https://animethemes.moe/anime/subete_ga_f_ni_naru_the_perfec...
Một trong những việc khó nhất với tư cách lập trình viên là vượt qua phần boilerplate trước khi đặt được pixel đầu tiên lên màn hình; p5.js giải quyết chuyện đó khá tốt, giúp tập trung hơn vào khía cạnh sáng tạo của “creative coding”
Tôi sẽ không dùng p5.js cho “phát triển phần mềm lớn thực sự”, nhưng khi muốn phác thảo thì đây là công cụ số đầu tiên tôi nghĩ đến
Vài năm trước, tôi biết đến thư viện này nhờ Daniel Shiffman
Các video của anh ấy là điều thiết yếu trong quá trình tôi trưởng thành thành một lập trình viên
Đây là một thư viện khá tốt để làm game nhanh
Tôi đã làm một mô phỏng nước nhỏ bằng p5.js, và rất thích việc p5 dễ học
[1]: https://github.com/trungdq88/summer
Processing ban đầu dựa trên Java đã truyền cảm hứng cho rất nhiều thư viện
Ngày nay, trong hầu hết các ngôn ngữ phổ biến đều có thể tìm thấy một thư viện tương thích ở mức nào đó
Tôi đã viết một phiên bản cho Racket như một dự án mùa hè: https://docs.racket-lang.org/manual-sketching/
Nguồn cảm hứng lớn nhất là kênh YouTube “The Coding Train” của Daniel Shiffman. Anh ấy có cảm quan chọn những vấn đề và thuật toán thú vị về mặt thị giác, và nhiệt huyết thì không ai sánh bằng
https://thecodingtrain.com/
Tôi đã dùng p5.js khá nhiều cả trong công việc chuyên nghiệp, nhưng nếu bây giờ định dùng nó, bạn nên biết chuyện gì đã xảy ra với một trong những đồng sáng lập của foundation, đồng thời là người tạo ra ngôn ngữ Processing gốc làm nền tảng cho p5
https://news.ycombinator.com/item?id=37760363
Sau khi biết những gì biết hiện nay, tôi hối tiếc vì đã từng ủng hộ công việc của Processing Foundation
Trong thời đại có rất nhiều API đồ họa hiệu năng cao như thế, tôi hiểu vì sao Processing/p5 trong nhiều năm lại có cảm giác trì trệ, không có thay đổi lớn. Một cái kết buồn
Tôi rất thích P5.js. Cộng đồng OpenProcessing có hàng nghìn tác phẩm tuyệt vời mà bạn có thể dễ dàng xem, sao chép và chỉnh sửa
Tôi chủ yếu dùng Python, nhưng việc chỉnh sửa từng chút các chương trình P5.js đã giúp tôi học JavaScript
[1] -- https://openprocessing.org/discover/#/trending
Trong playground của p5.js, bạn có thể viết và chạy mã ngay trên trình duyệt, đồng thời cũng có thể tạo tài khoản để lưu các code sketch
https://editor.p5js.org/nonoesp/sketches/ruSYeEUEH