email / ig

đăng ký

Khởi đầu p5.js

khoá học

☽ ⎯ 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ọ.

⎯ Tìm hiểu thêm về p5.js.

⎯ Các tính năng của p5.js.

⎯ Một số tác phẩm từ p5.js.

☽ ⎯ 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().

☽ ⎯ Phong cách lớp học

Song song với học code, trong lớp học của Lướt Code sẽ có rất nhiều thảo luận và bài tập thực hành với lập trình. Một số cuộc thảo luận đã diễn ra trong lớp bao gồm:

  • Code để thay thế cọ vẽ: Ưu và nhược?
  • Có phải tác phẩm nào cũng cần có tương tác với khán giả? Tương tác đó là gì: tương tác vật lý (sờ, chạm, ấn, đập), tương tác qua thông tin (gửi tin nhắn qua điện thoại, gửi thông tin qua cảm biến), …? Tương tác nào làm được bằng p5.js? Và làm như thế nào?
  • “Nếu … thì …” — thiết kế một trò chơi bằng các vế trên.

Hẹn bạn trong các buổi thảo luận sôi nổi của lớp mình nhé!

Một bài tập về nhà của lớp trước

Vào năm 1977, NASA phóng vào không gian hai tàu vũ trụ tên là Voyager. Khác với những nhiệm vụ không gian thông thường, hai tàu không người lái này mang theo hai chiếc đĩa vinyl tên là Voyager Golden Record. Hai đĩa này bao gồm những đoạn âm thanh được thu từ Trái Đất và một loạt những hình ảnh kể về cuộc sống, văn minh, và môi trường sinh sống của loài người.

Trong ngày đầu tiên đi học, Lướt Code mời bạn nhìn lại và nhớ lại về cuộc sống ở Trái Đất: Bạn sẽ kể gì không gian mình sống? Bạn sẽ kể gì về kỷ niệm mình sống? Bạn sẽ kể gì về chính bản thân mình? Bạn sẽ đặt gì vào chiếc đĩa Voyager Golden?

Bài nộp của cả lớp → https://thisplacedoesexist.netlify.app/

⎯☽ Đăng ký qua form hoặc nhắn chúng mình qua instagram ☾⎯

Lướt Code hẹn gặp bạn!