Khởi Đầu
☽ ⎯ Khoá học này dành cho
- Các bạn chưa biết gì về code, chưa bao giờ code, nhưng muốn thử code.
- Các bạn nghệ sỹ có nhu cầu mở rộng thực hành của mình sang lập trình.
- Các bạn muốn thử lập trình sáng tạo.
☽ ⎯ p5.js là gì?
p5.js là một thư viện lập trình, viết cho người dùng là nghệ sỹ và người thực hành sáng tạo. Nếu như người nhiếp ảnh sử dụng máy ảnh, người nhạc sỹ sử dụng nhạc cụ, thì người lập trình viên sử dụng “code” là công cụ của mình. Mỗi dòng code như một dòng văn, viết ra cho một mục đích. Chẳng hạn: `circle(100, 100, 50)` sẽ vẽ ra một hình tròn tại vị trí (100, 100) và có đường kính 50px. Đơn giản, thay vì dùng chuột bấm-kéo-thả, thì bây giờ bạn chỉ viết, viết, và viết. Viết ra chính các nút bấm và công cụ của mình.
Đồng ý Cookies → Nhấn nút ▶️/⏹️ để chạy/dừng code.
☽ ⎯ "Tính kết nối" là trọng tâm khoá học
p5.js có rất nhiều khía cạnh hay ho bạn có thể khám phá. Tuy nhiên, trong khuôn khổ thời lượng khoá học, Lướt Code sẽ tập trung vào một tính chất hay nhất của p5.js — tính kết nối. Tại Lướt Code, bạn giỏi cái gì thì bạn nên tiếp tục làm cái đó. Học code không phải để thay thế cho các công cụ bạn đang sử dụng mà để tiếp tục mở rộng các công cụ đó. Một số ví dụ về kết nối sẽ được thực hành trong khoá bao gồm:
- Kết nối với người xem thông qua chuột và thông qua bàn phím.
- Kết nối với các công cụ đồ hoạ truyền thống như Adobe Photoshop và Illustrator.
- Mở rộng các sản phẩm từ các công cụ trên — thêm chuyển động, thêm tương tác.
Điểm quan trọng nhất của khoá học là để người học kết nối được nền tảng họ đang thực hành vào code. Từ đó, mở rộng thực hành của họ.
☽ ⎯ Lịch học
- Chương trình được thiết kế làm 4 tuần. Mỗi tuần gồm 2 buổi, mỗi buổi 2 tiếng.
- Buổi đầu tiên bao gồm dẫn đề, lý thuyết, ví dụ, và các trao đổi xung quanh.
- Buổi thứ hai, người tiếp tục phát triển một tác phẩm cá nhân từ các ví dụ từ buổi trước.
- Ngoài ra, trong tuần, đề xuất các bạn dành thêm 4 tiếng để tự học, code bài tập, hoặc đọc bài trước.
Tuần 1: Đồ hoạ tĩnh
- Bố cục một bài vẽ (sketch) p5.js qua hàm setup() và draw().
- Các hàm vẽ cơ bản circle(), rect().
- Màu sắc trong p5.js và các hàm xử lý màu sắc.
- Chữ và sữ dụng chữ trong p5.js.
- Layer trong p5.js qua push() và pop().
- Các hàm biến đổi: xoay ⎯ rotate(), dịch chuyển ⎯ translate()
- Sử dụng biến và tự viết function.
Tuần 2: Tương tác
- Điều phối tương tác qua if/else.
- Tương tác thông qua chuột ⎯ mouseClicked(), mouseDragged()
- Tương tác thông qua bàn phím ⎯ keyPressed(), keyReleased()
- Load media vào trong bài vẽ ⎯ loadImage(), image()
Tuần 3: Chuyển động
- Làm quen với chuyển động theo thời gian ⎯ frameRate, frameCount
- Chuyển động tịnh tiến.
- Chuyển động tròn.
- Làm mượt chuyển động (ease in, ease out).
Tuần 4: Nhân bản và ngẫu nhiên
- Sử dụng vòng lặp (loop) để vẽ hoạ tiết (pattern).
- Làm quen với hàm ngẫu nhiên ⎯ random().
- Tạo hiệu ứng với hàm noise().
